¿Qué es un favicon y cómo crearlo?
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.
Categorías: Blogging, Diseño web, Posicionamiento, Utilidades, WordPress
Etiquetas: favicon, herramientas, marcadores, navegador, Web
Si te ha gustado este tutorial, subscríbete al feed RSS de todotutoriales.es.
Información Bitacoras.com…
Valora en Bitacoras.com: 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……
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!!
[...] un favicon en tu web mejora tu imagen de marca y tu posicionamiento en internet. En este tutorial cuento qué es y cómo integrarlo de forma muy [...]