¿Qué es un favicon y cómo crearlo?

Favicon

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.

Favicon en pestañas

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.

Favicon en marcadores

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: Avatar de todotutoriales

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:

Genfavicon

En el primer paso puedes cargar una imagen que esté ya en internet o subirla desde tu ordenador:

Generar favicon paso 1

Entonces verás una representación arriba para que ajustes la imagen a tu gusto:

Generar favicon paso 2: ajustar imagen

La imagen ya ajustada:

Generar favicon paso 2: imagen ajustada

Ajusta el tamaño a 16×16 y haz clic en “Captura & Previsualización:

Generar favicon paso 2: ajustar tamaño

¡Ya se ve la previsualización! Finalmente, haz clic en descargar favicon:

Paso3: descargar favicon

Se abre la imagen en en el navegador, para que la puedas guardar,

paso3 descargar favicon

y también muestra la previsualización en la barra de direcciones, pero observa que la página se llama to_ico.php

Previsualización del favicon

y efectivamente el archivo generado se llama to_ico.ico, así que ahora debes renombrarlo como favicon.ico:

paso3 renombrar favicon

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:

Subir favicon al servidor

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.

4 comentarios en “¿Qué es un favicon y cómo crearlo?

  1. 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!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *