# Inserire una favicon con HTML 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 `` della pagina, oltre all’integrazione tramite un file `manifest.json`. ## Cosa sono le favicon e per cosa vengono utilizzate? Una [favicon](https://www.ionos.it/digitalguide/siti-web/web-design/cose-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. ## 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](https://www.ionos.it/digitalguide/siti-web/web-design/creare-un-logo-quali-software-offrono-un-valido-aiuto/). 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 `` della tua pagina. ```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](https://www.ionos.it/digitalguide/hosting/blog/favicon-su-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 ``. - **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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/applicazioni-web-progressive-che-vantaggi-offrono/) (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 `` 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. ```html ``` Testo di esempio del file manifest.json: ```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" } ``` 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. This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/web-design/inserire-una-favicon/](https://www.ionos.it/digitalguide/siti-web/web-design/inserire-una-favicon/) for AI/LLM consumption.