Š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
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.