Qué es un favicon y cuál es su función

Es posible que alguna vez hayas escuchado el término favicon, sobre todo si estás relacionado o interesado por el diseño web, o dispones de tu propio sitio web o e-commerce.

Este pequeño elemento es el encargado de mostrar un icono con el logotipo característico de la web para que sea más sencillo identificarla. El favicon personalizado añade mayor presencia a un sitio web, proyectando una mejor imagen relacionada con profesionalidad y seriedad.

A continuación, veremos qué es favicon, cómo se crea y añade a un sitio web, y qué beneficios aporta.

 

Qué es un favicon

Un favicon es un pequeño icono de un sitio web que se muestra en las pestañas y en la lista de favoritos del navegador web. Cuando se abren distintas páginas utilizando las pestañas de un navegador web se puede observar como delante del título de cada una de ellas se muestra un pequeño icono con un logo, el favicon.

El favicon no siempre coincide con el logotipo de un sitio web o empresa, principalmente porque el tamaño disponible para crearlo es muy reducido. Lo habitual es que se realice un diseño similar al logotipo, pero adaptado a la resolución 32 x 32 del favicon, o al menos utilizar los mismos colores y tipografía que el logo.

Cómo añadir un favicon a tu sitio web

El favicon es muy sencillo de añadir desde las opciones de personalización de WordPress y otros CMS como PrestaShop o Drupal. Para asignar un favicon HTML a un sitio web hay que añadir esta línea en la página principal del sitio:

link type=”image/x-icon” href=”nomre_favicon.ico” rel=”shortcut icon”/

El archivo de imagen en formato .png o formato .ico debe subirse a la carpeta public_html del servidor web donde se aloja el sitio.

 

Cómo crear un favicon para tu web

Crear un favicon y añadirlo a una página web es un proceso sencillo que se puede realizar de diferentes maneras:

Utilizar una herramienta de diseño gráfico

Para poder crear un favicon personalizado y de calidad para un sitio web se puede utilizar una herramienta de diseño gráfico como puede ser Photoshop, o con aplicaciones gratuitas de diseño como Gimp o Paint.net.

Para crear un favicon de esta forma manual es necesario tener en cuenta dos factores principales:

  • Las dimensiones del favicon deben ser de 32 x 32 píxeles.
  • El formato habitual de los archivos favicon es el .ico (de icono), aunque también se puede utilizar el formato comprimido con transparencia .png.

Utilizar un portal online

Existen en internet diferentes plataformas online donde es posible crear un favicon para un sitio web. Estos sitios web están especialmente diseñados para la creación de estos iconos, permitiendo subir imágenes para convertirlas en iconos favicon, pasar directamente de emoticonos a favicon, o generar directamente un nuevo favicon a través de distintos pasos y opciones.

Algunos ejemplos de estos sitios para crear un favicon son favicon.io o X-Icon Editor.

Utilizar un plugin de WordPress

Para los que utilizan el CMS WordPress es muy sencillo crear un favicon y asignarlo automáticamente al sitio web utilizando un plugin específico.

Esta es sin duda la mejor opción para aquellos que no tienen conocimientos avanzados en diseño gráfico y que no quieren estar añadiendo código HTML de forma manual a su sitio web.

Es importante saber que, si en un sitio WordPress no se añade un favicon personalizado, el sitio mostrará el favicon de WordPress por defecto, lo que no ayuda en cuanto a diferenciación, identificación e imagen corporativa.

 

Ventajas de usar un favicon

Muchos sitios web no dan importancia al uso del favicon cuando se trata de un elemento que aporta numerosas ventajas:

  • Permite a los usuarios identificar el sitio web cuando centra su atención en la zona de la barra de direcciones de su navegador web.
  • Facilita la identificación del sitio web cuando el usuario tiene abiertas muchas pestañas en su navegador web, al diferenciarse del resto.
  • Facilita a los usuarios encontrar el sitio web cuando lo guardan entre sus favoritos.
  • Proyectar una mejor imagen de marca, añadiendo autenticidad, personalidad y profesionalidad al sitio web.
  • Añadir un elemento importante dentro del branding (identificación y diferenciación con la competencia).
  • Mejorar la experiencia de usuario.

 

Un favicon ico es un pequeño elemento gráfico que muestra un logo representativo de la empresa, o sitio web, y que tiene gran utilidad para mejorar la experiencia de usuario. Se trata de un elemento identificativo y diferenciador muy interesante que todo sitio web debería utilizar.

Es importante incluir en tu página web, tienda online o blog un favicon, ya que tendrá mayor presencia y será localizado de forma más sencilla por los usuarios cuando abren una gran cantidad de pestañas en sus navegadores.

El proceso de creación e implementación de un favicon es muy sencillo y puede ser realizado en muy poco tiempo, sin tener que disponer de conocimiento avanzado en diseño gráfico o programación web.

×