Checklist de Favicon y activos PWA 2025 — Manifest, iconos y señales SEO

Publicado: 18 sept 2025 · Tiempo de lectura: 3 min · Por el equipo editorial de Unified Image Tools

Aún hoy muchos sitios presentan carencias en manifiestos e iconos. Los fallos más comunes: pocas tallas, referencias erróneas a manifiestos por locale, incoherencia de theme‑color y mezcla de rutas entre PWA y favicon. Revise en este orden para minimizar omisiones.

1) Conjunto mínimo de iconos

• 16px/32px: pestaña/marcador (acepta .ico)
• 192/512: instalación PWA (PNG recomendado)
• Para Safari pinned tab, provea un SVG monocromo
• Compruebe transparencia/márgenes en temas claro/oscuro en dispositivo real

2) Localizar manifest por locale

• En cada locale (p. ej. /es/manifest.webmanifest) traduzca name/short_name/description
• Verifique que start_url y scope apuntan a la raíz del locale (en /es no a /en)
• En el HTML de cada layout, referencie <link rel="manifest" href="/es/manifest.webmanifest">

3) Theme‑color y consistencia

• Alinear theme_color del manifest con <meta name="theme-color"> del HTML
• Revisar visibilidad en claro/oscuro (que el icono no se pierda)
• apple-touch-icon al menos 180px; revisar esquinas redondeadas

4) Señales SEO y cableado HTTP

• Evite rutas 404 de iconos (desajustes entre Dev/Prod)
• No bloquear iconos/manifests en robots.txt
• Content-Type correcto: application/manifest+json

Automatizar con herramientas

• Generación masiva de iconos: Generador de favicon
  • Crea 16/32/192/512 desde el logo fuente; previsualización de márgenes
• Ensamblar manifests por locale: Paquete de Favicon + Manifest
  • Rellena name/short_name y verifica start_url/scope

Trampas operativas

• Solo se referencia el manifest.webmanifest raíz → sin localización efectiva
• En SPA, start_url puede dar 200 pero quedar fuera del scope del Service Worker
• Orígenes distintos (staging/prod): OGP relativo → 404 (revise también sitemap)

5) Flujo de verificación antes de producción

1. Listar artefactos (/icons/ y cada manifest.webmanifest por locale)
2. Medir con Lighthouse PWA/Best Practices (detecta faltas y malas referencias)
3. En iOS/Safari, probar “Añadir a pantalla de inicio” (bordes y márgenes del apple-touch-icon)
4. En Android/Chrome, comprobar instalación (color de splash y nombre)
5. Verificar 404/Content‑Type en la pestaña Network de DevTools

6) Service Worker y caché

• En producción sí; durante desarrollo es más seguro desactivar/no registrar
• Unificar el manejo de skipWaiting (manual vs. prompt de actualización)
• Documentar limpieza de cachés antiguos (nomenclatura/versionado)

Nota: En este sitio, en desarrollo, se desregistra automáticamente el SW existente. En operación, el patrón "prompt de actualización → consentimiento del usuario" reduce riesgos.

7) Monitorización y regresiones

• Verificar en CI existencia/hash de archivos generados (faltantes/referencias obsoletas)
• Comparar diffs de campos del manifest por locale (name/short_name/description/start_url/scope)
• Vigilar bloqueos/omisiones vía robots/sitemap (Search Console/Lighthouse)

8) Preguntas frecuentes (FAQ)

• P. ¿Hacen falta otras tallas además de 16/32/192/512?
  • R. No es obligatorio, pero Windows/Android antiguos usan 48/96/144. Empiece con el mínimo y amplíe según producto.
• P. ¿Favicon en SVG?
  • R. Cada vez más soportado; mantenga PNG/ICO por compatibilidad. SVG monocromo aparte para Safari pinned tab.
• P. ¿Localización del manifest como los textos de UI?
  • R. Sí, pero los límites de longitud de name/short_name varían por plataforma; defina una política de abreviaturas.

9) Flujo práctico (E2E)

1. Acordar guías del logo fuente (márgenes, tamaño mínimo, temas claro/oscuro)
2. Generar 16/32/192/512 con Generador de favicon
3. Crear manifests por locale con Paquete de Favicon + Manifest
4. En el layout, referenciar <link rel="icon"> y <link rel="manifest"> por locale
5. Revisar visibilidad en claro/oscuro; contornear el icono si procede
6. En CI, chequear existencia/Content‑Type/enlaces; medir PWA con Lighthouse
7. Tras el release, vigilar con Search Console y logs

Convierta este orden en plantilla y adjúntelo a los PR para sostener la calidad sin dependencia de individuos.