Favicon SVG con respaldo PNG: Guía HTML

Subiste un favicon SVG nítido, abriste Safari y viste un PNG diminuto y borroso en su lugar. Eso se debe a que no todos los navegadores leen favicons SVG todavía. La solución es un marcado híbrido: SVG primero y PNG detrás para motores más antiguos. Esta guía explica el patrón HTML exacto, los tamaños de archivo adecuados y los errores que hacen que el fallback falle silenciosamente.

¿Por qué SVG con fallback PNG?

El estándar HTML vivo permite declarar múltiples etiquetas <link rel='icon'> apuntando a diferentes formatos. Según la especificación WHATWG HTML para rel='icon', los navegadores escanean la lista y eligen la última etiqueta que reconocen. Ese orden es el truco: coloca el SVG al final para que los navegadores modernos lo prefieran, y el PNG antes para que los motores heredados recurran a él sin problemas.

Este patrón es importante porque algunos renderizadores (versiones antiguas de Safari, webviews integradas, navegadores móviles de nicho) aún ignoran el SVG por completo. Sin un PNG detrás, tus visitantes verán una pestaña en blanco.

Requisitos previos

Un favicon SVG (idealmente de menos de 2KB, con un viewBox cuadrado).
Uno o más fallbacks PNG: 32x32 para pestañas estándar, 16x16 para contextos estrechos. Añade 180x180 si no incluyes un Apple Touch Icon.
Acceso de edición al bloque <head> de tu sitio.

¿Necesitas una exportación SVG limpia? Consulta la guía de diseño de favicons SVG para lo básico. También puedes omitir el trabajo manual con un generador de paquetes de favicons que produce el conjunto completo con un clic.

Paso a paso: Construye la pila SVG + PNG

Paso 1: Exporta un SVG ligero

Guarda tu obra como un SVG cuadrado con viewBox='0 0 100 100'. Elimina metadatos del editor, capas ocultas y fallbacks rasterizados incrustados; van en contra del propósito. Un SVG de 1KB supera a un PNG de 15KB en claridad de pestaña.

Paso 2: Genera los fallbacks PNG

Exporta la misma obra a 32x32 y 16x16. Si tu logotipo usa transparencia, verifica que el PNG realmente conserve el canal alfa; algunos exportadores lo eliminan silenciosamente. Guárdalos como favicon-32x32.png y favicon-16x16.png.

Paso 3: Añade las etiquetas link en el orden correcto

Coloca estas etiquetas dentro de tu <head>, antes de cualquier sugerencia de preconnect o preload. El orden es crítico:

&lt;link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'&gt;
&lt;link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/favicon.svg'&gt;

Los navegadores iteran de arriba a abajo y usan la última coincidencia válida que soporten. Al poner el SVG al final, Chrome, Firefox y Safari lo eligen; los renderizadores antiguos se detienen en el PNG.

Paso 4: Mantén un ICO para navegadores realmente heredados

Si tu audiencia aún incluye IE11 o versiones muy antiguas de Edge, añade un ICO al principio:

&lt;link rel='icon' type='image/x-icon' href='/favicon.ico'&gt;
&lt;link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/favicon.svg'&gt;

Los motores modernos ignoran el ICO y saltan directamente al SVG. Los navegadores heredados que no entienden SVG o PNGs con type aún obtienen algo.

Paso 5: Añade variantes de modo oscuro (opcional)

SVG te permite enviar un archivo por tema usando el atributo media:

&lt;link rel='icon' type='image/svg+xml' href='/favicon-light.svg' media='(prefers-color-scheme: light)'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/favicon-dark.svg' media='(prefers-color-scheme: dark)'&gt;
&lt;link rel='icon' type='image/png' href='/favicon-32x32.png'&gt;

El PNG final garantiza que los navegadores sin conciencia de tema vean algo en lugar de un cuadrado en blanco. También puedes incrustar prefers-color-scheme directamente dentro de un solo SVG usando un bloque <style>; es un enfoque más avanzado, pero mantiene el marcado del head limpio.

Paso 6: Verifica la pila

Abre DevTools, ve al panel de Red y recarga. Deberías ver cada icono declarado solicitado una vez. Si solo carga el PNG, tu ruta SVG es incorrecta o el archivo no es XML válido. Si Safari ignora tu PNG, el servidor probablemente lo está sirviendo con un tipo MIME incorrecto; fuerza image/png en la configuración de tu servidor en lugar de depender de la auto-detección. Puedes confirmar el MIME servido pasando el cursor sobre la solicitud en el panel de Red.

Errores comunes

Orden incorrecto. El SVG debe ir al final. Los navegadores escanean de arriba a abajo y se detienen en el primer formato que su motor soporta.
Falta el atributo type. Sin type='image/svg+xml', algunos navegadores tratan el archivo como un recurso genérico y lo omiten.
PNG con fondo blanco. En temas oscuros del navegador, un PNG de cuadrado blanco resalta. Usa transparencia o combina con el fondo de tu sitio.
Caché. Después de implementar, los navegadores a menudo sirven un favicon obsoleto durante días. Añade una consulta de versión como ?v=2 al PNG para forzar una actualización.
Errores XML. Los navegadores ignoran contenido SVG con errores de análisis silenciosamente. Ejecuta tu archivo a través de un validador XML antes de implementar.
Webviews integradas. Algunas webviews integradas ignoran las etiquetas <link> por completo y solo respetan un /favicon.ico literal en la raíz.

Conclusión

El patrón de fallback SVG + PNG es el compromiso práctico: iconos nítidos y escalables donde se soportan, iconos rasterizados confiables en cualquier otro lugar. Tres archivos, un bloque <head>, sin necesidad de JavaScript. Acierta con el orden, valida tus tipos MIME y prueba en Chrome, Firefox y Safari antes de publicar. Tu presencia en la pestaña dejará de ser un juego de adivinanzas.

¿Necesitas los archivos pre-construidos? Mzu favicondl exporta un paquete completo de SVG + PNG multi-tamaño + ICO desde una sola carga, listo para integrar en cualquier proyecto.