SVG-Favicon funktioniert nicht

Lesezeit: 3 Minuten

Benutzer-Avatar
Sam Willis

Ich versuche, ein SVG-Favicon auf meine Seite zu bekommen, aber egal was ich tue, es will einfach nicht funktionieren.

Ich habe den folgenden Code als .svg-Datei an meinem üblichen Favicon-Speicherort gespeichert, aber wenn ich den Favicon-Pfad in .svg statt .ico ändere, 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 festzulegen;

<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. Vielen Dank

  • Ich bin kein Webexperte, aber denken Sie, dass die SVG-Version und die Link-Version übereinstimmen sollten? version=”1.1″ gegenüber ?v=4.

    – Eisvogel76

    24. Dezember 2015 um 1:20 Uhr

  • Du hast zwei class Attribute auf den Pfaden, wahrscheinlich besser durch Inline-Attribute ersetzen <path fill="#DB6B2A" d="..." … Anmerkung zu Icebird … die v=4 ist eine Cachebusting-ID.

    – Russin

    3. Mai 2017 um 12:34 Uhr

Benutzer-Avatar
serrao sagt

SVG-Favicons werden jetzt für Firefox, Chrome, Edge und Opera unterstützt:
https://caniuse.com/#feat=link-icon-svg

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

Safari wird ab sofort nicht mehr unterstützt v15.x

  • Unterstützt von Firefox seit Version 58.

    – NVRM

    22. April 2018 um 1:53 Uhr

  • @Cryptopat – seit irgendwo in den Firefox 20er Jahren, glaube ich … vielleicht sogar früher.

    – serraosays

    22. April 2018 um 16:10 Uhr

  • NOCH nicht von Safari unterstützt

    – aarjithn

    12. Februar um 8:56 Uhr

Zunächst einmal fehlt dem Code, den Sie für Ihre Favicons verwenden, ein Teil, der irgendwo enthalten sein sollte. das sagt: type=”image/x-icon”. Für Favicons, die .jpg oder andere Standardbilder wie .gif verwenden, sieht der Code so aus:

<link href="https://stackoverflow.com/questions/34446050/someimagesourcefileorURL.jpg" rel="icon"  type="image/x-icon" />

1. Als Bilderweiterung funktioniert .jpg [or you can use another comparable file extension; .gif works too.] 2. Für rel ist “icon” ausreichend [but you can also put the word “shortcut” next to/before “icon” if you want, optionally.]

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 unter 256 Quadratpixel (16 x 16 Pixel) skaliert werden, aber da SVG normalerweise skalierbar sind, empfehle ich, die Höhe und Breite unmittelbar vor dem Versuch auf <= 16 Pixel einzustellen um sie als "Favicon" zu verwenden. Sie müssen also Ihre Höhe durch eine beliebige Zahl teilen, die erforderlich ist, um die Höhe gleich oder kleiner als 16 Pixel zu machen, 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 wesentliche Verzerrung verkleinert werden, während die quadratische Form beibehalten wird. Wenn Sie keine quadratische Form haben, müssen Sie das Bild verzerren Einige sind dabei, es in eine quadratische Form umzuwandeln, da Favicons 16 x 16 Pixel große Quadrate sind. Angenommen, Sie haben diese Anpassungen bereits vorgenommen, fahren wir fort. Jetzt, nachdem dieser Teil erledigt ist, verwenden Sie dieses Format für SVG 'favicons':

<link rel="icon" href="https://stackoverflow.com/questions/34446050/someimagefileorURL.svg" type="image/svg+xml" />

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

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

  • Höhe kleiner als 16 Pixel für SVG? Sieht für mich esoterisch aus. Ich glaube nicht, dass das nötig ist. Als Favicon verwende ich SVG mit 180px. Und ich denke, es würde genauso aussehen, wenn ich 1800px oder 18000px verwenden würde.

    – Güttli

    3. Mai 2020 um 20:12 Uhr

  • Esoterisch? Wirklich? Aber Sie haben Recht, dass SVG für 16px Höhe natürlich nicht benötigt wird. Aber Sie können natürlich auch ein SVG für JEDE Höhe verwenden.

    – Sean Tank Garvey

    13. Mai 2020 um 21:37 Uhr

Benutzer-Avatar
Malith

Sie können dies versuchen:

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

Benutzer-Avatar
Stuart P. Bentley

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

Benutzer-Avatar
vhs

Optimierte SVG-Favicons kann nur 100-200 Byte groß sein, daher macht es nicht viel Sinn, eine externe Anfrage zu stellen. Fahren Sie einfach fort und betten Sie es auf der Seite ein. Dadurch speichern Sie eine externe Bildanforderung, die größer als erwartet sein kann, da Cookies gesendet werden, wenn Bilder angefordert werden.

Wie andere angemerkt haben, ist die Browserunterstützung noch nicht großartig, aber die SVG-Favicons leisten einige Dinge, die Sie mit PNG einfach nicht tun können – wie z. B. Styling über CSS und sogar JS-basierte Animationen.

Hier ist das Chrome-Problem um Unterstützung hinzuzufügen, offen von 2013 bis 2020 ohne wirklichen Fortschritt aufgrund von Blockern. Anfang 2020 endgültig gelöst, wie von Matthew Steeples erwähnt.

  • Es ist jetzt in Chrome ab Februar 2020

    – Matthew Steeples

    22. Oktober 2020 um 23:23 Uhr

Für Angular Version 9+ müssen Sie auch favicon.svg in den Assets-Ordner legen.

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

Listen Sie die Datei auch in den Assets in angle.json auf

     "assets": [
              ...,
              "src/assets/favicon.svg"
            ],

  • Es ist jetzt in Chrome ab Februar 2020

    – Matthew Steeples

    22. Oktober 2020 um 23:23 Uhr

1317700cookie-checkSVG-Favicon funktioniert nicht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy