Inserire una favicon con HTML

Se desiderate includere una favicon con HTML, avete due opzioni. La cosa più sensata, in ogni caso, è fare riferimento all’icona tramite un elemento HTML. Un generatore è il modo migliore per creare l’icona appropriata.

Una favicon (combinazione dei due termini “favorite” (preferito) e “icon” (icona)) è la piccola icona che, ad esempio, visualizzate ora come una “I” bianca su sfondo blu in cima alla scheda. 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. Potete scoprire tutto quello che c’è da sapere su questa utile icona nella nostra guida completa: “Cos’è una favicon?”.

Prima di poter inserire una favicon con HTML, dovrete crearla. Potete trovare consigli preziosi a questo proposito nell’articolo citato sopra. Dovete assicurarvi che l’immagine funzioni in bassa e alta risoluzione e che sia immediatamente riconoscibile come parte del vostro marchio. Le risoluzioni appropriate per la maggior parte dei browser sono 16 x 16 o 32 x 32 pixel e l’immagine deve essere salvata possibilmente in formato .ico, .gif o .png. Tuttavia, il modo più semplice per creare una favicon è usare un buon generatore di favicon per HTML.

Il modo più sicuro per includere la vostra favicon è quello di fare riferimento a essa tramite HTML. Per farlo, caricate l’icona nella directory principale del vostro dominio. Qui vi spieghiamo passo per passo come integrare un’icona nel vostro sito web.

Primo passaggio: per prima cosa create un’icona nel formato corretto. Assicuratevi che l’immagine abbia le giuste dimensioni per una favicon, sia il più contrastata possibile e funzioni anche a bassa risoluzione.

Secondo passaggio: caricate l’icona nella directory principale del dominio.

Terzo passaggio: ora richiamate l’intestazione del vostro sito web e inserite il seguente codice:

Tuttavia, questo metodo funziona solo se includete un’icona nel formato .ico sul vostro sito web. Per il formato .png, il codice appropriato è il seguente:

Se avete creato la vostra favicon per l’integrazione in HTML nel formato .gif, utilizzate questo codice:

Se desiderate 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, salvatela con il nome favicon.ico e poi posizionatela nella directory principale del vostro dominio. Questo metodo funziona solo se si specifica correttamente il nome. Prestate 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.

L’inserimento di una favicon comporta numerosi vantaggi. Il vostro sito web avrà un aspetto più professionale, verrà trovato più rapidamente e presenterà un design più rigoroso. Tuttavia, la piccola icona è ancora più importante in termini di ottimizzazione per i dispositivi mobili come smartphone o tablet. I dispositivi mobili hanno bisogno di una favicon per salvare un sito web con un’icona touch sulla schermata iniziale. A tal fine, il dispositivo utilizza il file immagine memorizzato. Tuttavia, poiché esistono differenze tra i vari provider, è necessario creare diversi formati quando si integra la favicon:

• Un file .ico, necessario in particolare per i browser più vecchi. Il nome del file in questo caso è favicon.ico.
• Un file .png per i browser più recenti, con il nome favicon.png.
• Un’icona Apple touch per Android Chrome e iOS Safari. Ha un formato di 128 x 128 pixel.

Il modo più semplice per creare tutti i file è utilizzare un programma appropriato come il Favicon Generator di IONOS.