Se desideri integrare una favicon nel tuo sito web, hai due pos­si­bi­li­tà: puoi includere il file immagine di­ret­ta­men­te tramite HTML oppure usare soluzioni au­to­ma­tiz­za­te tramite CMS o manifest. La scelta più sensata è un ri­fe­ri­men­to HTML nell’elemento <head> della pagina, oltre all’in­te­gra­zio­ne tramite un file manifest.json.

Cosa sono le favicon e per cosa vengono uti­liz­za­te?

Una favicon (com­bi­na­zio­ne dei due termini “favorite” (preferito) e “icon” (icona)) è la piccola icona che, ad esempio, vi­sua­liz­zi ora nella scheda di un browser. La piccola icona non solo ga­ran­ti­sce un alto valore di ri­co­no­sci­men­to nelle schede, ma viene anche vi­sua­liz­za­ta nella barra degli strumenti, nei se­gna­li­bri, negli elenchi delle app e nei risultati dei motori di ricerca.

Crea il tuo sito web
Scopri le nuovi funzioni IA di MyWebsite
  • Editor facile e intuitivo con supporto IA
  • Immagini e testi d'effetto in pochi secondi
  • Dominio, indirizzo e-mail e cer­ti­fi­ca­to SSL inclusi

Come si crea una favicon?

Prima di poter inserire una favicon con HTML, dovrai crearla. Devi as­si­cu­rar­ti che l’immagine funzioni in bassa e alta ri­so­lu­zio­ne e che sia im­me­dia­ta­men­te ri­co­no­sci­bi­le come parte del tuo marchio. Per questo motivo, molte favicon si basano su regole che valgono anche per la creazione di loghi. Per garantire la migliore com­pa­ti­bi­li­tà possibile, dovresti inoltre generare più versioni:

Scopo d’uso Formato Di­men­sio­ne con­si­glia­ta Nota
Browser classici .ico 16×16 px o 32×32 px È richiesta so­prat­tut­to dai browser più datati
Browser moderni .png 32×32 px o 64×64 px Tra­spa­ren­za possibile, rap­pre­sen­ta­zio­ne senza perdita
Apple Touch Icon .png 180×180 px Viene uti­liz­za­ta quando viene aggiunta alla schermata Home su iOS
Icona del manifest Android .png 192×192 px o 512×512 px Integrata in manifest.json, ne­ces­sa­ria per le PWA e i col­le­ga­men­ti rapidi Android

Integrare una favicon con HTML

Il modo più sicuro per includere la tua favicon è quello di fare ri­fe­ri­men­to a essa tramite HTML. Per farlo, carichi l’icona nella directory prin­ci­pa­le del tuo dominio o in una sot­to­car­tel­la (ad esempio in /assets/icons/). Suc­ces­si­va­men­te, la colleghi nella sezione <head> della tua pagina.

<!—Favicon standard -->
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
<!-- Fallback per browser più datati -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
html

Il tipo MIME più datato image/vnd.icon è con­si­de­ra­to obsoleto: usa invece image/x-icon o image/png.

Inserire una favicon senza codice

Se desideri integrare una favicon con HTML, tuttavia, esiste anche un metodo molto più semplice. In questo caso, non è ne­ces­sa­rio scrivere alcun codice, ma è suf­fi­cien­te creare il file e as­se­gnar­gli un nome corretto. Una volta creata l’icona nel formato corretto, salvala con il nome favicon.ico e poi po­si­zio­na­la nella directory prin­ci­pa­le del tuo dominio. Questo metodo funziona solo se si specifica cor­ret­ta­men­te il nome. Presta par­ti­co­la­re at­ten­zio­ne all’uso completo delle lettere minuscole.

Tuttavia, integrare la favicon in questo modo con HTML presenta anche due svantaggi: in primo luogo, la maggior parte ma non tutti i browser ri­co­no­sco­no questo modo di procedere. In secondo luogo, questa procedura richiede che anche tutti i sot­to­do­mi­ni creati sotto il dominio prin­ci­pa­le vengano vi­sua­liz­za­ti con questa icona. Il metodo più sicuro è quindi quello descritto sopra.

Favicon nei CMS come WordPress o TYPO3

Nei moderni sistemi di gestione dei contenuti, la favicon viene di solito integrata dal back end.

Esempi:

  • WordPress: puoi inserire una favicon in WordPress. Ti basta andare su Aspetto → Per­so­na­liz­za → De­no­mi­na­zio­ne del sito → Icona del sito e caricarla. WordPress crea au­to­ma­ti­ca­men­te più di­men­sio­ni e inserisce il codice nella sezione <head>.
  • TYPO3 / Joomla / Drupal: tramite le im­po­sta­zio­ni del template o del tema.
  • CMS headless (ad esempio Strapi, Con­tent­ful): inserisci ma­nual­men­te nel template del front end o in manifest.json.

La maggior parte dei CMS salva la favicon in un percorso centrale e si occupa au­to­no­ma­men­te dell’in­te­gra­zio­ne: quindi devi occuparti solo dei file immagine.

In­te­gra­zio­ne tramite manifest.json (per PWA e Android)

Una web app pro­gres­si­va (PWA) è un’ap­pli­ca­zio­ne web svi­lup­pa­ta con moderne tec­no­lo­gie web come Ja­va­Script, HTML5 e CSS3 e offre un’espe­rien­za utente simile a quella di un’app nativa. Esempi noti sono i siti web di Pinterest, Google Maps o Spotify.

Per le PWA e i di­spo­si­ti­vi Android, il semplice header HTML non è suf­fi­cien­te. Al suo posto, si integra un file ag­giun­ti­vo chiamato manifest.json. Viene re­fe­ren­zia­to nella sezione <head> del sito web, è strut­tu­ra­to in formato JSON (Ja­va­Script Object Notation) e contiene metadati im­por­tan­ti sull’ap­pli­ca­zio­ne. Tra questi rientrano, tra l’altro, il nome, la versione e le icone dell’app. Inoltre, manifest definisce proprietà centrali come la modalità della schermata iniziale, gli script in back­ground e le au­to­riz­za­zio­ni ne­ces­sa­rie: in pratica tutto ciò che aiuta il browser a pre­sen­ta­re la web app come un’ap­pli­ca­zio­ne nativa.

<link rel="manifest" href="/manifest.json">
html

Testo di esempio del file manifest.json:

{
    "name": "My Website",
    "short_name": "Website",
    "icons": [
        {
            "src": "/assets/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}
json

Questo file ga­ran­ti­sce che la tua icona venga vi­sua­liz­za­ta cor­ret­ta­men­te quando la salvi nella schermata Home o installi la PWA, sia su Android sia nei browser moderni come Chrome, Edge o Firefox.

Vai al menu prin­ci­pa­le