¿Qué es un favicon?
Una guía para entender qué es un favicon, para qué sirve y cómo refuerza la marca y la experiencia de quien visita tu sitio. También verás cómo crear uno para tu web.
Definición de favicon
Un favicon, abreviatura de «favorite icon» (icono favorito), es un icono o imagen pequeña que representa un sitio o una página web. Aparece en varios sitios del navegador y del dispositivo: sobre todo en la pestaña, junto al título; también en los marcadores, el historial y la pantalla de inicio del móvil cuando se guarda un acceso directo.
Suelen ser imágenes cuadradas de 16x16, 32x32 o 48x48 píxeles, aunque las implementaciones actuales admiten tamaños mayores, hasta 512x512 píxeles, para pantallas de alta resolución y dispositivos móviles.
Dónde aparecen los favicons
Los favicons se muestran en varios sitios para que se identifique y se encuentre tu web con facilidad:
- Pestañas del navegador: El lugar más visible: junto al título de la página, en la pestaña del navegador
- Marcadores: Junto al nombre del marcador en la lista de marcadores
- Historial: En el menú de historial del navegador
- Barra de direcciones: Algunos navegadores lo muestran en la barra de direcciones
- Pantalla de inicio del móvil: Si alguien añade tu web a la pantalla de inicio, el favicon hace de icono de la app
- Resultados de búsqueda: Algunos buscadores lo muestran junto a los resultados
Ejemplo: favicons en pestañas y marcadores
Por qué importan los favicons
El favicon influye de forma clara en la marca del sitio y en cómo se navega:
Reconocimiento de marca
Un favicon bien diseñado ayuda a reconocer tu web entre muchas pestañas abiertas. Refuerza la identidad de marca y hace el sitio más memorable.
Aspecto profesional
Un favicon propio da un aspecto cuidado. Sin él, el navegador muestra un icono genérico y el sitio puede parecer incompleto o poco profesional.
Experiencia de uso
Facilita encontrar tu web en marcadores, historial y pestañas abiertas. Importa sobre todo si se visita con frecuencia.
Experiencia en el móvil
En el móvil, el favicon hace de icono de app cuando se añade el sitio a la pantalla de inicio. Uno claro y reconocible mejora esa experiencia.
Formatos y tamaños de favicon
Un sitio actual debería ofrecer el favicon en varios formatos y tamaños para que funcione en todos los navegadores y dispositivos:
Formato ICO
El formato clásico favicon.ico, normalmente de 16x16 o 32x32 píxeles. Es el más compatible y funciona en todos los navegadores.
Formato PNG
Los favicons PNG se usan en muchos tamaños: 16x16, 32x32, 48x48, 96x96, 180x180, 192x192 y 512x512 píxeles. Ofrecen mejor calidad y transparencia que el ICO.
Formato SVG
Los favicons SVG (Scalable Vector Graphics) no dependen de la resolución y se ven nítidos a cualquier tamaño. Los navegadores modernos los admiten, así que encajan bien en pantallas de alta densidad.
Apple Touch Icon
Los dispositivos Apple usan apple-touch-icon.png, normalmente de 180x180 píxeles, como icono de la pantalla de inicio. Así el sitio se ve bien al guardarlo en iOS.
Ejemplos de tamaños
16×16
32×32
48×48
96×96Ejemplo: el mismo favicon a distintos tamaños
Buenas prácticas de diseño
Al crear un favicon, conviene tener presentes estos principios:
- Simplicidad: El favicon es pequeño, así que funciona mejor un diseño sencillo. Evita detalles finos que desaparecen a tamaños reducidos
- Contraste alto: Usa colores con buen contraste para que se distinga sobre fondos distintos del navegador
- Coherencia de marca: Debería reflejar tu identidad y reconocerse como parte del diseño general
- Escalabilidad: Diseña para que funcione bien de 16x16 a 512x512 píxeles
- Pruebas: Pruébalo en varios navegadores y dispositivos para comprobar que se muestra bien
Buenos ejemplos: favicons sencillos y con alto contraste
Evitar: diseños demasiado complejos o con poco contraste
Cómo crear un favicon
Crear un favicon es más fácil que nunca con las herramientas actuales. Tanto si partes de cero como de un diseño existente, puedes:
Usar un generador en línea
Herramientas como logo87.com te permiten crearlo en unos minutos. Escribes el texto, eliges colores y fuentes y descargas un paquete con todos los tamaños y formatos necesarios. Es la vía más sencilla si no tienes experiencia de diseño.
Convertir a partir de una imagen
Si ya tienes un logotipo o una imagen, puedes usar herramientas como nuestro SVG a PNG para generar el favicon a partir de ese diseño, en los formatos y tamaños que encajen con tu marca.
Diseñar desde cero
Quien diseña de forma profesional puede crearlo con software gráfico y afinar cada tamaño al píxel. Así tienes control total cuando partes de cero.
Conclusión
El favicon es un detalle pequeño, pero forma parte de la identidad del sitio. Ayuda a reconocerlo, refuerza la marca y mejora la experiencia de uso. Al ofrecerlo en varios formatos y tamaños, el sitio se ve profesional y funciona bien en cualquier navegador y dispositivo.
Lo hagas con un generador en línea, a partir de una imagen o desde cero, tomarte el tiempo de dejarlo bien es una inversión en la imagen y el uso del sitio. Saber cómo hacerlo ayuda a construir una marca más sólida en internet.