Favicons: Cómo asegurarse de que los navegadores solo descarguen la versión SVG | Programar Plus

Šime Vidas me envió un DM el otro día sobre este hilo de subzey en Twitter. Mi HTML para favicons era así:

<!-- Warning! Typo! -->
<link rel="icon" href="https://css-tricks.com/favicon.ico" size="any">
<link rel="icon" href="https://css-tricks.com/favicon.svg" type="image/svg+xml">

El atributo size hay un error tipográfico allí, y debería ser sizes. Como esto:

<!-- Correct -->
<link rel="icon" href="https://css-tricks.com/favicon.ico" >
<link rel="icon" href="https://css-tricks.com/favicon.svg" type="image/svg+xml">

Y con eso, Chrome ya no descargado doble ambos íconos, y en su lugar usa el SVG solo (como debería). Solo algo a tener en cuenta. Mi archivo ICO es de 5.8kb, por lo que ahora son 5.8kb guardados en cada carga de página sin caché, lo que no me parece trivial.

Šime señaló esto en Web Platform News # 42:

Los favicons SVG son soportado en todos los navegadores modernos excepto Safari. Si su sitio web declara un ICO (respaldo) y un ícono SVG, asegúrese de añade el tamaños = cualquiera atribuir a la ICO a evitar Chrome de descargar y usar el ícono ICO en lugar del ícono SVG (ver Error de Chrome 1162276 para más información). Programar Plus es un ejemplo de un sitio web que tiene la marcado de icono óptimo en su (tres elementos, uno para favicon.ico, favicon.svg y apple-touch-icon.png).

Esa nota sobre Programar Pluses un poco generosa en el sentido de que solo es correcta porque se señaló mi incorrección con anticipación. Creo que la raíz de mi error tipográfico fue el artículo de Andrey, pero eso es ha sido arreglado. El artículo de Andrey sigue siendo probablemente la mejor referencia para el marcado de favicon más práctico.

(Visited 16 times, 1 visits today)