Qual è attualmente il modo migliore per visualizzare una favicon in tutti i browser che supportano le favicon?

StackOverflow https://stackoverflow.com/questions/37073

  •  09-06-2019
  •  | 
  •  

Domanda

Qual è attualmente il modo migliore per visualizzare una favicon in tutti i browser che attualmente la supportano?

Per favore includere:

  1. Quali formati di immagine sono supportati da quali browser.

  2. Quali righe sono necessarie e in quali luoghi per i vari browser.

È stato utile?

Soluzione

Qui scelgo un approccio con cintura e bretelle.

Creo un'icona 32x32 sia nel file .ico E .png formati chiamati favicon.ico E favicon.png.Il nome dell'icona non ha molta importanza a meno che tu non abbia a che fare con browser meno recenti.

  1. Posto favicon.ico nella root del tuo sito per supportare i browser meno recenti (facoltativo e rilevante solo per i browser meno recenti.
  2. Inserisci favicon.png nella sottodirectory delle mie immagini (solo per mantenere le cose in ordine).
  3. Aggiungi il seguente codice HTML all'interno del file <head> elemento.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

Si prega di notare che:

  • Il tipo MIME per .ico i file sono stati registrati come image/vnd.microsoft.icon dal IANA.
  • Internet Explorer ignorerà il file type attributo per la relazione dell'icona di collegamento e questo è l'unico browser a supportare questa relazione, non è necessario fornirlo.

Riferimento

Altri suggerimenti

Utilizzo il formato .ico e inserisco le seguenti due righe all'interno del file <head> elemento:

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

Per supportare anche le icone touch per tablet e smartphone preferisco l'approccio di HTML5Boilerplate

Ulteriori informazioni sulle icone touch sono disponibili in Questo articolo.

Con lo stato attuale del supporto del browser non devi nemmeno aggiungere il tag HTML per la favicon nel tuo documento.I browser cercheranno automaticamente un elenco di file, vedere questo esempio per iOS:

Se non sono specificate icone nell'HTML, iOS Safari cercherà la directory principale del sito Web per le icone con il prefisso precoceposto da Apple-Touch-ICON o Apple-Touch-ICON.Ad esempio, se la dimensione dell'icona appropriata per il dispositivo è di 57 × 57 pixel, iOS cerca nomi di nome nel seguente ordine:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

Il mio consiglio è di non includere una favicon nel documento, ma di avere un elenco di file pronto nel sito Web principale:

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

Quando scarichi un modello da html5boilerplate.com questi sono tutti inclusi, devi solo sostituirli con le tue icone.

IE6 non può gestire correttamente i PNG, fai attenzione.

Favicon deve essere un file file .ico per funzionare correttamente su tutti i browser.

I browser moderni supportano anche immagini PNG e GIF.

Ho scoperto che in generale il modo più semplice per crearne uno è utilizzare un servizio Web disponibile gratuitamente come favicon.cc.

Esiste anche un sito dove è possibile verificare come è fatta la favicon di qualsiasi pagina

getfavicon.org

Lì puoi vedere un tutorial su come creare favicon, tipi di immagine e risoluzioni, è carino!

Avere un favicon.* nella directory principale viene rilevato automaticamente dalla maggior parte dei browser.Puoi assicurarti che venga rilevato utilizzando:

 <link rel="icon" type="image/png" href="/path/image.png" />

Personalmente utilizzo immagini .png ma la maggior parte dei formati dovrebbe funzionare.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top