Tamaños de Favicon (2025): Qué incluir + buenas prácticas

Actualizado el

Para una amplia compatibilidad, publica un ICO multi‑tamaño, un PNG Apple Touch 180×180 y un icono de máscara SVG para Safari. Usa el manifest para Android/PWA.

Por qué ICO + PNG + SVG

ICO agrupa varios bitmaps para que el navegador/SO elija el tamaño más cercano; PNG cubre touch icons y fallbacks; el icono de máscara SVG garantiza nitidez en pestañas fijadas de Safari. Juntos, ofrecen compatibilidad y calidad.

Tamaños recomendados

  • Favicon clásico: 16×16, 32×32 (ICO). Activa <em>HQ 16px</em> si tu marca tiene trazos finos.
  • Escritorio alta densidad: 48×48, 64×64 (ICO)
  • Windows/legado: 128×128, 256×256 (ICO)
  • Apple Touch: 180×180 (PNG)
  • Icono de máscara: SVG

Exportación

Usa la exportación de "paquete de favicon" en IcoSmith para obtener manifest, etiquetas y PNGs automáticamente. Ver también <a>buenas prácticas</a>.

Matices en Apple/Android

  • Apple Touch prefiere un solo PNG de 180×180; iOS aplica esquinas redondeadas.
  • Android se basa en el Web App Manifest; incluye iconos 192/512 <em>maskable</em> (purpose: any maskable).
  • Define theme-color para controlar el color de la barra de estado.

¿Por qué estos tamaños?

Las interfaces de escritorio aún muestran favicons de 16–32 px; los contextos de alta densidad se benefician de 48–64 px. Windows y algunas superficies heredadas consultan 128–256 px del ICO. Los dispositivos Apple esperan un touch icon dedicado de 180×180.

Checklist de pruebas

  • Pestañas, marcadores y barra de tareas en Chrome/Edge/Safari/Firefox.
  • Instalación en pantalla de inicio en Android/iOS usando el manifest.
  • Verifica caché (max‑age largo) y ausencia de 404 en DevTools.

Matriz de pruebas

  • Windows + Chrome/Edge: pestaña y fijación en barra de tareas.
  • macOS + Safari: pestaña y pestaña fijada (icono de máscara).
  • Android/iOS: acceso directo en pantalla de inicio (touch icon/manifest).

Todo junto (qué publicar)

  • Raíz: /favicon.ico (multi‑tamaño).
  • Head: enlaces para favicon.svg y favicon.ico; Apple Touch 180×180; manifest con PNG 192/512.
  • Pestaña fijada de Safari: safari-pinned-tab.svg + theme-color.
  • Caché: max‑age largo; versiona nombres (favicon-v2.ico) al actualizar.
Open Converter