FAVICONS: Comment s'assurer que les navigateurs ne téléchargent que la version SVG

Récemment, Šime Vidas a mis en évidence un fil Twitter discutant de Favicon HTML. Mon code FAVICON initial contenait une faute de frappe:

<link href="/favicon.ico" rel="icon" size="any"><link href="/favicon.svg" rel="icon" type="image/svg xml">

Le code correct utilise sizes au lieu de size :

<link href="/favicon.ico" rel="icon" sizes="any"><link href="/favicon.svg" rel="icon" type="image/svg xml">

Cette correction empêche Chrome de télécharger à la fois l'ICO et le SVG Favicons, garantissant que seul le SVG (le format préféré) est utilisé. Mon fichier ICO est de 5,8 Ko, représentant une enregistrement non négligeable par chargement par page.

Šime l'a mentionné dans les nouvelles de la plate-forme Web # 42, notant que si SVG Favicons est pris en charge par tous les navigateurs modernes, à l'exception de Safari, déclarant ICO et SVG nécessitent l'attribut sizes="any" sur l'ICO<link> Tag pour empêcher Chrome de prioriser l'ICO. (Voir Chrome Bug 1162276 pour plus de détails). Il a cité CSS-Tricks comme exemple de balisage optimal, bien que cela n'ait été vrai que après l'identification de l'erreur. La typo originale provient probablement d'un article précédent (maintenant corrigé), mais l'article d'Andrey reste une ressource précieuse pour la mise en œuvre pratique de Favicon.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!