Come faccio ad aggiungere una favicon al mio sito Web?

Quale markup è lo standard moderno per l'aggiunta di una favicon al mio sito? Qual è il formato e le dimensioni standard dell'immagine?

Per funzionare in tutti i browser, .icoè preferibile, per quanto riguarda le dimensioni, 32x32 è il più utilizzato, anche 16x16 funziona (questa è la dimensione effettiva utilizzata nel browser nella maggior parte dei luoghi).

Inoltre, non nella tua domanda, dovrebbero avere una profondità di colore di 8 o 24 bit.

Vale la pena notare che, se prevedi di aggiungere un segnalibro ai tuoi utenti sul tuo sito, questo è un elemento separato <link>per l'immagine, ad esempio StackOverflow:

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

Che è:

Puoi usare uno strumento come http://www.favicon.cc/ per importare un'immagine e convertirla in una favicon, o semplicemente crearla da zero.

Dopodiché, se assegni un nome al tuo file favicon.icoe lo metti nella radice del tuo sito Web, la maggior parte dei browser Web lo ottiene automaticamente.

Ma puoi anche dichiararlo esplicitamente nei tuoi file html in questo modo:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

Con i vantaggi di utilizzare un formato diverso da ico, utilizzare favicon differenti su pagine diverse, posizionare la favicon in un altro posto, usare un nome diverso da faviconecc.

http://en.wikipedia.org/wiki/Favicon

Markup con percorso http completo del dominio per IE e mantenere favicon nella cartella documenti:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

Formato immagine standard:

• ico
• 16 x 16 pixel

Per diversi dispositivi, browser e sistemi operativi è possibile utilizzare icone diverse. Ad esempio, di seguito è riportato un elenco che potrebbe ispirarti. Sicuramente correggi / modifica l'elenco man mano che le cose procedono.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

Non hai più bisogno di un link, ma è utile. Invece, finché lasci il file favicon.ico (ed è un ico) nella tua radice, verrà usato come favicon.

Ho avuto qualche problema a creare il mio file .ico con GIMP, ma questo post fornisce istruzioni dettagliate. Il trucco sembra salvare prima come formato GIF per convertire in una tabella di colori indicizzata, quindi convertirlo in formato ICO.