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.

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, 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?”.

Come si crea 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.

Consiglio

Il modo più semplice per ottenere un’icona ottimale è il Favicon Generator di IONOS. Create in pochi clic un’icona adatta e compatibile con tutti i browser più comuni. Il servizio è gratuito!

Integrare una favicon con 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:

<link rel="icon" type="image/vnd.icon" href=" (IL PERCORSO/IL NOME ESATTO DEL FILE.ico">

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:

<link rel="icon" type="image/png" href=" (IL PERCORSO/IL NOME ESATTO DEL FILE.png">

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

<link rel="icon" type="image/gif" href=" (IL PERCORSO/IL NOME ESATTO DEL FILE.gif">

Inserire una favicon senza 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.

Consiglio

Vi seguiamo nella creazione della perfetta presenza per il vostro marchio. Nella nostra Digital Guide troverete una preziosa guida per la creazione di siti web. Abbiamo anche raccolto suggerimenti sull’ interfaccia grafica (UI) perfetta. Anche se volete sapere cosa contraddistingue un buon logo o quale software potete usare per creare un logo, troverete quello che state cercando.

Incorporazione di favicon per siti web responsive

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.

Consiglio

Il CMS più diffuso al mondo offre diverse possibilità se desiderate utilizzare una favicon. Potete trovare tutto quello che c’è da sapere al riguardo e una guida pratica nel nostro articolo: “Favicon su WordPress: come aggiungere la favicon in tre modi diversi”.

Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.