¿Qué es Favicon y cómo hacerlo?

por | Jun 23, 2020 | Aprender WordPress

¿Qué es Favicon y cómo hacerlo?

¿Qué es un favicon? ¿Para qué sirve? ¿Cómo se hace?

Si has tenido varias pestañas abiertas en el navegador te habrás dado cuenta de que al lado de cada nombre aparece una pequeña imagen, a la que llamamos favicon.

Te vamos a mostrar qué es, cómo identificarlo, para qué se utiliza y cómo crear tu propio favicon.

 

Qué es un favicon


Un favicon es básicamente el icono que representa a tu página en las pestañas, cuando se agrega a favoritos o en los accesos directos de la página principal de Google.

Si te cuesta identificarlo puedes realizar el siguiente proceso: abre tu navegador, abre varias pestañas con distintas webs a tu gusto. Ahora fíjate en las distintas pestañas, tienen un icono al lado del nombre, ¿verdad? Pues eso mismo es lo que llamamos favicon.

Ejemplos Favicon

Este icono identificativo de tu página web tiene unas dimensiones cuadradas, habitualmente de 16×16 o 32×32 píxeles. Habitualmente, se utiliza el logotipo de la página web o marca, o bien se utiliza una variación de este.

Hay que tener en cuenta que también se considera favicon a los iconos que aparecen en las apps de iOS y Android, y que tienen un formato distinto pero cumplen la misma función.
 

Para qué sirve un favicon


Su tarea principal es identificar tu página y facilitar la experiencia del usuario en su navegación. Es decir, cuando un usuario navega por internet, lo normal es que tenga varias pestañas abiertas.

Por eso es muy importante que, con tan solo un pequeño vistazo, el usuario identifique cuál es la pestaña que corresponde a nuestra web gracias al favicon.

Este favicon aparece también cuando un usuario guarda nuestra página en marcadores o al entrar en la página de inicio de Google junto a los accesos directos.

El favicon es como el “resumen” de nuestro logo, con el que se va a identificar nuestra web y nuestra marca.

Además, cabe destacar que el favicon contribuye mucho a la imagen corporativa de nuestra marca. Es decir, al estar siempre presente transmite esa imagen de un solo vistazo y va calando en los usuarios.

Tener un favicon no tiene un efecto directo sobre el SEO, pero sí acarrea un problema: Cuando un usuario accede a tu página web, tu navegador realizar una petición donde solicita este icono de tu página para mostrarlo en las pestañas y barra de navegación, por lo que si no se muestra ninguno (por que no tienes favicon), tendrás un error 404.
 

Cómo hacer un favicon


Desde hace un tiempo, tener un favicon es prácticamente imprescindible.

Recuerda que el favicon tiene que ser o bien tu logo, o bien un elemento identificativo de este. Por ejemplo, si tu página se llama “Mariposa” y tu logo es una mariposa junto al nombre de “Mariposa”, para el favicon utilizarías solo la parte visual, es decir, la imagen de la mariposa sin el nombre.

Eso sí, siempre debe llevar los colores corporativos de tu web o marca.

Existen varias formas para saber cómo crear un favicon:

  1. A través de programas de diseño como Photoshop o Illustrator. Si se te da bien diseñar, puedes crearlo tú mismo con las dimensiones adecuadas (32×32) y adaptando tu logo. Luego deberás transformar la imagen al formato “.ico”.
  2. Utilizando herramientas online para la creación de favicons. Algunas de ellas sirven para diseñar un favicon desde cero como: cc, favicon.iox-icon editor. Otras se sirven de una imagen que subas para editarla y transformarla en favicon como: Favic-o-matic, GenfaviconFavicon Generator.
  3. Mediante WordPress. Desde el menú de WordPress en “Apariencia > Personalizar” nos permite subir una imagen y que se utilice como favicon. Esta imagen se guardará en los contenidos de la carpeta wp-content de tu WordPress.

    También se pueden descargar plugins que facilitan la creación del favicon.

  4. Encargándolo a diseñadores profesionales para que adapten tu logo al favicon.

Sea como sea, ¡anímate a cambiar o instalar un favicon en tu WordPress!