SVG Favicon werkt niet

Ik probeer een SVG-favicon op mijn site te krijgen, maar wat ik ook doe, het wil gewoon niet werken.

Ik heb de volgende code opgeslagen als een .svg-bestand op mijn gebruikelijke favicon-locatie, maar als ik het favicon-pad verander in .svg in plaats van .ico, wordt er niets 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>

Dit is de code die ik gebruik om het favicon in te stellen;

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

Ik kom er niet uit of het een probleem is met mijn .svg-code, of ik mis iets.
Bedankt

Antwoord 1, autoriteit 100%

SVG-favicons worden nu ondersteund voor Firefox, Safari, Chrome, Edge en Opera:
https://caniuse.com/#feat=link-icon-svg

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

Chrome-ondersteuning is toegevoegd in versie 80.x.

Antwoord 2, autoriteit 6%

Allereerst mist de code die je voor je favicons gebruikt een deel, dat zou ergens moeten staan. dat zegt: type=”image/x-icon”. Dus voor favicons, die .jpg of andere standaardafbeeldingen zoals .gif gebruiken, ziet de code er als volgt uit:

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

1. Voor de afbeeldingsextensie werkt .jpg [of u kunt een andere vergelijkbare bestandsextensie gebruiken; .gif werkt ook.]2. Voor rel is “pictogram” voldoende [maar u kunt desgewenst ook het woord “snelkoppeling” naast/voor “pictogram” plaatsen.]

Voor een SVG-‘favicon’ is het om een ​​paar redenen wat lastiger. Dit is optioneel, maar om het beste te werken, moet de SVG-afbeelding kleiner zijn dan 256 vierkante pixels (16 pixels bij 16 pixels, maar aangezien SVG normaal schaalbaar is, raad ik aan om de hoogte en breedte onmiddellijk ervoor in te stellen op beide <=16px proberen ze te gebruiken als een ‘favicon’. Dus je moet je lengte delen door het getal dat nodig is om de hoogte gelijk te krijgen aan of kleiner te zijn dan 16px en hetzelfde geldt voor de breedte. Als je een vierkant, gelijkmatig geproportioneerd afbeelding, dan zou je in staat moeten zijn om eenvoudig de volledige afbeeldingsgrootte met een percentage te veranderen en de hele afbeelding zou verkleind moeten worden zonder significant te vervormen met behoud van de vierkante vorm.Als je geen vierkante vorm hebt, moet je de afbeelding vervormen beeld sommigen in het proces om het in een vierkante vorm te veranderen, omdat favicons vierkanten van 16 px bij 16 px zijn. Ervan uitgaande dat je die aanpassingen al hebt gemaakt, gaan we verder. Nu, nadat dat deel is voltooid, gebruik je dit formaat voor SVG ‘favicons’:

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

Dat zou moeten werken zolang uw SVG-afbeelding al is verkleind zoals hierboven beschreven. Hier is een goede JSfiddle (niet van mij) die aantoont dat deze code werkt. https://jsfiddle.net/Daniel_Hug/YawSn/En ik heb veel ervaring met de traditionele favicons werken met de eerste methode die ik beschreef.

Hopelijk helpt dit! Ik zou echt willen dat iemand me dit liet zien terwijl ik nog niet wist hoe ik favicons moest gebruiken/instellen! 🙂

Antwoord 3, autoriteit 4%

Je kunt dit proberen:

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

Antwoord 4, autoriteit 3%

U moet de SVG rasteren voor browsers die geen SVG-pictogrammen ondersteunen (wat momenteel de meeste zijn). Zie Is er een manier om SVG-favicons weergeven in niet-ondersteunde browsers?

Antwoord 5, autoriteit 3%

Geoptimaliseerde SVG-faviconskunnen slechts 100-200 bytes zijn dus het heeft niet veel zin om een ​​extern verzoek te doen. Ga je gang en sluit het op de pagina in. Als u dit doet, slaat u een extern afbeeldingsverzoek op dat groter kan zijn dan verwacht omdat cookies worden verzonden wanneer afbeeldingen worden opgevraagd.

Zoals anderen al hebben opgemerkt, is de browserondersteuning nog niet geweldig, maar de SVG-favicons bieden sommige dingen die je gewoon niet kunt doen met PNG, zoals styling via CSS en zelfs JS-gebaseerde animatie.

Hier is het Chrome-probleemom ondersteuning toe te voegen, open van 2013 tot 2020 zonder echte vooruitgang als gevolg van blokkers. Eindelijk opgelost begin 2020 zoals vermelddoor Matthew Steeples.

Antwoord 6

Voor Angular versie 9+ moet je favicon.svg ook in de activamap plaatsen.

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

Vermeld ook het bestand in de items in angular.json

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