wake-up-neo.com

SVG Favicon funktioniert nicht

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

Ich habe den folgenden Code als .svg-Datei in meinem gewohnten Favicon-Speicherort gespeichert. Wenn ich jedoch den Favicon-Pfad in .svg statt .ico umstelle, 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 zum Einstellen des Favicons verwende.

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

Ich kann nicht herausfinden, ob es sich um ein Problem mit meinem .svg-Code handelt oder ob mir etwas fehlt

38
Sam Willis

SVG-Favoriten werden für Firefox, Safari und jetzt auch Edge unterstützt. Chrome bleibt jedoch ein Problem: https://caniuse.com/#feat=link-icon-svg

Möglicherweise möchten Sie einfach eine PNG-Datei verwenden, bis sich die Unterstützung verbessert.

40
staypuftman

Für Browser, die keine SVG-Symbole unterstützen (was derzeit die meisten ist), müssen Sie die SVG-Datei rastern. Siehe Gibt es eine Möglichkeit, SVG-Favicons in nicht unterstützten Browsern zu rendern?

4

Zunächst fehlt dem Code, den Sie für Ihre Favoriten verwenden, ein Teil, der irgendwo enthalten sollte. das heißt: type = "image/x-icon". Für Favoriten, die JPG- oder andere Standardbilder wie GIF verwenden, sieht der Code folgendermaßen aus:

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

1. Für die Bilderweiterung funktioniert .jpg [oder Sie können eine andere vergleichbare Dateierweiterung verwenden; .gif funktioniert auch.] 2. Für rel ist "icon" ausreichend [aber Sie können das Wort "shortcut" auch optional neben/vor "icon" setzen.]

Für ein SVG-Favicon ist es aus mehreren Gründen etwas kniffliger. Dies ist optional, aber um am besten zu funktionieren, muss das SVG-Bild auf eine Größe von weniger als 256 Quadratpixeln (16 x 16 Pixel) eingestellt sein. Da SVG normalerweise skalierbar ist, empfehle ich, Höhe und Breite unmittelbar vor dem Versuch auf <= 16 Pixel einzustellen Um sie als "Favicon" zu verwenden, müssen Sie Ihre Höhe durch eine beliebige Zahl teilen, damit die Höhe gleich oder kleiner als 16px ist, und dies gilt auch 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 nennenswerte Verzerrung verkleinert werden, während die quadratische Form erhalten bleibt. Wenn Sie keine quadratische Form haben, müssen Sie das Bild verzerren Einige werden gerade in eine quadratische Form umgewandelt, da die Favicons 16 x 16 Pixel groß sind. Angenommen, Sie haben diese Anpassungen bereits vorgenommen, fahren wir fort. Nachdem dieser Teil abgeschlossen ist, verwenden Sie dieses Format für SVG 'favicons':

<link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />

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 von mir beschriebenen Methode arbeiten.

Hoffe das hilft! Ich wünschte, jemand hätte mir das gezeigt, als ich noch nicht wusste, wie man Favicons verwendet/einrichtet! :-)

3

Sie können es so versuchen 

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

aber die meisten Browser unterstützen nicht

1
Malith

Optimierte SVG-Favicons kann so wenig wie 100-200 Bytes sein, so dass es wenig Sinn macht, eine externe Anfrage zu stellen. Einfach loslegen und auf der Seite einbetten. Dabei speichern Sie eine externe Bildanfrage, die aufgrund der beim Senden von Bildern gesendeten Cookies größer sein könnte als erwartet.

Wie andere bereits erwähnt haben, ist die Browserunterstützung noch nicht großartig, aber die SVG-Favicons bieten einige Dinge, die Sie mit PNG einfach nicht machen können - beispielsweise das Stylen über CSS und sogar JS-basierte Animationen.

Hier ist das Chrome-Problem um Support hinzuzufügen, der seit 2013 geöffnet ist und keinen wirklichen Fortschritt durch Blocker darstellt.

0
Josh Habdas