¿Qué es Favicon y cómo crear uno?

Favicon o icono favorito es aquel gráfico que aparecerá representando a nuestra web en las pestañas de favoritos del usuario. Aparece justo a la izquierda del nombre de la página web en las pestañas del navegador. 

Tiene un tamaño fijo de dimensiones cuadradas (16×16, 32×32, 48×48, 64×64 o 128×128 píxeles) y con profundidad de color de 8, 24 o 32 bits. Los formatos que acepta son cio, png, jpg, gif y sgv. De todas formas, las pestañas no son el único espacio para el que podemos diseñar nuestro icono, sino que también podremos adaptarlo a plataformas como Google TV, los diferentes tipos de retinas para IPad o IPhones. 

¿Para qué sirve?

No sólo es un elemento estético sino que su tarea principal es ayudar al usuario a encontrar e identificar nuestra página web más fácilmente y mejorar su experiencia. 

De esta manera, es importante que nuestro favicon sea lo suficientemente sencillo pero característico como para que el usuario lo pueda identificar a simple vista.

El favicon también será el identificador principal que aparezca en la página de inicio de accesos directos en Google. 

En definitiva, sirve de una marca personal que nos podrá ayudar a construir nuestra imagen corporativa. 

¿Cómo crearlo?

Tenemos varias opciones dependiendo de si queremos diseñar nuestro icono desde cero o sencillamente subir una imagen de la que ya disponíamos. 

Herramientas Online

Si ya tenemos nuestro icono pre-diseñado podemos recurrir a las plataformas Favic-o-matic o Favicon Generator (sólo en inglés), en la cual tendríamos la posibilidad de elegir alguno de los iconos diseñados por la comunidad. Sin embargo, podremos encontrar aquellas que nos permitan diseñarlo desde cero y convertirlas, como son x-icon, favicon.io o favicon.cc, en la que podremos dibujar incluso un icono animado, o elegir uno de los más de 230.000 iconos ya prediseñados.

Desde casa

Si queremos invertir un tiempo en crear nuestro logo personalizado, también podremos dotarnos de cualquier plataforma gráfica (Microsoft Paint, Adobe Illustrator, Adobe Photoshop, Pixia, GIMP, etc.) y luego transformar la imagen en formato “.ico”. Para ello es conveniente que elijamos el tamaño desde un principio (32×32 píxeles, por ejemplo) y preservemos el fondo transparente.

WordPress

Por último, WordPress nos ofrece este servicio intuitivo en Apariencia > Personalizar > Identidad del sitio > Icono del sitio, en donde podremos subir nuestra imagen y convertirla a favicon. WordPress también nos permite realizar algunos retoques a la imagen. Ésta quedará guardada en los contenidos de la carpeta wp-content. 

Añadir o modificar un favicon desde la web

Para subir los archivos “.ico” a nuestra web, podemos o bien ir a Configuración > Iconos de la Web o cargar el archivo a través del FTP en el directorio raíz de la web y escribir el siguiente código en el head:

<link rel=»REL-FAV» href=»RUTA-FAV» type=»FORMATO-FAV» sizes=»TAMAÑO-FAV»>

En donde REL-FAV es el valor icon, RUTA-FAV sería la ruta o el url del favicon, FORMATO-FAV dependería del formato de favicon y finalmente TAMAÑO-FAV es simplemente el tamaño del favicon. Nota: El tamaño recomendado para subir el archivo favicon.ico es de 16×16 o 32×32.

¡No podemos dejar de recomendarte que crees tu propio favicon para completar tu web! Esperamos que te haya sido útil.