Cuando introducimos el nombre de una web en el buscador, os habréis dado cuenta de que en la barra de direcciones aparece a la izquierda un icono reducido con el nombre y logotipo del sitio web en concreto. Este icono consiste en una pequeña imagen que nos permite visualizar y distinguir cada pestaña del navegador.
Es decir, podemos tener varias pestañas abiertas en el navegador y, sin hacer clic directamente en ellas, distinguir un sitio web de otro. En el supuesto de que el sitio web carezca de este icono, se mostrará en su lugar un símbolo del navegador en el que nos encontremos.
¿Cómo puedo crear mi propio favicon?
Existen varias posibilidades a la hora de crear tu favicon. A continuación os vamos a enseñar las más utilizadas.
En el caso de Wordpress, la función para incorporar un favicon ya viene integrada en el propio gestor de contenidos. Así que, resulta bastante sencillo, solamente debes seguir los siguientes pasos:
Accede a la página principal de WordPress:
- Apariencia
- Personalizar
- Identidad del sitio
- Icono del sitio
- Seleccionar imagen
- Publicar
Obviamente, antes de comenzar deberás haber subido a wordpress el logotipo o la imagen que vayas a emplear como favicon.
Otra opción para integrar tu favicon es a través de plugins. El más utilizado es Favicon by RealFaviconGenerator. Se trata de un plugin superligero que no afecta al rendimiento de tu sitio web. Te permitirá, en cuestión de segundos, configurar tu favicon. Es compatible con Windows, iOS, Android , Mac, etc.
Otro plugin, no tan conocido pero, igual de eficaz y sencillo de utilizar es Heroic Favicon Generator.
También podemos utilizar un editor gráfico para crear nuestro favicon. Con GIMP (gratuito) o Photoshop, entre otros, podremos crear a nuestro gusto el icono. Para ello deberemos tener en cuenta la resolución (72 píxeles/pulgada), el tamaño (32×32), el modo (RGB) y profundidad del color(8, 16 0 32 bits)
Igualmente, existen herramientas para transformar tu archivo y generarlo online como, por ejemplo, Favicon.io. Puedes generar rápidamente tu favicon a partir de un texto o de una imagen de tu logotipo. Simplemente, tendrás que arrastrar y soltar tu archivo para finalmente descargarlo en el formato adecuado para favicon.
¿Cuál es el formato y tamaño adecuado?
EL formato más adecuado para nuestro favicon es el png y el svg. Éste último es un formato vectorial que comienza a utilizarse cada vez más. Las imágenes no pierden resolución y son escalables a cualquier tamaño con el archivo svg.
Para estar más seguros, puedes echar un vistazo a caniuse.com. Entras en la web y escribes la palabra favicon en la barra de búsqueda. Ahí te aparecerán los formatos compatibles para cada navegador.
En cuanto al tamaño, puedes escoger desde 16×16 píxeles hasta 128×128 o 192×192 que es la resolución recomendada por Google. Lo mejor es crear varios tamaños para que se adapte y pueda visualizarse en las distintas plataformas y dispositivos móviles.
Recomendaciones a la hora de crearlo
Lo ideal es usar un icono cuadrado en formato png que admite transparencias y no pierde calidad. Lo más habitual es utilizar el logotipo de tu web pero con dimensiones reducidas. Intenta que tu icono no tenga innumerables colores y procura no pasarte con los pequeños detalles, cuanto más sencillo sea mejor. Eso sí, deberás tener siempre presente que va a representar a tu marca con la que los usuarios te identificarán.
Motivos para añadirlo
Existen numerosos motivos por los que debes incorporar un favicon a tu web.
-Tu sitio web será fácilmente identificable cuando tengas varias pestañas abiertas en el navegador. Es decir, facilitará la navegación.
–Se mostrará en los dispositivos móviles. Desde 2019 Google está mostrando los iconos en los resultados de búsqueda móvil. Actualmente aún no se muestran en el escritorio.
– Atraerá la atención de los usuarios, motivo por el que aumentará el reconocimiento de tu marca e incluso el volumen de tráfico de tu web.
– Ayudará a mejorar la experiencia de usuario.
– Los usuarios recordarán y reconocerán fácilmente la imagen de tu marca.
– Transmite profesionalidad. Los usuarios verán que tu web ha sido diseñada cuidadosamente.
– Es importante para que tus usuarios te identifiquen. Simplemente con ver el icono lo usuarios sabrán que se trata de la web que estaban buscando.
– Fortalece la identidad de la marca a la vez que le da credibilidad a tu sitio web.
¿Dónde puedo comprobar si mi favicon es visible?
Existe una herramienta gratuita para que puedas comprobar tu favicon. Ésta te mostrará como se ve tu favicon en los distintos navegadores y dispositivos. Simplemente debes acceder a RealFaviconGenerator y escribir el nombre de tu página web.
Cuando vayas a crear tu página web o vayan a creartela, aseguráte de que cuente con un favicon con el que tus usuarios puedan identificarte. Si incorporas un favicon transmitirás que tu web ha sido diseñada cuidadosamente. Además, le dará un aspecto de profesionalidad y autenticidad a tu web. Aunque sólo sea un icono de minúsculas dimensiones merece la pena invertir tiempo en él. Recuerda que el favicon es pequeño pero matón.
¿Y tú, aún no tienes el tuyo?