Qué es un favicon y por qué es importante para tu sitio web

Todos los elementos visuales de un sitio web aportan valor: desde las tipografías hasta las imágenes o iconos. Quizás nunca hayan escuchado el término favicon, pero seguro que lo han visto… y nuestra labor va a ser la de contarles qué es el favicon de una web, qué labor cumple y cómo personalizar el de su propio sitio.

Una pista: aunque no tengan claro su nombre o su función, su cerebro y el de sus usuarios ya lo distinguen cuando navegan entre muchas pestañas. ¡Ha llegado la hora de que tengan claro qué es ese detalle tan discreto pero fundamental en la experiencia de usuario y el branding digital!

¿Qué es un favicon y qué función cumple?

Un favicon es un pequeño icono gráfico que se asocia a un sitio web con el objetivo de identiﬁcarlo a nivel visual en diferentes espacios del navegador. Así, el favicon actúa como un marcador visual en la pestaña del navegador, junto al nombre del sitio en los marcadores, en el historial e incluso en los resultados de búsqueda.

Su principal función es la de ayudar al usuario a identificar rápidamente el sitio cuando tiene muchas pestañas abiertas o busca algo guardado, lo que facilita la navegación y mejora la experiencia su experiencia, posicionando la web en un buen lugar dentro de su imaginario.

Además, aunque el favicon no influye directamente en el SEO, favorece señales indirectas que sí importan: incrementa la facilidad para que un usuario guarde páginas como favoritas, mejora el tiempo de permanencia en ellas y refuerza la interacción, lo que al mismo tiempo contribuye al mejor posicionamiento posible.

¿Por qué deberías tener un favicon en tu sitio web?

Aunque pueda parecer que no, los favicons son mucho más que meros adornos. ¡Sigan leyendo para descubrir las principales ventajas de contar con uno bien trabajado!

Facilita un reconocimiento de marca instantáneo, pues funciona como su logo en miniatura en un mar de pestañas y bookmarks, ayudando a que los usuarios les reconozcan sin necesidad de leer texto alguno.
Mejora la experiencia de usuario, pues facilita la localización de su sitio entre muchas pestañas, ahorrando tiempo y reduciendo sus niveles de frustración.
Refleja profesionalismo y credibilidad, ya que un sitio sin favicon puede parecer incompleto o menos fiable.
Impulsa el SEO de forma indirecta, ya que mejora métricas como el tiempo de estancia en la página o las páginas guardadas en favoritos, señales que Google detecta como positivas a la hora de dar visibilidad a los proyectos en línea.
Aumentan la visibilidad en móviles y PWA, ya que aparecen como iconos en la pantalla de inicio en móviles o como iconos de apps web progresivas, reforzando la presencia en línea de la marca.
Otorgan un mayor CTR en los resultados de búsqueda, ya que aparecen junto a tu sitio en los resultados de Google, ayudando a captar más clics.

Como ven, el favicon ayuda a optimizar la presentación de tu página web, ¡y eso que siempre les habrá parecido un pequeño icono sin demasiado que ofrecer!

Cómo crear e instalar un favicon paso a paso

Crear e instalar un favicon es muy sencillo si siguen los pasos correctos, ¡por eso hemos elaborado para ustedes una breve guía que les ayudará en el proceso!

Diseñar el favicon creando una imagen cuadrada con alto contraste usando para ello herramientas vectoriales como Illustrator o Figma, o bien generadores en línea gratuitos como RedKetchup o Favicon Generator.
Convertirlo al formato adecuado exportando la imagen en formato ICO para disfrutar de una compatibilidad total, o en PNG o SVG como versiones complementarias.
Guardar el archivo como favicon.ico (o favicon-32x32.png, etc.) y subirlo a la raíz de su servidor (/) o a una carpeta ‘images/’.
Tienen varias formas de insertar el favicon en su sitio, entre ellas usando nuestro Creador de Páginas Web o añadiendo la etiqueta en su HTML, escribiendo lo siguiente en el <head> de su página:

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

Limpiar la caché y comprobar que el favicon aparece en la pestaña, los marcadores y el historial, así como en diferentes dispositivos y distintos sistemas operativos.

Con esto se asegurarán de crear un buen favicon y de que se vea bien en cualquier entorno, ¡así de sencillo!

Tamaños, formatos y buenas prácticas para favicons

Trabajar bien los favicons implica conocer tamaños, formatos y unos cuantos consejos que les harán la vida mucho más sencilla. ¡Aquí tienen lo básico para hacer su trabajo más fácil!

16 × 16 px: Tamaño estándar para pestañas y barras de direcciones.
32 × 32 px: Perfecto para pantallas retina y ventanas contextuales.
48 × 48 px y 96 × 96 px: Usados en menús contextuales y pantallas de inicio Android.
180 × 180 px: Icono para iOS (apple-touch-icon).
192 × 192 px: Recomendación de Google para Android Web App.

En cuanto a los formatos recomendados, aunque ya los hemos mencionado, azquí tienen algo más sobre ellos:

.ico: Obligatorio para compatibilidad con navegadores antiguos.
.png: Garantiza calidad y transparencia, lo que hace que sea muy utilizado en navegadores modernos.
.svg: Escalable, excelente en vector y muy recomendable como fallback moderno.

Además, aquí tienen algunos tips que les vendrán de maravilla a la hora de crear sus propios favicons:

Utilizar gráficos vectoriales para mantener la máxima calidad al redimensionar.
Cargar una única versión de 32 × 32 px en el .ico si quieren mantenerlo simple, los navegadores adaptan a 16 × 16 px.
Incluir versiones con atributos ‘sizes="..."’ para controlar la carga eficiente de archivos.
Mantener el icono limpio y con un contraste elevado, pues los detalles pequeños no se verán bien en escalas reducidas.

Cómo agregar un favicon en HTML y CMS como Blogger

Agregar un favicon a su sitio es un proceso sencillo que mejora su percepción y su usabilidad. Si siguen los pasos que les mostramos a continuación, podrán implementarlo en apenas unos minutos tanto en HTML puro como en Blogger aunque no dispongan de conocimientos técnicos avanzados.

En un proyecto HTML estándar, tras diseñar su favicon y colocarlo en la carpeta raíz, solo tendrán que añadir las siguientes líneas en el <head> de su HTML:

Después, bastará con que guarden los cambios y recarguen la página para confirmar que que el favicon aparece junto al título de la pestaña.

En Blogger, accedan al panel de control y vayan a ‘Settings’, de ahí a ‘Basic’ y finalmente hagan clic sobre la opción ‘Favicon’. Después, presionen sobre ‘Choose file’ y seleccionen su archivo de favicon. Tras esto, solo tendrán que guardar la configuración y aguardar unos minutos o recargar en modo incógnito.

Ahora que saben qué es un favicon en HTML y en Blogger y cómo hace que funcione en estos sistemas, elijan el método que elijan, lo tendrán funcionando rápidamente tanto en páginas estáticas como en blogs. ¡Aunque si de verdad quieren asegurarse una buena velocidad de carga, necesitarán un alojamiento web de calidad para sus proyectos en línea!