SVG Favicon non funziona

Question

Sto cercando di ottenere un Favicon SVG sul mio sito ma non importa quello che faccio, semplicemente non vuole funzionare.

Ho il seguente codice salvato come file .svg nella mia solita posizione preferita, ma quando cambio il percorso di favicon per essere .svg invece di .ico, non carica nulla.

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

Questo è il codice che sto usando per impostare la favicon;

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

non riesco a capire se si tratta di un problema con il mio codice SVG, o mi manca qualcosa. Grazie

Answer 1

favicon SVG non sono supportati da nessuna parte, ma Firefox e Safari: http://caniuse.com/#feat=link-icon-svg

Si potrebbe desiderare di utilizzare solo un .png fino supporto migliora.

Answer 2

Prova ad aggiungere un'immagine SVG fatta in Photoshop, ad esempio, e usala. Se funziona, mostra che l'errore è nel tuo codice SVG. Altrimenti, stai collegando il file sbagliato.

Answer 3

È necessario rasterizzare l'SVG per i browser che non supportano le icone SVG (che è attualmente la maggior parte di esse). Vedere Is there a way to render SVG favicons in unsupported browsers?

Answer 4

Si può provare in questo modo

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

ma la maggior parte dei browser non supporta

Answer 5

Prima di tutto il codice che si sta utilizzando per le favicon manca una parte, esso dovrebbe includere, da qualche parte . quello che dice: type = "image/x-icon". Così per favicon, utilizzando .jpg o altre immagini standard come .gif il codice simile al seguente:

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

1. Per l'estensione delle immagini, .jpg funziona [oppure è possibile utilizzare un altro file con estensione comparabile; .gif funziona anche.]2. Per rel, "icona" è sufficiente [ma si può anche mettere la parola "scorciatoia" accanto a/prima "icona", se si desidera, opzionalmente.]

Per un 'Favicon' di SVG è un po 'più complicato, per alcune ragioni. Questo è opzionale ma per funzionare al meglio, è necessario che l'immagine SVG sia ridimensionata a 256 pixel quadrati (16 pixel per 16 pixel, ma poiché SVG è normalmente scalabile, consiglio di impostare l'altezza e la larghezza su entrambi < = 16px immediatamente prima di provare per usarli come "favicon", quindi devi dividere la tua altezza per qualunque numero sia necessario per ottenere l'altezza uguale o inferiore a 16px e lo stesso vale per la larghezza Se hai un'immagine quadrata e proporzionata , quindi dovresti essere in grado di cambiare semplicemente l'intera dimensione dell'immagine di una percentuale e l'intera immagine dovrebbe ridimensionarsi senza distorcere significativamente mantenendo la forma quadrata Se non hai una forma quadrata, devi distorcere l'immagine alcuni nel processo di trasformarlo in una forma quadrata perché le favicon sono quadrati di 16px per 16px. Supponendo che tu abbia già fatto queste regolazioni, ci stiamo muovendo. Ora, dopo che quella parte è terminata, usi questo formato per SVG "favicon":

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

Questo dovrebbe funzionare finché l'immagine SVG è stata ridimensionata già come descritto sopra. Ecco un buon JSfiddle (non mio) che dimostra che questo codice funziona.https://jsfiddle.net/Daniel_Hug/YawSn/ E ho molta esperienza con le favicon tradizionali che lavorano con il primo metodo che ho descritto.

Spero che questo aiuti! Mi auguro che qualcuno mi abbia mostrato questo quando ancora non sapevo come usare/impostare le favicon! :-)