Icono en favoritos

  • Por
  • 01 de enero de 2001
  • Valoración:
  • 30 Comentarios
  • DHTML
En este artículo te enseñamos a colocar un icono personalizado de tu sitio en el menú de favoritos, para que aparezca en lugar del icono de Internet Explorer.
En este artículo vamos a aprender a colocar un icono en el menú de favoritos, de modo que cuando alguien guarde la página en sus favoritos se vea la página con el icono que nosotros deseemos, en lugar del icono de Internet Explorer. El icono de nuestra página también se podrá ver en la barra de direcciones del explorador, siempre a partir del momento en que un usuario guarde la página en favoritos.

Es un efecto muy sencillo y vistoso, pero tiene un serio inconveniente: sólo funciona en Internet Explorer versión 5. No funciona en Netscape ni en versiones antiguas de Explorer. Actualizado: el icono personalizado para las webs ahora lo soportan todos los navegadores.

Actualizado: Este es uno de los primeros artículos publicados en DesarrolloWeb.com y desde entonces algunas cosas han cambiado, aunque todavía podemos seguir sus instrucciones para publicar un icono para nuestra web. Para empezar, todos los navegadores de la actualidad soportan el icono "favicon". Internet Explorer 6 es el único que da algunos problemas, pero ese navegador cada día se utiliza por menos usuarios. Además, ahora los navegadores no necesitan que se marque la web como favorita para empezar a mostrar el icono. Simplemente, cuando visitan una página, intentan acceder al archivo favicon.ico en la raíz del dominio y lo muestran en la barra de direcciones, en las pestañas o donde sea. Se pueden leer los comentarios de los usuarios, al final del texto del artículo, que muchas veces ofrecen pistas y actualizaciones interesantes para los interesados en colocar su propio icono.

Cómo conseguir un icono

Un icono es un archivo especial, que tiene extensión .ico. Los editores de gráficos habituales no trabajan con este formato, por lo que se requerirá del uso de una herramienta especial para la creación y tratamiento de la imagen que vamos a utilizar como icono.

Una popular herramienta útil para trabajar con iconos es Microangelo. Permite la creación de gráficos que luego se pueden guardar como .ico. También permite convertir a iconos gráficos en formato GIF.

Nota: Hemos publicado un vídeo que muestra el proceso de creación de un icono con Gimp y cómo subirlo por FTP para que se muestre en una página web: Crear icono favicon.ico para una web con Gimp.

Donde colocar el icono

Para conseguir nuestro objetivo tenemos dos posibilidades. La primera se trata de colocar un icono a todo un sitio web entero. Con la segunda opción podremos asignar un icono en una página de manera independiente.

Colocar un icono en un sitio, de manera global

Para ello debemos conseguir un archivo ico y darle el nombre "favicon.ico". Este archivo lo colocaremos en el directorio raiz del dominio. Cuando se introduzca en favoritos cualquier página del sitio se vera el icono seleccionado.

No siempre tenemos acceso al directorio raiz del dominio. Imaginemos que publicamos una web en Geocities, en este caso nunca tendremos acceso al directorio raiz, www.geocities.com, sino que tendremos acceso al directorio que nos hayan asignado, www.geocities.com/mipagina. Para este caso, tenemos una segunda manera de insertar el icono.

Colocar un icono específico en una página

En este caso tenemos que colocar una etiqueta en la cabecera del documento HTML (entre y ). Esta etiqueta la tenemos que colocar en cada página que queramos asociar con un icono.

<link rel="SHORTCUT ICON" href="myicono.ico">

Por supuesto, en el atributo href de la etiqueta anterior, se ha de colocar el nombre del icono que queremos utilizar y la ruta para acceder a el. En el caso del ejemplo anterior se supone que un archivo llamado myicono.ico estará en el mismo directorio que la página web.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Juan Ig Padial

25/4/2001
Además con el Microangelo, se puede hacer un icono de la siguiente forma:

- Con cualquier programa de diseño, tipo Photoshop, creamos una imagen, a la hora de guardarla, lo hacemos como imagen bitmap de 256 colores.
- Nos vamos a MS-DOS y allí renombramos este archivo de .bmp a .ico con la orden ren "nombre de archivo.bmp" nombre de archivo.ico" y listo, ya tenemos el icono.

Julio Ramos

24/4/2002
La forma mas asequible y sencilla de hacer un icono es con el Paint. Solamente tendremos que dibujar el icono en un archivo en el que los atributos de la imagen sean razonables (p.e. 50x50 pixeles), y al Guardar como ... escribir el nombre del archivo con la extensión ico.

Felipe Rojas

29/8/2002
Esto NO funciona con Explorer 6.0

Jose Luis

17/1/2003
Seriais tan amables de explicarme por qué el Iexplorer 6 no me muestra el icono que he subido al servidor de ono y sin embargo el d otras paginas, como la vuestra, sí?

NECESITAMOS RESPUESTA

Pues que nos lo explique alguien que lo sepa, puesto por lo que he podido observar con mi experiencia es que a veces se muestran los iconos y a veces no... He visto que en IE6 para XP los iconos se muestran con mucha facilidad, aunque el de DesarrolloWeb.com ahora no lo puedo ver. En IE6 para W98 seguro que no he podido ver los iconos.

En definitiva, queda aquí la pregunta para el que la pueda resolver. Saludos.

María Pié

18/1/2003
Los gráficos con extensión .ico pueden hacerse con el PhotoImpact (al menos con la versión 7). Es el único programa de diseño de imágenes que conozco que te permite guardar la imagen directamente con la extensión .ico, sin tener que transformarla luego.

Mauro

27/5/2003
No se porque a mi no me funciona, hice todo lo que aqui aparece.

Carlos

22/9/2003
El programa favicom ya no es gratuito :

Program Name IconForge Favicon/BuddyIcon Edition Download Now Get this on CD
Description Create favorites icons(favicons), BuddyIcons and more
Version/File 6.28b iconforge.exe
Date 16 Jun 03
License/Cost ShareWare (Time Limited) $37.95

Javier Rodriguez

22/10/2003
ICONFACTORY es un plug-in, para Photoshop, que permite crear estos iconos, tanto para MAC como para PC. El plug-in funciona en Photoshop 6 y 7 para MAC y PC.

LIMBO

06/7/2004
Es cirto que no funciona con explorer, pasaros a FireFox, estable, intuitivo, configurable al 99%, aunque se come algun que otro javascript, el tema de los iconos lo realiza perfectamente

David

05/8/2004
Realmente no es necesario contar con un archivo .ICO para poderlo realizar, con solo poner en el código:

<link rel="icon" href="NOMBRE_DE_LA_IMAGEN.png" type="image/png">
Si tienes un icono pero no puede verse o cuando "quiere" se ve intenta con:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Abejo

08/9/2004
El IrfanView permite convertir a .ico, el IE6 NO muestra los Iconos de los sitios

Largaro

26/2/2005
Hacer un icono es muy facil, no hace falta ningún programa raro con el Paint se puede hacer.

Hacemos un cuadro de 16x16; pegamos el dibujo que queramos crear como icono y lo guardamos en 24 bits, y luego le cambiamos la extensión ".bmp" por ".ico"

Para poder ver la extensión de un archivo; hay que abrir un carpeta cualquiera, en la parte superior hay un desplegable llamado HERRAMIENTAS vamos a OPCIONES DE CARPETA y desactivamos en la pestaña VER una opción llamada OCULTAR LAS EXTENSIONES DE ARCHIVOS PARA TIPOS DE ARCHIVOS CONOCIDOS (una vez que podemos ver el ".bmp" ponemos ".ico"

adolfoblasco

24/4/2005
Geocities no acepta el favicon

Paul Lopez

23/5/2005
No se por que hacen tantos comentarios que en lugar de guiar mas a los usuarios los confunden.

Si NO SABES COMO HACER UN ICONO no necesitas ningun programa extranio ni meterte al MS-DOS para renombrar, es tan sencillo como dice LARGARO solo requieres del PAINT, este sencillo programa viene en todo windows, y puedes accesar a el mediante el menu principal de windows q es inicio-programas-accesorios-paint despues dentro del paint te vas al menu imagen-atributos te va a salir un cuadrito pequenio y donde dice width ponle 32 y el height tambien ponle 32 q es el tamanio estandar de un icono 32x32 pixeles (ahorita el xp usa los de 128 pero no los recomiendo todavia jeje) mejor usa 32 pixeles y aqui ya haces tu icono y a la hora de grabarlo te vas al menu archivo-guardar como y le pones favicon.ico y el tipo de abajito elige la opcion 24-bit Bitmap (*.bmp;*.dib) y es todo ya tienes tu favicon.ico

yo

06/9/2005
<LINK REL="SHORTCUT ICON" HREF="http://www.tuweb/favicon.ico">

solo hay q cambiar la url de tu web, lo de shortcut icon dejarlo tal como está
Puede que no salga con IE pero funciona. con opera salen

kofreone

13/10/2005
como ya lo habian dicho , sin mas ciencia ni programas , lo que pueden hacer es hacer la imagen de photoshop o fireworks , la importan en paint despues le dan las dimensiones apropiadas 32x32 la guardan , en la ventana de "Guardar como:" solo escribe favico.ico y ya , el paint automaticamente la guarda como archivo de icono , sin necesidad de usar dos ...

unoquevaporahi

31/1/2006
Renombrar el archivo a .ico no hace que el archivo pase a ser un icono... Seguirá siendo un archivo BMP pero con extensión .ico... es como si le cambias la carrocería a un 600 y le pones la de un ferrari, sigue siendo lo mismo.

Usad cualquier programa de creación de iconos(Microangelo, Axialis IconWorkshop, IconEdit, etc.), pero el paint no sirve.

carlos

25/3/2006
En explorer no funciona, no hay manera...

Camilo

09/12/2006
El icono en Internet Explorer aparece cuando agregas la pagina a favoritos.

kros

02/1/2007
no se hagan bolas para crear iconos solo bajen icon cool edition seleccionan una imagen que tengan y la convierten en icono con un click

informata

29/5/2007
Internet Explorer 6 no funciona con la etiqueta shorcut, sino que lo que hace es leer el icono del archivo que se debe situar en el home del espacio con el nombre favicon.ico.

El formato puede ser también un bmp con extensión ico sin problemas.

Espero haberos servido de ayuda.

mastercafe

22/6/2007
Lamento deciros que el tema de Explorer es como una caja de pandora.
No es cierto que si está en favoritos aparece (en ocasiones si.. pero no siempre)
No es cierto que solo con ponerlo ya funciona todo (en ocasiones si.. pero no siempre)
Lo que todos los navegadores conocidos: FireFox, Opera, Netscape, Mozilla, Safari, Maxthon, etc... si hacen bien con el favicon.ico el Explorer normalmente no lo hace o lo hace en ciertas condiciones.
La experiencia me dice que no es necesario que esté en favoritos, pero ayuda. Que si la web tiene una pagina principal que indica que hay favicon suele funcionar (no siempre). Que si pones la ruta completa del favicon.ico también ayuda (no siempre). Que si la meta es completa: <link rel="shortcut icon" href="http://www.tuweb.com/favicon.ico" type="image/x-icon" > suele funcionar (no siempre). suele mejorar (no siempre).
Vamos que explorer es como una loteria y nadie tiene explicación a esto.

Pau

30/11/2007
Donde pone: En este caso tenemos que colocar una etiqueta en la cabecera del documento HTML (entre head y /head) --> se os ha olvidado ponerlo con lt y gt, asi que no aparece nada. Lo he tenido que ver con el fuente :p
Un saludo y felicidades por la web

Isabel

15/9/2009
Conversor gratuito online
Más facil aún:

Simplemente usas el conversor gratuito online http://www.coolutils.com/Online-Image-Converter.php# que permite pasar a .ICO cualquier grafico (JPG, GIF, BMP, etc.).

Resumiendo: creas tu icono en Photoshop (a 50x50 pixels, por ejemplo) lo conviertes a .ICO con el conversor arriba indicado, guardas la imagen en la carpeta de imagenes de tu web y después pegas en el HEADER este código:

<link rel="shortcut icon" href="images/favicon.ico" >

Saludos!

Spiderdraw

10/1/2010
ICO con Gimp
Yo no se mucho de estas cosas, por que hasta ahora estoy empezando, pero he visto que en el Gimp, se puede guardar con la extensión ICO, me podre a probarlo a ver que tal me va.

Saludos

Pat.mm

14/6/2010
favicon e IE
Tal y como dice Mastercafe, el icono de mi blog aparece y desaparece de forma aleatoria (tengo IE). Esta ultima vez ya es la tercera!!. La primera debió ser al cambiar de plantilla (creo...), la segunda porque sí...y la tercera también porque sí. Estoy intentando volver a instalarlo pero esta vez se me resiste. No hay manera. No entiendo de esto... ¿cómo pones a tu favicon de favorito? Lo siento, insisto en que no sé de ésto.

Sandra

04/11/2010
16 colores
Es cierto que el icono necesita ser a 16 colores???

Joel

16/11/2010
Mi Solucion al favicon en IE
Este es mi caso extremo para eso debemos de tener conocimientos de APACHE, porque no pude hacerlo en mi desktop(escritorio) con HTML.
Aqui les muestro mi solucion, lo hice colocando mi archivo (index.html) en la carpeta raiz (www) del APACHE y cambie la extension a .php (index.php) que lleva los siguientes codigos:
------------------------------------------------------------------------------------------
<html>
<head>
<title>Titulo</title>
<link rel="shortcut icon" href="imagenes/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="imagenes/favicon.ico" type="image/x-icon"/>
</head>
</html>
-------------------------------------------------------------------------------
Es obvio que el (favicon.ico) esta guardado en una carpeta imagenes.
Pues es claro tengo que abrirlo con http://localhost/ ya que es un servidor APACHE. Espero les ayude mi solucion.

javiramost

10/10/2011
FUNCIONA!!! GRACIAS
Bueno, he seguido todos los pasos y he conseguido crear el icono y colocarlo en su sitio, y además se ve en Firefox y Safari (soy de Mac).

He usado Photoshop para hacer el icono, lo he guardado como PNG 24 y luego, en el escritorio, le he cambiado la extensión y he puesto .icon

En el index.html de mi web, he pegado el código que proporciona JOEL (pongo su información al final de este texto. De ese código, he quitado imagenes/ pues mi favicon esta en la misma carpeta que el fichero index.html.

A continuación pego aquí el código que he puesto en HEAD:

<head>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>


</head>


Saludos,

Javier




Información de JOEL (16/11/2010):

"Este es mi caso extremo para eso debemos de tener conocimientos de APACHE, porque no pude hacerlo en mi desktop(escritorio) con HTML.
Aqui les muestro mi solucion, lo hice colocando mi archivo (index.html) en la carpeta raiz (www) del APACHE y cambie la extension a .php (index.php) que lleva los siguientes codigos:
------------------------------------------------------------------------------------------
<html>
<head>
<title>Titulo</title>
<link rel="shortcut icon" href="imagenes/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="imagenes/favicon.ico" type="image/x-icon"/>
</head>
</html>
-------------------------------------------------------------------------------
Es obvio que el (favicon.ico) esta guardado en una carpeta imagenes.
Pues es claro tengo que abrirlo con http://localhost/ ya que es un servidor APACHE. Espero les ayude mi solución."

alonsoosc

03/2/2012
icono en la barra web
hola a todos, hay algo que no me queda clara o sera que mi pagina web la tengo con jimdo.com y tal ves por eso no he podido colocar mi logo. alguien que pueda ayudarme? saludos...

Compartir