¿Qué es el favicon y cómo utilizarlo en nuestra web?

¡Comparte nuestro contenido!

Favicon viene de la frase favorites icon o icono de favoritos, y se refiere a ese pequeño icono que podemos ver al lado del título de nuestra página en las pestañas del navegador o la barra de marcadores / favoritos. La idea detrás del favicon, es que sea una imagen sencilla pero representativa del sitio, logo, producto o marca comercial.

¿Qué es el favicon y cómo utilizarlo en nuestra web? - CableNaranja

¿Cómo se utiliza el favicon?

Se trata de un archivo con terminación ICO, aunque también pueden utilizarse imágenes PNG o GIF. La idea es colocar este archivo con ese nombre exacto sobre la raíz del sitio. Lo más recomendable es que sea de 16×16 píxeles.

¿Qué es el favicon y cómo utilizarlo en nuestra web? - CableNaranja

Lo siguiente es colocar dentro de nuestro HTML las siguientes dos instrucciones:

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

Es importante aclarar que el atributo type puede cambiar a cualquiera de los siguientes valores:

  • Para imágenes PNG: image/png
  • Para archivos GIF: image/gif

¿Cómo se crea un archivo ICO?

Suponiendo que tenemos los mismos archivos de la imagen de arriba, vamos a utilizar el archivo llamado ladrillos.jpg para substituir el típico favicon de Xampp (El emulador web que utilizo)

Para hacer el proceso más fácil, utilizaré la herramienta en línea Favicon generator. Al llegar, presionemos el botón Seleccionar archivo para localizar y cargar nuestro archivo.

¿Qué es el favicon y cómo utilizarlo en nuestra web? - CableNaranja

Ahora, seleccionamos la opción Generate only 16×16 favicon.ico, opcionalmente podemos marcar también la opción Include your favicon.ico in the public gallery si queremos que nuestro favicon se guarde en su biblioteca pública de archivos.

¿Qué es el favicon y cómo utilizarlo en nuestra web? - CableNaranja

Al presionar el botón Create Favicon obtendremos nuestro archivo, que podremos descargar al presionar el enlace Download the generated favicon.

¿Qué es el favicon y cómo utilizarlo en nuestra web? - CableNaranja

Reemplazamos el icono actual con el nuevo.

¿Qué es el favicon y cómo utilizarlo en nuestra web? - CableNaranja

Colocamos las dos líneas de código que mencionamos arriba:

¿Qué es el favicon y cómo utilizarlo en nuestra web? - CableNaranja

Al guardar nuestro archivo y recargar la página, el favicon ya estará visible en la pestaña de nuestro navegador.

¿Qué es el favicon y cómo utilizarlo en nuestra web? - CableNaranja

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

Podría también gustarte...

Deja un comentario

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

shares