El favicon es la pequeña imagen que aparece en la pestaña del navegador, los favoritos y algunos accesos directos del sistema. Aunque es pequeño, mejora el reconocimiento de la marca y ayuda a encontrar una página entre muchas pestañas.
Un favicon confiable no debe depender de un solo archivo. Un conjunto completo combina un ICO con varias resoluciones, PNG nítidos y un icono táctil más grande para móviles.
Empieza con una imagen simple y legible
Usa una composición cuadrada, buen contraste y pocos detalles. Las líneas finas, sombras suaves y textos largos desaparecen a 16 × 16 píxeles. El símbolo principal debe ocupar gran parte del área sin quedar cortado.
Cuando sea posible, utiliza una versión simplificada de la marca o un monograma de una o dos letras.
- Trabaja con una fuente de al menos 512 × 512 píxeles.
- Prefiere transparencia si el símbolo funciona en temas claros y oscuros.
- Revisa el resultado en 16, 32 y 48 píxeles.
Genera los formatos y tamaños esenciales
favicon.ico debe contener varias resoluciones internas. Este proyecto exporta 16, 32, 48, 64, 128 y 256 píxeles. También conviene publicar PNG de 16 y 32 píxeles y un Apple Touch Icon de 180 píxeles.
SVG puede usarse en navegadores modernos, pero ICO sigue siendo un respaldo práctico. Evita animaciones en el favicon principal.
Añade las referencias al HTML
Coloca las etiquetas dentro de <head> y usa rutas desde la raíz para que funcionen en páginas internas.
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Controla la caché del navegador
Después de publicar, realiza una recarga forzada, abre una ventana privada y prueba otro dispositivo. Durante el desarrollo puedes usar temporalmente /favicon.ico?v=2.
En producción, mantén nombres estables y encabezados de caché coherentes. Cambiar el favicon con frecuencia rara vez aporta valor.
Valida la implementación final
Abre cada archivo directamente y confirma el tipo de contenido. Comprueba la pestaña, los favoritos y un acceso directo en la pantalla de inicio. Verifica también el modo oscuro.
- Ninguna solicitud devuelve 404.
- El ICO contiene varias resoluciones.
- Las etiquetas aparecen en el HTML renderizado.
- El símbolo sigue claro a 16 × 16 píxeles.