El favicon es la única imagen que su sitio muestra en un lugar que no controla: pestañas del navegador, barras de marcadores y listas del historial, cada una con su propio color de fondo. Un favicon SVG puede responder a ese fondo en lugar de luchar contra él.
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
<link rel="icon" href="/favicon.ico" sizes="any"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<style>
circle { fill: #111111; text { fill: #ffffff; } }
@media (prefers-color-scheme: dark) {
circle { fill: #ffffff; }
text { fill: #111111; }
}
</style>
<circle cx="32" cy="32" r="30"/>
<text x="32" y="42" text-anchor="middle"
font-family="Georgia" font-size="30">T</text>
</svg>Por qué esto funciona y qué respetar
- El bloque de estilo dentro del SVG es una hoja de estilo real, por lo que la consulta de medios de esquema de color preferido funciona exactamente como en una página.
- Escalas de formas vectoriales: un archivo sirve para una pestaña de 16 píxeles, un marcador de 32 píxeles y una pantalla de inicio del teléfono de 180 píxeles sin una imagen por paso.
- Las alternativas PNG e ICO en la lista de enlaces manejan navegadores y contextos que ignoran SVG; el orden allí tiene la última palabra en cuanto a soporte heredado.
- Mantenga el contraste del ícono verificado con los colores de ambas pestañas, claro y oscuro; un trazo de marca neutral suele ser mejor que un relleno completo.
La lista de verificación honesta
- Dibuja 64 por 64 con el glifo correctamente centrado; prueba a los 16 antes de celebrar, las pestañas son el apetito que debe sobrevivir.
- Incruste las consultas de medios, no incluya CSS externo en el archivo de ícono; debe cargarse de forma independiente.
- Mantenga la máscara heredada y los pasos alternativos de PNG en su paso de compilación para que cada versión actualice los tres archivos juntos.
- Verifique en un navegador con muestras de color de pestañas: una pestaña clara y otra oscura, además del propio gris de la barra de marcadores.
El resumen genial: el favicon pasó de ser un buque insignia de trama para cada versión del navegador a un SVG responsivo y una nota heredada. Una línea de atención en modo oscuro que la mayoría de los sitios omiten.