Checklist de Favicon: Guía Definitiva (2025)

Actualizado el

Un favicon profesional no es solo subir favicon.ico. Para consistencia de marca y cobertura total en navegadores y plataformas, publica ICO + PNG + SVG y usa el snippet correcto en <head>. Esta lista práctica muestra exactamente qué publicar, las etiquetas correctas y cómo validarlo.

1. Esencial: favicon.ico

Aunque sea legado, favicon.ico es el archivo clave que garantiza compatibilidad universal: funciona en UAs antiguas y rastreadores que no renderizan HTML completo.

  • Acción: Genera un .ico <em>multi‑tamaño</em> (p. ej., 16, 32, 48, 64, 128, 256). 16/32/48 cubren la mayoría; 64/128/256 ayudan en superficies grandes.
  • Consejo: Mantén alto contraste y formas simples para nitidez a 16 px. Si tu marca tiene trazos finos, prueba el perfil <em>Nítido</em> en IcoSmith.
  • Implementación: Publícalo en /favicon.ico y referencia en <head>:
<link rel="icon" href="/favicon.ico" sizes="any">

2. Dispositivos Apple: apple-touch-icon.png

Cuando el usuario guarda tu sitio en la pantalla de inicio, iOS espera un Apple Touch Icon dedicado. Sin él, iOS usa una captura de pantalla (se ve poco profesional).
  • Acción: Exporta un PNG 180×180 (sin esquinas — iOS las aplica).
  • Buenas prácticas: Deja margen de respiro y alto contraste; evita texto diminuto.
  • Implementación:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

3. Pestaña fijada de Safari: SVG monocromático

Safari (macOS) usa un SVG monocromático para pestañas fijadas y aplica el color que declares.
  • Acción: Prepara un SVG solo en negro (sin rellenos complejos).
  • Color: Elige uno que contraste en oscuro/claro y combine con tu marca.
  • Implementación:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#FFB020">
<meta name="theme-color" content="#0B0E14">

4. Android/PWA: site.webmanifest

Los navegadores modernos y Android dependen del Web App Manifest para instalar en la pantalla de inicio. Define nombre, colores e iconos.
  • Acción: Referencia al menos 192×192 y 512×512 PNG (ideal con <em>purpose</em>: <em>any maskable</em>).
  • Tips: Ajusta theme_color/background_color para que coincida con tu tema.
  • Implementación:
<link rel="manifest" href="/site.webmanifest">

5. Pruebas y validación

Tras añadir las etiquetas, confirma que todo resuelva (sin 404) y que no haya caché obsoleto.
  • Caché: Recarga forzada (Ctrl/Cmd+Shift+R) o incógnito.
  • DevTools: Application → Icons/Manifest para verificar detecciones y MIME.
  • Checklist: Ejecuta Lighthouse (PWA); valida manifest e iconos en iOS/Android.

6. Caché y versionado (opcional)

Los navegadores/CDNs cachean favicons de forma agresiva. Considera <em>versionar</em> archivos (p. ej., /favicon-v2.ico) y purgar el CDN (Pages/CDN). Actualiza los enlaces del <head> a los nuevos nombres para forzar la revalidación.

Ship ICO + PNG + SVG, declare the correct snippet, and validate cache/paths — that covers virtually every scenario. For the full HTML snippet, see How to add a favicon to HTML, and for format decisions, see ICO vs PNG vs SVG.

Open Converter