Un favicon es un icono de favoritos, también conocido como icono de página. Viene del inglés favorites icon y es una imagen muy pequeña asociada con una página o sitio web. Los navegadores suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente. Disponer de favicon mejora tu imagen de marca y tu posicionamiento en internet.
Asimismo se utilizan para identificar más fácilmente las páginas, presentándolos junto a sus respectivos títulos, en las listas de marcadores o favoritos, en los historiales de páginas visitadas y cada vez que deban hacer referencia a ellas.
Esa es, más o menos, la definición que encontramos en la Wikipedia. Pero hay más.
Para que aparezca en tu sitio debes crearlo. Es una imagen de 16×16 píxeles, de 16 colores (4 bits) en formato .ico. No vale una imagen cualquiera .gif, .bmp, .png o .jpg y cambiarle la extensión, no, debes crearla en formato .ico de Microsoft a propósito para esto. Algunos navegadores admiten imágenes de mayor tamaño y con más colores, pero si quieres que el resultado final no te falle, y que se vea en absolutamente todos, es mejor hacerlo así. Ahorrarás un montón de quebraderos de cabeza.
Cómo crear un favicon.ico paso a paso
1. Crea una imagen cuadrada
Con fondo o sin fondo, puedes usar la misma del avatar. Nosotros vamos a usar esta, que es nuestro avatar en Twitter: 
La imagen va a verse muy pequeña. Asegúrate que no sea muy compleja y que se va a comprender y reconocer al tamaño final.
2. Genera el archivo en formato .ico
Puedes usar cualquier aplicación offline que sirva para editar iconos o convertir el archivo de imagen que quieras a formato .ico en cualquiera de los servicios online gratuitos que existen para eso.
Hay muchos y todos funcionan de forma muy parecida, una búsqueda en Google te devolverá cientos de miles de resultados. Para este tutorial vamos a usar GenFavicon que, además está en español, pero si quieres crear un favicon desde cero o un favicon animado puedes probar en otros sitios como favicon.cc:
En el primer paso puedes cargar una imagen que esté ya en internet o subirla desde tu ordenador:
Entonces verás una representación arriba para que ajustes la imagen a tu gusto:
La imagen ya ajustada:
Ajusta el tamaño a 16×16 y haz clic en «Captura & Previsualización:
¡Ya se ve la previsualización! Finalmente, haz clic en descargar favicon:
Se abre la imagen en en el navegador, para que la puedas guardar,
y también muestra la previsualización en la barra de direcciones, pero observa que la página se llama to_ico.php
y efectivamente el archivo generado se llama to_ico.ico, así que ahora debes renombrarlo como favicon.ico:
Otros servicios generadores de faviconos similares a este disponen de una función para crear un favicon.ico animado y también pra guardarlo a diferentes tamaños. Nosotros lo preferimos estático y solo lo vamos a hacer a 16px, así que nos vale este mismo.
3. Sube el icono al servidor
Debes colocarlo en la raíz del sitio:
4. Introduce enlace HTML en el <head> de las páginas del sitio
Si usas WordPress debes editar header.php, introduce este código entre las etiquetas <head> y </head>:
<link rel=»icon» href=»/favicon.ico» type=»image/x-icon» />
5. Comprueba que funciona
Si no funciona, o no ves el favicon en tu página, pregúntale a otra persona si lo ve, tal vez tengas problemas con la caché de tu navegador o no lo hayas colocado en el lugar correcto. Intenta refrescar la caché del navegador o borrarla.
Para mi red de sitios uso el plugin de WordPress All in One Favicon, es lo maximo.
Muchas gracias por el tutorial, muy bueno!!
Solo una cosa: creo que no me funciona porque al subir el archivo favicon.ico a medios del wordpress se trasforma directamente en favicon.jpg y claro, así no lo detecta.
¿alguna idea de porqué pasa? ¿alguna solución?
Muchas gracias!!
@mónica es mejor que lo subas por FTP, porque el favicon debe estar en la raiz del sitio, mejor que en subdirectorios. A través de «medios» no puedes controlar su ubicación.
Gracias!!