Favicon

Un favicon es el icono pequeño que identifica a un sitio web en las pestañas del navegador, los marcadores, los historiales y algunos resultados de búsqueda. El nombre viene de "favorites icon", el término que Internet Explorer usaba para los marcadores.

Los navegadores solían pedir un archivo llamado favicon.ico desde la raíz del sitio. El formato ICO puede contener varios tamaños en un solo archivo, como 16×16, 32×32 y 48×48 píxeles. El HTML actual declara los iconos con un elemento link cuyo atributo rel es icon, y el archivo puede ser PNG o SVG además de ICO.

Los dispositivos Apple usan un icono táctil independiente para los accesos directos en la pantalla de inicio, normalmente un PNG de 180×180. Las apps web instalables listan iconos más grandes, a menudo de 192×192 y 512×512, en un manifiesto de aplicación web.

Formatos y tamaños de favicon

Archivo	Formato	Tamaños habituales
favicon.ico	ICO	16, 32, 48 px en un solo archivo
Enlace de icono	PNG o SVG	PNG de 32×32, o un SVG escalable
Icono táctil de Apple	PNG	180×180
Iconos del manifiesto	PNG	192×192, 512×512

Dónde aparecen los favicons

• Pestañas del navegador y barra de direcciones.
• Marcadores, listas de lectura e historial.
• Accesos directos en la pantalla de inicio de teléfonos y tabletas.
• Resultados de búsqueda y vistas previas de enlaces en algunos servicios.

Cómo crear un favicon

1. Parte de una marca cuadrada del logotipo, no del texto completo.
2. Simplifícala para que se lea a 16×16 píxeles.
3. Exporta los tamaños PNG, un SVG opcional y un archivo ICO.
4. Añade los elementos link al encabezado de la página y prueba en varios navegadores.

En un flujo de publicación real

Un favicon que falta aparece como un icono genérico en las capturas de pestañas y en la documentación. Antes de capturar ventanas de navegador para una guía o una publicación de lanzamiento, confirma que el favicon se carga. Los navegadores guardan los favicons en caché con insistencia, así que un icono antiguo puede seguir visible después de una actualización.

Errores comunes

• Usar un logotipo con demasiado detalle, que se convierte en una mancha a 16 píxeles.
• Olvidar el icono táctil de Apple, de modo que los teléfonos muestran una captura de la página.
• Servir un icono transparente que desaparece con los temas oscuros del navegador.
• Probar solo en un navegador.

¿Necesitas corregir una imagen ahora?

Convierte un logotipo entre PNG, JPG y WebP con Image Converter y comprueba su tamaño en píxeles con Screenshot Resolution Checker.

Preguntas frecuentes

¿Sigue haciendo falta favicon.ico?

Muchos sitios lo siguen incluyendo porque algunas herramientas lo piden desde la raíz del sitio. Un enlace de icono PNG o SVG cubre los navegadores actuales.

¿Un favicon puede ser animado?

Algunos navegadores muestran favicons GIF animados, pero el soporte varía. Un icono estático es la opción fiable.

Fuentes

• Favicon (Wikipedia)
• HTML Living Standard: links

Recursos relacionados

• Open Graph image: la imagen de vista previa más grande para enlaces compartidos.
• Image Compressor: reduce el tamaño del archivo de un icono.