SVG Favicon funktioniert nicht

Question

Ich versuche, ein SVG Favicon auf meiner Website zu bekommen, aber egal was ich mache, es will einfach nicht funktionieren.

Ich habe den folgenden Code als eine .svg-Datei in meinem üblichen Favicon Speicherort gespeichert, aber wenn ich den Favicon-Pfad zu .svg anstelle von .ico ändern, wird nichts geladen.

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

Dies ist der Code, den ich verwende, um das Favicon zu setzen;

<link rel="icon" href="http://www.MYSITE.co.uk/favicon.svg?v=4"> 

Ich kann nicht herausfinden, ob es ein Problem mit meinem .svg-Code ist, oder mir etwas fehlt. Danke

Answer 1

SVG Favicons sind nicht überall, aber Firefox und Safari unterstützt: http://caniuse.com/#feat=link-icon-svg

Sie möchten vielleicht nur ein .png verwenden, bis Unterstützung verbessert.

Answer 2

Versuchen Sie, ein SVG-Bild, das zum Beispiel in Photoshop erstellt wurde, hinzuzufügen und verwenden Sie dieses. Wenn dies funktioniert, zeigt es, dass der Fehler in Ihrem SVG-Code ist. Andernfalls verknüpfen Sie die Datei falsch.

Answer 3

Sie müssen das SVG für Browser rastern, die SVG-Symbole nicht unterstützen (die derzeit die meisten von ihnen sind). Siehe Is there a way to render SVG favicons in unsupported browsers?

Answer 4

Sie können

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

wie diese versuchen, aber die meisten Browser nicht unterstützt

Answer 5

Zunächst wird der Code, den Sie für Ihre Favicons verwenden ein Teil fehlt, sollte es gehören, irgendwo . das sagt: type = "image/x-icon". Also für Favicons, mit .jpg oder andere Standard Bilder wie .gif der Code wie folgt aussieht:

<link href="someimagesourcefileorURL.jpg" rel="icon" type="image/x-icon" /> 

1. Für die Bilderweiterung .jpg arbeitet [oder Sie eine andere vergleichbare Dateierweiterung verwenden können; .gif funktioniert auch.]2. Für rel „Symbol“ reicht aus, um [Sie können aber auch das Wort „Verknüpfung“ neben/vor „Symbol“ setzen, wenn Sie möchten, optional.]

Für eine SVG 'Favicon' ist ein wenig komplizierter, aus ein paar Gründen. Dies ist optional, aber um das beste Ergebnis zu erzielen, müssen Sie das SVG-Bild auf unter 256 quadratische Pixel (16 Pixel mal 16 Pixel) skalieren, aber da SVG normalerweise skalierbar ist, empfehle ich, die Höhe und Breite unmittelbar vor dem Versuch auf < = 16px einzustellen Um sie als "Favicon" zu verwenden, müssen Sie Ihre Höhe mit der Zahl teilen, die benötigt wird, um die Höhe gleich oder kleiner als 16 Pixel zu erhalten, und das gleiche gilt für die Breite. Wenn Sie ein quadratisches, gleichmäßig proportioniertes Bild haben Dann sollten Sie in der Lage sein, die gesamte Bildgröße einfach um einen Prozentsatz zu ändern, und das gesamte Bild sollte ohne Verzerrung unter Beibehaltung der quadratischen Form verkleinert werden. Wenn Sie keine quadratische Form haben, müssen Sie das Bild verzerren Einige davon werden gerade in eine quadratische Form umgewandelt, weil Favicons 16px mal 16px Quadrate sind.Nehmen wir an, dass Sie diese Anpassungen bereits vorgenommen haben, gehen wir weiter.Nachdem dieser Teil fertig ist, verwenden Sie dieses Format für SVG "Favicons":

Das sollte funktionieren, solange Ihr SVG-Bild bereits wie oben beschrieben verkleinert wurde. Hier ist eine gute JSfiddle (nicht-meine), die zeigt, dass dieser Code funktioniert.https://jsfiddle.net/Daniel_Hug/YawSn/ Und ich habe viel Erfahrung mit den traditionellen Favicons, die mit der ersten beschriebenen Methode arbeiten.

Hoffe, das hilft! Ich wünschte, jemand hätte mir das gezeigt, als ich noch nicht wusste, wie man Favicons benutzt!

:-)