Estándares favicon 2026
Las especificaciones de iconos web han evolucionado. Aquí tienes una guía clara para implementarlas bien.
Qué incluye el stack
Cobertura completa con el conjunto moderno de iconos, pensado para navegadores, iOS, Android y PWAs en 2026.
Favicon SVG
Formato principal: escala infinita y modo claro/oscuro mediante CSS en el propio icono.
ICO de respaldo
Un único archivo heredado (32×32 o 48×48) para navegadores antiguos y ciertos entornos de escritorio.
Apple Touch Icon
PNG 180×180 para pantallas de inicio en iPhone e iPad y Safari.
Web Manifest
JSON que define el comportamiento PWA e iconos maskable en Android.
Iconos auto-adaptativos
En un favicon SVG puedes usar consultas de medios; así tu marca sigue legible en interfaz clara u oscura sin cambios manuales por parte del usuario.
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }PWA e iconos maskable
Las PWAs modernas suelen exigir iconos maskable: el sistema puede recortarlos (círculo, squircle, etc.) manteniendo la marca dentro de la «zona segura».
Perfect Metadata aplica el relleno de zona segura al generar el paquete, para que los iconos PWA no queden recortados en Android o ChromeOS.
Implementación estándar
Pega este fragmento en el elemento head del HTML para cubrir los requisitos habituales de 2026.
<!-- Implementación en el head -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">¿Listo para implementar?
Genera todos los activos en un solo flujo: gratis y orientado a estándares 2026.