SVG Favicon ne fonctionne pas
J'essaie d'obtenir un favicon SVG sur mon site, mais quoi que je fasse, il ne veut tout simplement pas fonctionner.
Le code suivant est enregistré en tant que fichier .svg à mon emplacement habituel de favicon, mais lorsque je change le chemin d'accès au favicon pour qu'il soit .svg au lieu de .ico, rien ne se charge.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.5 283.4" style="enable-background:new 0 0 384.5 283.4;" xml:space="preserve" width="100%" height="100%">
<style type="text/css">
.shape1 {fill: #DB6B2A;}
.shape2 {fill: #AE1A31;}
</style>
<path class="shape1" d="M384.5,83.7c-4.6-19.3-14.3-36.3-29.3-51.3C333.4,10.6,307.6,0,276.7,0c-30.9,0-56.7,10.6-78.4,32.4
l-4.6,5.1l-4.5-5.1C167.4,10.6,141.6,0,110.8,0S54.1,10.6,32.4,32.4C10.6,54.1,0,79.9,0,110.8v61.1l55.1-12.8v-48.4
c0-15.2,5.6-28.3,16.2-39C82,60.7,95.1,55.1,110.8,55.1c30.4,0,55.1,25.3,55.1,55.6v22.9l55.6-12.7v-10.1c0-2.5,0-4.6-0.5-7.1
c1.5-12.1,7.1-22.8,16.2-31.9c10.6-11.1,23.8-16.7,39.5-16.7c25.4,0,46.9,17.2,53.3,40.7"/>
<path class="shape2" d="M54.5,187.6c6.4,23.5,27.9,40.7,53.3,40.7c15.7,0,28.8-5.6,39.5-16.7c9.1-9.1,14.7-19.7,16.2-31.9
c-0.5-2.5-0.5-4.6-0.5-7.1v-10.1l55.6-12.7v22.9c0,30.4,24.8,55.6,55.1,55.6c15.7,0,28.8-5.6,39.5-16.7
c10.6-10.6,16.2-23.8,16.2-38.9v-48.4l55.1-12.7v61.1c0,30.9-10.6,56.7-32.4,78.4c-21.7,21.7-47.5,32.4-78.4,32.4
c-30.9,0-56.7-10.6-78.4-32.4l-4.6-5.1l-4.6,5.1c-21.7,21.7-47.6,32.4-78.4,32.4s-56.7-10.6-78.4-32.4C14.3,236,4.6,219,0,199.7"/>
</svg>
C'est le code que j'utilise pour définir le favicon;
<link rel="icon" href="http://www.MYSITE.co.uk/favicon.svg?v=4">
Je ne peux pas déterminer s'il y a un problème avec mon code .svg ou s'il me manque quelque chose . Merci
Les favicons SVG sont pris en charge pour Firefox, Safari et maintenant Edge, mais Chrome reste inactif: https://caniuse.com/#feat=link-icon-svg
Vous voudrez peut-être simplement utiliser un fichier .png jusqu'à ce que le support s'améliore.
Vous devez pixelliser le SVG pour les navigateurs qui ne prennent pas en charge les icônes SVG (qui sont actuellement la plupart). Voir Existe-t-il un moyen de rendre les favicons SVG dans des navigateurs non pris en charge?
Tout d'abord, le code que vous utilisez pour vos favicons manque une partie, il devrait inclure quelque part. qui dit: type = "image/x-icon". Donc pour les favicons, en utilisant .jpg ou d'autres images standard comme .gif, le code ressemble à ceci:
<link href="someimagesourcefileorURL.jpg" rel="icon" type="image/x-icon" />
1. Pour l'extension de l'image, .jpg fonctionne [ou vous pouvez utiliser une autre extension de fichier comparable; .gif fonctionne également.]} _ 2. Pour rel, "icon" suffit le mot "raccourci" à côté de/avant "icône" si vous voulez, éventuellement.]} _
Pour un "favicon" SVG, c'est un peu plus compliqué, pour plusieurs raisons. Ceci est facultatif, mais pour fonctionner au mieux, vous devez redimensionner l’image SVG au-dessous de 256 pixels carrés (16 pixels sur 16 pixels, mais puisque les fichiers SVG sont normalement évolutifs, il est recommandé de régler la hauteur et la largeur à <= 16 pixels immédiatement avant d’essayer. de les utiliser comme un "favicon". Vous devez donc diviser votre hauteur par le nombre qui vous est nécessaire pour obtenir une hauteur égale ou inférieure à 16 pixels et il en va de même pour la largeur. Si vous avez une image carrée, aux proportions égales , alors vous devriez être capable de changer simplement la taille de l’image entière en pourcentage et l’ensemble de l’image doit être réduite sans être déformée de manière significative, tout en conservant la forme carrée. Certains sont en train de le transformer en une forme carrée, car les favicons sont des carrés de 16 pixels sur 16 pixels. Si vous avez déjà effectué ces ajustements, nous allons passer à autre chose. Après cette partie, vous utilisez ce format pour SVG. 'favicons':
<link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />
Cela devrait fonctionner tant que votre image SVG a déjà été redimensionnée comme décrit ci-dessus. Voici un bon JSfiddle (pas le mien) qui démontre que ce code fonctionne. https://jsfiddle.net/Daniel_Hug/YawSn/ Et j'ai beaucoup d'expérience avec les favicons traditionnels travaillant avec la première méthode que j'ai décrite.
J'espère que cela t'aides! J'aimerais bien que quelqu'un me montre ça quand je ne savais pas encore utiliser/configurer des favicons! :-)
Tu peux essayer comme ça
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
mais la plupart des navigateurs ne supportent pas
Optimisé SVG Favicons peut être aussi petit que 100-200 octets donc il n’est pas très judicieux de faire une demande externe. Il suffit d’aller de l’avant et de l’intégrer à la page. Ainsi, vous enregistrez une demande d'image externe qui pourrait être plus volumineuse que prévu en raison de l'envoi de cookies lors de la demande d'images.
Comme d'autres l'ont souligné, la prise en charge du navigateur n'est pas encore excellente, mais les favicons SVG offrent certaines choses que vous ne pouvez tout simplement pas faire avec PNG, telles que le style via CSS et même les animations basées sur JS.
Voici le problème de Chrome pour ajouter un support, ouvert depuis 2013 sans réel progrès dus aux bloqueurs.