SVG Favicon ne fonctionne pas
Je vais essayer d'obtenir une SVG de Favicon sur mon site, mais peu importe ce que je fais, il ne veut tout simplement pas de travail.
J'ai le code suivant enregistré en tant que .fichier svg dans mon habitude de favicon emplacement, mais quand j'ai changer le favicon voie de l'être .svg au lieu de .ico, rien de charges.
<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 savoir si c'est un problème avec mon .code svg, ou il me manque quelque chose.
Grâce
source d'informationauteur Sam Willis
Vous devez vous connecter pour publier un commentaire.
SVG favicons ne sont pas pris en charge n'importe où, mais Firefox et Safari:
http://caniuse.com/#feat=link-icon-svg
Vous pouvez utiliser un .png jusqu'à la prise en charge améliore.
Vous avez besoin de pixelliser le SVG pour les navigateurs qui ne supportent pas les icônes SVG (qui est actuellement la plupart d'entre eux). Voir Est-il un moyen de rendu SVG favicons non prise en charge des navigateurs?
Tout d'abord le code que vous utilisez pour vos favicons manque une partie, il doit comprendre, quelque part. qui dit que: type="image/x-icon". Donc, pour l'icone, à l'aide de .jpg ou autres images standard comme .gif le code ressemble à ceci:
1. Pour l'image de l'extension, de .jpg [ou vous pouvez utiliser un autre comparable extension de fichier; .gif fonctionne aussi.] 2. Pour rel, "icône" est suffisant [mais vous pouvez également mettre le mot "raccourci" à côté de/avant "icône" si vous voulez, éventuellement.]
Pour une SVG de "favicon" il est un peu plus difficile, pour plusieurs raisons. Cette option est facultative, mais de travailler mieux, vous avez besoin de l'image SVG pour être de taille à moins de 256 pixels carrés (16 pixels par 16 pixels, mais depuis SVG sont normalement évolutive, je vous recommande de réglage de la hauteur et de la largeur pour les deux <=16px immédiatement avant d'essayer de les utiliser comme un "favicon'. Si vous avez besoin de diviser la hauteur de votre par ce numéro est nécessaire pour obtenir la hauteur égale ou inférieure à 16px et la même chose est vraie pour la largeur. Si vous avez un carré, uniformément proportionné de l'image, alors vous devriez être en mesure de simplement changer la taille de l'image par un pourcentage et l'ensemble de l'image à l'échelle vers le bas sans déformée de façon significative, tout en conservant la forme carrée. Si vous n'avez pas de forme carrée, vous aurez à déformer l'image de certains dans le processus de transformation en carré-ish forme parce que les favicons sont 16px par 16px carrés. En supposant que vous avez déjà fait ces ajustements, nous avançons. Maintenant, après que la partie est terminée, vous utilisez ce format pour le SVG 'icone':
Qui devrait fonctionner aussi longtemps que votre image SVG a été réduit déjà 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 le traditionnel favicons de travail avec la première méthode que j'ai décrite.
Espérons que cette aide! Je voudrais bien que quelqu'un m'a montré ce moment je ne savais pas comment l'utiliser/set-up favicons encore! 🙂
Vous pouvez essayer comme ceci
mais la plupart des navigateur ne supporte pas les
Essayez d'ajouter une image SVG, faite dans Photoshop, par exemple, et de l'utiliser. Si cela fonctionne, il montre que la faute est dans votre code SVG. Sinon, vous liez le fichier de mal.