favicon
CODIGO¿Qué es eso del favicon.ico?
favicon.ico es un icono (o ícono), es decir, una pequeña imagen, que aparece en algunos navegadores junto a la dirección de una página web. Por ejemplo, ahora deberías estar viendo algo parecido a esto (si usas Explorer 5 o superior tendrás que añadir primero la página a favoritos):
Lamentablemente , como tantas otras cosas inventadas y/o implementadas por los creadores de navegadores web, el funcionamiento de estos "faviconos" es errático, muchas veces impredecible, confuso e inconsistente.
Por eso hemos hecho esta página web: para explicarte cómo crear un icono para tu web rápidamente y sin complicaciones.
En realidad es muy sencillo, pero no te saltes ningún paso. No vale la pena perder mucho tiempo con esto de los iconos, así que no te pongas nervioso y sigue los pasos uno por uno.
Qué necesitas
Antes de nada, asegúrate de que tienes todo esto:
- Un editor de imágenes que guarde en formato .ico. No, un .ico no es una imagen cualquiera con la extensión cambiada. Tienes que guardar la imagen con formato .ico. Hay muchos programas que lo hacen. Aquí tienes una lista.
- Un editor de páginas web, es decir, un editor de texto normal y corriente. Hay decenas de ellos que son gratuitos (aquí tienes una lista de editores HTML), pero también puedes comprar uno (si quieres y te lo puedes permitir).
- Un programa para subir el icono a tu espacio web. El icono lo subes a la web exactamente igual que el resto de tus páginas.
- Una página web (naturalmente). No te hace falta un dominio propio. El servidor donde esté tu página web tiene que estar configurado correctamente, aunque normalmente casi todos lo están.
- Nada más.
Por supuesto, un navegador que soporte faviconos (IE5 o superior, Mozilla 0.96 o superior, Netscape 6.2 o superior, o Konqueror), sería útil para probar que todo funciona correctamente.
Paso a paso
1 - Crear el icono
El icono debe tener las siguientes características:
- Dimensiones 16 píxeles x 16 píxeles;
- 16 colores (4 bits);
- Formato ICO, no BMP, no GIF, no JPG.
En algunos navegadores puedes usar iconos mayores, con más colores y en otros formatos, pero si quieres que tu icono funcione a la primera, hazlo de 16x16, con 16 colores y en formato ICO.
Puedes bajarte un editor de iconos y crear tu icono tranquilamente en la comodidad de tu hogar. Para una lista completa de editores de iconos freeware y shareware, visita el sitio web de softonic.com.
Otra opción es crear tu icono con cualquier programa de edición gráfica (por ejemplo el programa de dibujo Paint que viene con Windows, o cualquier otro que ya tengas), y el pequeño programa Clic, que lo guarda en formato ICO y con la paleta de 16 colores de Windows. Así es como está hecho el icono de favicon.net
Crear iconos es una experiencia apasionante para algunos y un suplicio muy frustrante para el resto. Tómatelo con calma. En todo caso, al final tendrás tu favicono en un fichero con el nombre favicon.ico ¡Acuérdate de dónde lo guardas!
2 - Modificar nuestras páginas HTML
Ahora modificaremos nuestras páginas web para que los navegadores muestren el iconito en la barra de direcciones. Es muy sencillo, sólo hay que poner un elemento LINK entre las etiquetas <HEAD> y </HEAD> de tus ficheros HTML (vamos, que se lo metas en la cabeza), por ejemplo:
<link rel="shortcut icon" href="http://www.tudominio.com/favicon.ico">
o por ejemplo:
<link rel="shortcut icon" href="http://www.undominio.com/directorio/favicon.ico">
De momento sólo tienes un favicon.ico (es suficiente, ¿no?) así que lo mejor será que lo pongas junto con el fichero principal de tu página web.
Modifica todas las páginas HTML que quieras. Para empezar te aconsejo que cambies sólo la inicial, no vaya a ser que después de todo el esfuerzo resulte que te has equivocado en alguna tontería. Ya tendrás tiempo para cambiar el resto cuando veas que funciona.
Nota: realmente no hace falta que el icono se llame favicon.ico, ya que con el elemento LINK podemos especificar cualquier nombre; por otro lado, si no ponemos el elemento LINK en el HTML, el navegador buscará el fichero favicon.ico en el directorio raíz del dominio.
3 - Subirlo todo a la web
Sube las páginas HTML que hayas modificado a tu espacio web, y tu icono favicon.ico al sitio donde les hayas dicho a tus páginas HTML que va a estar. Si subes el icono con un cliente FTP asegúrate de que lo subes en modo binario.
4 - Comprobar que funciona
En teoría ya está, vamos a probarlo:
- Si tienes Internet Explorer 5 o superior, ve a tu página y añádela a favoritos. Hasta que no la añadas a favoritos no saldrá el icono, por eso se llama favicon.ico ("fav" de favoritos). Una vez que la hayas añadido a favoritos debería salir el icono tanto en el menú de favoritos como en la barra de direcciones, a la izquierda de la dirección de la página. Si no sale abre el menú de favoritos y selecciona tu página. Si sigue sin salir cierra todas las ventanas que tengas abiertas del Explorer, arráncalo de nuevo y vuelve a tu página.
En realidad hay una forma de ver el icono de favoritos en Explorer 5 sin añadir la página a favoritos, y es la siguiente: pincha con el ratón sobre el icono de explorer que aparece en la barra de direcciones, y sin soltar el botón del ratón arrástralo hacia la derecha hasta que estés encima de las letras "http", y entonces lo sueltas. Si no sale el icono, inténtalo dos o tres veces más.
- Si tienes Mozilla 0.9.6 o superior, ve a tu página. El icono debería salir directamente en la barra de direcciones (o en la pestaña si está activada la navegación por pestañas) sin añadir la página a tu lista de marcadores. El icono no saldrá en la lista de marcadores, sólo en la barra de direcciones.
- Si tienes KDE/Konqueror, el icono aparecerá al menos en cuatro sitios diferentes:
- en la barra del título de la ventana, como botón para abrir el menú de la ventana;
- en la barra de direcciones de Konqueror;
- en la lista de marcadores;
- en el panel Kicker, junto al nombre de la ventana o aplicación.
Si no funciona, primero tranquilízate. Pregunta a tus amigos si ellos pueden ver tu favicono. Si ellos lo ven y tú no es porque tu navegador no soporta faviconos, porque no lo has añadido a favoritos correctamente, o porque tienes problemas con la caché de tu navegador. Borra tu página de favoritos, cierra todas las ventanas que tengas del navegador, vuelve a abrirlo y añade de nuevo tu página a favoritos. Si sigue sin salir, borra tu página de favoritos, borra toda la caché (aunque eso borrará todos los iconos de favoritos del resto de las páginas que tengas en favoritos), cierra todas las ventanas del navegador, y vuelve a intentarlo todo desde el principio.
Preguntas frecuentes
- ¿Para qué sirve un favicono?
Es cuestión de imagen, lo mismo que un logotipo.
- ¿Exactamente qué es un favicono?
Es una pequeña imagen que representa a una página web o a un sitio web completo.
- ¿Qué formato debe tener esta imagen?
La imagen debería esta guardada en formato ICO. ICO es un formato propietario de Microsoft para almacenar varios ficheros BMP (bitmaps) juntos, y normalmente se utiliza para contener iconos de escritorio de Microsoft Windows. Lo más conservador es que el icono tenga unas dimensiones de 16x16 píxeles y 16 colores (usando la paleta estándar de 16 colores de Windows), pero teniendo en cuenta que los iconos se pueden arrastrar al escritorio como accesos directos, y que la mayoría de la gente navega con 256 colores o más, se puede usar perfectamente un icono de 32x32 y 256 colores. De hecho, como el formato ICO puede contener varios iconos, se pueden meter cuatro iconos dentro de un mismo fichero favicon.ico: 16x16x16 colores, 32x32x16 colores, 16x16x256 colores y 32x32x256 colores, y Windows se encargará de escoger el más apropiado para cada contexto (al menos en teoría).
- ¿No puedo usar otro formato como GIF, BMP o JPG y guardarlo con extensión ICO?
No, eso no funcionará para todos los navegadores. Para que funcione en todos tiene que estar en formato ICO. Otros navegadores como Konqueror o Mozilla y derivados aceptan también imágenes en otros formatos (GIF, PNG...), pero Explorer sólo admite el formato ICO.
- ¿Dónde hay que guardar esta imagen?
En teoría, en cualquier parte de tu espacio web. Lo recomendable es hacerlo en el directorio raíz del dominio, y si eso no es posible, junto a la página principal del sitio web.
- ¿Cómo debe llamarse esta imagen?
El nombre por defecto que buscan los navegadores es favicon.ico. En realidad, se puede llamar de cualquier modo, preferiblemente con la extensión .ico. Sin embargo, si no se usa el nombre estándar favicon.ico es necesario añadir a las páginas HTML un elemento LINK en la cabecera del documento que indique cuál es el nombre del icono y dónde esta situado, según este esquema:
<head>
... otros elementos ...
<link rel="shortcut icon" href="http://sudominio.com/directorio/nombreicono.ico">
... otros elementos ...
</head>
Hay dos posibles problemas con esto: que el navegador sólo quiera iconos con el nombre favicon.ico, o que el navegador sólo quiera iconos situados en el raíz del dominio. También es posible que el navegador no encuentre el icono si no se pone el elemento LINK anterior, aunque se llame favicon.ico y esté en el raíz del dominio. Por tanto lo más seguro es llamarlo favicon.ico, colocarlo en el raíz del dominio y poner un elemento LINK que indique dónde está:
<head>
... otros elementos ...
<link rel="shortcut icon" href="http://sudominio.com/favicon.ico">
... otros elementos ...
</head>
- ¿Cómo creo el icono favicon.ico?
Existen muchos programas para crear y editar iconos. El editor de iconos más conocido se llama Microangelo 5.0, pero hay otros muchos. Puedes descargar varios desde la página web de softonic.com, algunos de ellos gratuitos. Existe un pequeño programa llamado Clic que te permite importar cualquier imagen desde el portapapeles y la exporta en formato ICO con la paleta del sistema de 16 colores de Windows.
Para crear un favico.ico con más de un icono tendrás que usar un editor que permita hacer eso, como el ya mencionado Microangelo o el Icon Forge, entre otros.
Para Linux, el programa KIconEdit permite guardar imágenes con el formato ICO de MS Windows. Más información en la página de Edwin Groothuis.
- ¿Todos los servidores me permiten usar ficheros .ico?
Lo normal es que sí. Es posible que no funcione si el servidor no está configurado para que la extensión .ico corresponda al tipo MIME image/x-icon.
- He perdido todos los iconos de favoritos. ¿Por qué?
La caché de tu Explorer se ha borrado. Al borrar la caché se borran todos los iconos de favoritos.
- He cambiado mi favicon.ico y sigue apareciendo el antiguo. ¿Qué pasa?
Tu navegador sigue mostrando el favicon.ico que tiene en la caché. Tienes que borrarlo de la caché primero y volver a añadirlo a favoritos. O puedes cambiar el nombre de tu icono y volver a añadir tu página a favoritos.
- En el registro de errores de mi servidor web aparece un montón de errores 404 porque no se encuentra el fichero favicon.ico. ¿Qué hago?
Lo mejor será que pongas un fichero favicon.ico cualquiera o que redirijas estas peticiones a otra parte. Más información en este hilo de comp.infosystems.www.servers.unix
- ¿Es cierto que el favicon.ico puede dar problemas de seguridad?
Sí, pero hasta ahora sólo se ha detectado una vulnerabilidad en Explorer 5.0. Más información en magnux.com.
- ¿Es cierto que el favicon.ico puede vulnerar la privacidad de los usuarios?
El webmaster de un sitio web puede saber cuáles de los usuarios que le visitaron con Explorer 5 o superior añadieron su página a favoritos, aunque a veces se reciben peticiones por parte de Explorer 5 sin que el usuario haya añadido la página a favoritos. Otros navegadores descargan el icono sin necesidad de añadir la página a la lista de marcadores. Más información en magnux.com.