Favicon, Apple Touch Icons, Browsers icons

Sommario:

La Favicon:

La "favicon" è quella piccola icona che può apparire in questi contesti:
  • accanto al nome del sito in una scheda del browser
  • come icona nei segnalibri
  • come icona sulla homescreen dei dispositivi
  • accanto all'indirizzo del sito nei risultati di ricerca
Se non configurata, viene sostituita da un'icona standard che, ovviamente, non identifica in alcun modo il vostro sito.


In origine, la favicon era solo una piccola icona di dimensione 16x16 px, in formato .ico, ma, nel corso degli anni, è stato aggiunto il supporto per diverse dimensioni e estensioni, anche se quella più utilizzata è .png.

Per ottenere la favicon classica formato .ico, supportata da tutti i browser, potete usare un programmi online come questo (ricordando di caricare un'immagine di almeno 260 x 260 px):

http://tools.dynamicdrive.com/favicon/

Oppure, se volete disegnarla direttamente online, quest'altro programma:

http://www.favicon.cc/

Una volta scaricata la vostra favicon, il procedimento per sostituirla a quella standard, è semplicissimo.
Dopo averla caricata negli allegati del sito, o dove credete, dovete inserire questa riga nella sezione "head" del codice di ogni pagina:
 <link rel="icon" href="/favicon.ico"/>

Al posto di "/favicon.ico" metterete l'indirizzo web della vostra favicon.
La vostra favicon personalissima apparirà, come per incanto, accanto al nome del sito.

AGGIORNAMENTO: Google Search Console ha diramato un avviso in cui invita i webmaster a implementare immagini ad alta risoluzione per la favicon. La dimensione consigliata è di 192x192 px, con estensione .png.

Apple Touch Icons:

Cosa sono? Sono delle icone appositamente studiate per i dispositivi mobili Apple. Implementando queste icone, quando un visitatore salverà la pagina del vostro sito nei preferiti, non vedrà un'icona anonima, ma l'icona che voi avete scelto.
Per implementare queste icone, potete utilizzare questo tool online (che fornisce anche la favicon): http://iconifier.net/index.php.
Il codice fornito va inserito nella zona head del sito come detto per la favicon.

Browsers icons:

Abbiamo detto all'inizio che la favicon classica,  formato .ico, viene supportata da tutti i browser, quindi, verrebbe da chiedersi perchè ci si debba preoccupare di preparare tante icone diverse.
Il problema è che  gli schermi sono diversi e hanno differenti densità di pixel, da qui la necessità di creare tutte le icone necessarie a garantire sempre la corretta visualizzazione, soprattutto per le icone che contraddistinguono i segnalibri, o i collegamenti salvati nella home dei dispositivi mobili.

Se volete, quindi, impostare la vostra favicon in maniera professionale, tenendo in considerazione tutte le piattaforme, potete usare questo programma online: https://realfavicongenerator.net
Il procedimento è più complesso e richiede maggiore attenzione, ma basta seguire attentamente le indicazioni e non dimenticare di guardare anche nelle impostazioni avanzate.

Un esempio avanzato completo, ma semplificato (presupponendo che tutto venga messo in una cartella "favicon" nella root del sito), che dovrebbe accontentare un po' tutti, potrebbe essere questo:
<link rel="icon" href="/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon/icon-48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/icon-96.png">
<link rel="icon" type="image/png" sizes="144x144" href="/favicon/icon-144.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/icon-192.png">
<link rel="icon" type="image/png" sizes="256x256" href="/favicon/icon-256.png">
<link rel="icon" type="image/png" sizes="384x384" href="/favicon/icon-384.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon/icon-512.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/favicon/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180.png">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#ff0000">
<meta name="msapplication-TileColor" content="#ff0000">
<meta name="msapplication-TileImage" content="/favicon/ms-tile-144.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">

Come potete notare, il codice contiene anche il collegamento ai file: "manifest.json" e "browserconfig.xml".  Per le spiegazioni sulla funzione di questi file, potete consultare questa guida dettagliata: https://mobiforge.com/design-development/adding-favicons-in-a-multi-browser-multi-platform-world
Per completezza, riporto, di seguito, un esempio del contenuto che questi file devono avere per rispettare le norme.

Contenuto del file manifest.json:
{"name": "SilvanaSites",
"short_name": "SilvanaSites",
"icons": [
{
"src": "/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"}

Contenuto del file browserconfig.xml:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/favicon/mstile-70x70.png"/>
<square150x150logo src="/favicon/mstile-150x150.png"/>
<square310x310logo src="/favicon/mstile-310x310.png"/>
<wide310x150logo src="/favicon/mstile-310x150.png"/>
<TileColor>#23cefd</TileColor>
</tile>
</msapplication>
</browserconfig>


Nel caso mancassero delle icone nelle misure che ho indicato negli esempi, vi suggerisco anche questo tool online che genera icone in formato .png e in tutte le dimensioni: http://appiconmaker.co.

In pratica, quindi, quello che dovete fare è preparare tutte le icone e i file che vi servono, utilizzando i programmi indicati secondo le vostre esigenze. Racchiudere tutto in una cartella nella root del vostro sito e inserire i collegamenti ad ogni file nella home page e nelle pagine che ritenete. Attenzione ad indicare correttamente il percorso di ogni file.


Aiuta il sito! Condividi questa pagina su..

Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Elenco argomenti della guida:
Torna alla pagina principale:Creare un sito da zero ->>


E molto altro ancora se leggi:
Tutti gli argomenti