Schermata dei siti più popolari in Internet Explorer 10 - Le icone non vengono visualizzate

Usiamo il seguente codice per aggiungere icone per favicon, tablet, smartphone, riquadri Windows 8 e simili: -

<link rel="apple-touch-icon" href="apple-touch-icon.png">

<link rel="shortcut icon" type="image/x-icon" href="/webmasters//favicon.ico"/>

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<meta name="msapplication-TileImage" content="apple-touch-icon-144x144-precomposed.png"/>

<meta name="msapplication-TileColor" content="#17151a"/>

Purtroppo questo non sembra funzionare per IE9 e IE10 "la schermata dei siti più popolari", le ricerche su Google non sono state illuminanti.

Stack utilizza <link rel="apple-touch-icon" href="apple-touch-icon.png">che sembra funzionare per questo, ma non per noi.

Sono stati apprezzati tutti gli indizi per una soluzione.

inserisci qui la descrizione dell'immagine

internet-explorer favicon

— MJWadmin
fonte

Sta fallendo solo su questa schermata? per esempio. L'icona viene caricata dalla scheda del browser quando si visita normalmente? Ciò non proverebbe assolutamente nulla, ma sarebbe un po 'informativo. Altrimenti sembra che tu abbia coperto abbastanza a fondo la situazione della favicon. Non sono sicuro che mi preoccuperei troppo di questo. I browser sono stati notoriamente traballanti nel caricare favicon in generale per anni. Inoltre, succede per tutti?

— Su '

Nessuna delle icone indica 404 e la favicon funziona in altri browser, così come le icone touch. Questo è uno di quei problemi molto fastidiosi "gli avvisi della presidenza". Dopo aver trascorso la mattinata, la curiosità e la frustrazione hanno avuto la meglio su di me.

— MJWadmin,

Hai provato l'immagine PNG effettiva utilizzata dallo stack? Nel caso ci sia qualche anomalia con il formato PNG stesso?

— MrWhite,

Altri browser non sono rilevanti qui; Volevo dire che l'icona si carica nelle normali schede di IE. Anche la mancanza di 404 non ti dirà nulla. Non ha nulla a che fare con se l'immagine è davvero lì. I browser sono in genere incerti sul caricamento delle favicon, punto; quando si presenta un problema, spesso si può fare ben poco (svuotare la cache e qualsiasi altra cosa si possa pensare: potrebbe funzionare, potrebbe non; sarà una sorpresa!) Sono migliorati nel tempo, ma succede ancora. Firefox non è riuscito a caricare una favicon in una scheda per un sito già aperto in un'altra scheda, con l'icona.

— Su '

Potresti pubblicare un link al sito Web nei commenti?

Risposte:

Dov'è il tuo file ico? Vedo che è nella cartella principale, quindi non hai bisogno della barra dietro, rimuovi la barra da dietro il tuo file, inoltre non hai bisognotype="image/x-icon"

Il tuo file ICO dovrebbe essere una normale libreria di icone con dimensioni dell'icona necessarie diverse.

<link rel="shortcut icon" href="favicon.ico"/>

Basta usare il codice sopra, funziona perfettamente per IE9, IE10, FX e Chrome.

Se in precedenza avevi diversi favico, devi aggiornare anche la cache del browser .

— Omne
fonte

supponendo che il file sia effettivamente nella cartella principale, il problema è sicuramente il file, non il tag html come mostrato (a meno che non ci siano altri errori html più in basso che causano problemi di IE). Il mio tag di collegamento favicon è scritto proprio come @MJWadmin e la mia icona si carica bene nelle schede preferite di IE9

— WebChemist

Quali sono le dimensioni della tua favicon? Controlla questo elenco per assicurarsi che rientrino in queste linee guida:

Personalizzazione dell'icona del sito - Icone del sito in Internet Explorer 9

modificare

Guardando il codice sorgente di Stackoverflow, vedo 2 icone di icone:

<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

<link rel="apple-touch-icon" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">

Quando guardo il mio stackoverflow nella mia scheda dei preferiti in IE9, sembra che stia usando la favicon 16x16 (e centrandola in un contenitore 32x32), non l'icona touchscreen apple 158x158 come hai suggerito perché se guardi il png, il il rapporto di distanza "imbottitura" dal lato rispetto al fondo è di circa 2,5: 1 dove come 1: 1 nella favicon, uguale all'imbottitura 1: 1 nella scheda IE9 ...

Posso dirti che la favicon del mio datore di lavoro si carica nei preferiti di IE9, ed è 64x64 (nessuna trasparenza, dimensione 12,5kb). Se non riesci ancora a mostrare la tua favicon, pubblica un link in modo che possiamo controllare il file di immagine reale

— WebChemist
fonte

-1

Prova come suggerisce Omne e rimuovi il tuo attributo type o aggiungi un secondo con image / vnd.microsoft.icon come valore. E poi assicurati che il tuo server stia inviando il tipo mime per i file dot ico. Guarda questo:

https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

Alcuni retroscena

Una volta era, o meglio, è stato discusso su quale sia il tipo corretto di mime per le icone.

Il mondo Microsoft ha usato e probabilmente si affida ancora a "image / vnd.microsoft.icon" dove il resto del mondo usa "image / x-icon" non ufficialmente (ufficialmente) lol.

Dal formato ICO di Wikipedia :

Il tipo MIME ufficiale registrato IANA per i file ICO è image / vnd.microsoft.icon, registrato nel 2003. Etichette errate "image / ico", "image / icon", "text / ico" e "application / ico", insieme con il nome non ufficiale "image / x-icon" erano in uso al momento della registrazione ufficiale e assegnazione del tipo MIME.

ma da Wikipedia per Favicon

Nel 2003, il formato .ico è stato registrato presso Internet Assigned Numbers Authority (IANA) sotto il tipo MIME image / vnd.microsoft.icon. [12] Quando si utilizza il formato .ico, Internet Explorer non può visualizzare i file forniti con il tipo MIME standardizzato. Una soluzione alternativa per Internet Explorer consiste nell'associare .ico al tipo MIME non standard image / x-icon nei server Web.

— Anthony Hatzopoulos
fonte