Se desideri integrare una favicon nel tuo sito web, hai due possibilità: puoi includere il file immagine direttamente tramite HTML oppure usare soluzioni automatizzate tramite CMS o manifest. La scelta più sensata è un riferimento HTML nell’elemento <head> della pagina, oltre all’integrazione tramite un file manifest.json.

Cosa sono le favicon e per cosa vengono utilizzate?

Una favicon (combinazione dei due termini “favorite” (preferito) e “icon” (icona)) è la piccola icona che, ad esempio, visualizzi ora nella scheda di un browser. La piccola icona non solo garantisce un alto valore di riconoscimento nelle schede, ma viene anche visualizzata nella barra degli strumenti, nei segnalibri, 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 certificato SSL inclusi

Come si crea una favicon?

Prima di poter inserire una favicon con HTML, dovrai crearla. Devi assicurarti che l’immagine funzioni in bassa e alta risoluzione e che sia immediatamente riconoscibile 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 compatibilità possibile, dovresti inoltre generare più versioni:

Scopo d’uso Formato Dimensione consigliata Nota
Browser classici .ico 16×16 px o 32×32 px È richiesta soprattutto dai browser più datati
Browser moderni .png 32×32 px o 64×64 px Trasparenza possibile, rappresentazione senza perdita
Apple Touch Icon .png 180×180 px Viene utilizzata quando viene aggiunta alla schermata Home su iOS
Icona del manifest Android .png 192×192 px o 512×512 px Integrata in manifest.json, necessaria per le PWA e i collegamenti rapidi Android

Integrare una favicon con HTML

Il modo più sicuro per includere la tua favicon è quello di fare riferimento a essa tramite HTML. Per farlo, carichi l’icona nella directory principale del tuo dominio o in una sottocartella (ad esempio in /assets/icons/). Successivamente, 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 è considerato 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 è necessario scrivere alcun codice, ma è sufficiente creare il file e assegnargli un nome corretto. Una volta creata l’icona nel formato corretto, salvala con il nome favicon.ico e poi posizionala nella directory principale del tuo dominio. Questo metodo funziona solo se si specifica correttamente il nome. Presta particolare attenzione 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 riconoscono questo modo di procedere. In secondo luogo, questa procedura richiede che anche tutti i sottodomini creati sotto il dominio principale vengano visualizzati 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 → Personalizza → Denominazione del sito → Icona del sito e caricarla. WordPress crea automaticamente più dimensioni e inserisce il codice nella sezione <head>.
  • TYPO3 / Joomla / Drupal: tramite le impostazioni del template o del tema.
  • CMS headless (ad esempio Strapi, Contentful): inserisci manualmente nel template del front end o in manifest.json.

La maggior parte dei CMS salva la favicon in un percorso centrale e si occupa autonomamente dell’integrazione: quindi devi occuparti solo dei file immagine.

Integrazione tramite manifest.json (per PWA e Android)

Una web app progressiva (PWA) è un’applicazione web sviluppata con moderne tecnologie web come JavaScript, HTML5 e CSS3 e offre un’esperienza 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 dispositivi Android, il semplice header HTML non è sufficiente. Al suo posto, si integra un file aggiuntivo chiamato manifest.json. Viene referenziato nella sezione <head> del sito web, è strutturato in formato JSON (JavaScript Object Notation) e contiene metadati importanti sull’applicazione. 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 background e le autorizzazioni necessarie: in pratica tutto ciò che aiuta il browser a presentare la web app come un’applicazione 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 garantisce che la tua icona venga visualizzata correttamente 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 principale