Favicon, Apple Touch Icons, Browsers icons

Visita anche Risorse per i webmaster
archivio di risorse per la creazione di pagine web
Sommario:
Questa pagina è parte della guida Come creare un sito da zero

La Favicon

La "favicon" è quella piccola icona che può apparire in questi contesti: 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):

dynamicdrive.com/favicon/


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

https://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.

Per implementare la favicon con estensione png, si usa questo codice:
<link rel="icon" type="image/png" href=" /favicon.png">

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.

Implementare la favicon senza codice in tutte le pagine

Se siete certi di volere la stessa favicon su ogni pagina del sito, potete implementarla caricando il file con il nome favicon.ico nella directory principale del dominio. Il nome deve essere quello e tutto in lettere minuscole, estensione compresa.
Il metodo funziona con la maggior parte dei browser, ma non con tutti.

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):
https://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 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="/img/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/favicon-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<link rel="manifest" href="/favicon/site.webmanifest.json">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff"&

Il meta tag theme-color suggerisce un colore che i browser mobili dovrebbero utilizzare per personalizzare la visualizzazione della barra superiore della pagina, o dell'interfaccia utente circostante. Se specificato, l'attributo content deve contenere un <color> CSS valido in formato HEX.

manifest.json e browserconfig.xml

Come potete notare, il codice contiene anche il collegamento ai file: "manifest.json" e "browserconfig.xml".
Nel file manifest.json, è essenziale fornire il colore del tema.
Per una spiegazione dettagliata sulla funzione del file manifest.json, potete consultare questa guida:
https://web.dev/articles/add-manifest

NOTA: se le icone indicate nel file manifest per la web app hanno un'immagine diversa da quelle generali del sito, dovete cancellare la apple-touch-icon, che sovrascriverebbe le icone impostate per la web app sui dispositivi Apple.
Per un semplice sito amatoriale e se non ci sono esigenze particolari si può omettere il file manifest e limitarsi all'implementazione delle altre icone.
Per completezza, riporto, di seguito, un esempio di file manifest.json costruito per il mio sito web.

Esempio di file manifest.json:
{"name":"La chiave nel pozzo",
    "short_name":"La chiave nel pozzo",
    "description": "Le risposte semplici",
    "id": "/",
    "start_url": "/index.html",
    "scope": "/",
    "display": "standalone",
    "theme_color":"#ffffff",
    "background_color":"#ffffff",
    "icons": [
    {
     "src":"/img/favicon/android-chrome-192x192.png",
     "sizes":"192x192",
     "type":"image/png"
    },
    {
        "src":"/img/favicon/android-chrome-256x256.png",
        "sizes":"256x256",
        "type":"image/png"
    },
    {
        "src":"/img/favicon/android-chrome-512x512.png",
        "sizes":"512x512",
        "type":"image/png"
    },
    {
      "src": "/img/favicon/maskable_icon.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
 ],
    "description": "La chiave nel pozzo",
      "screenshots": [
        {
          "src": "/img/favicon/screen-home1.png",
          "type": "image/png",
          "sizes": "540x720",
          "form_factor": "narrow"
        },
        {
          "src": "/img/favicon/screen-home2.jpg",
          "type": "image/jpg",
          "sizes": "720x540",
          "form_factor": "wide"
        }
      ]
    }

Il browserconfig.xml รจ un file XML che viene essere utilizzato per specificare le icone dei riquadri per Microsoft Windows.
Maggiori informazioni sul file browserconfig
Esempio di 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 alcune icone delle dimensioni che ho indicato negli esempi, vi suggerisco anche questo tool online che genera icone in formato .png e in tutte le dimensioni:
https://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.

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.


Continua con
Leggi tutto