Saltar al contenido

Come inserire una favicon nel proprio sito?

marzo 31, 2022

Cambiare la favicon di laravel

Siete riusciti a costruire un marchio e questo vi fa conoscere ai vostri clienti. Attuate buone strategie di vendita e avete un logo che cattura l’attenzione dei vostri visitatori – ottimo! Dopo tutto, il riconoscimento dei vostri clienti nuovi, attuali o potenziali è fondamentale per il successo del vostro business.

Tuttavia, ogni nuovo visitatore del tuo sito dovrebbe trovare facile riconoscere a prima vista che si tratta del “tuo sito”. Il riconoscimento costruisce la fiducia e la familiarità del marchio, entrambi aspetti chiave nella creazione del tuo sito web.

Questi programmi vi permettono di creare la vostra icona a partire da un’immagine. Cioè, convertire il tuo formato di icona da png, .gif o .jpg a .ico. Una volta generato, puoi facilmente scaricarlo e includerlo nel tuo sito web.

Se hai il tuo sito web costruito in WordPress, vedrai che cambiare la favicon è più facile di quanto sembri. Tutto quello che devi fare è creare un’immagine di dimensioni simili a quelle menzionate sopra e accedere a WordPress.

Sarai portato in un editor per personalizzare il tuo tema. Nella colonna di sinistra, seleziona “Header” > Site Identity e scorri verso il basso finché non vedi “Site Icon”. Seleziona “Change Image”, carica la tua icona e hai finito!

Come mettere un’icona in html

Usate <link rel=”icon”> e un’immagine ICO per aggiungere una favicon per il sito web in HTMLPossiamo usare l’immagine ICO per aggiungere la favicon a un sito web in HTML per scopi di retrocompatibilità. Quasi tutti i browser moderni supportano l’immagine PNG da usare come favicon. Per i browser come IE10 e le sue versioni precedenti, possiamo usare immagini ICO. Le immagini ICO hanno come estensione .ico. Possiamo usare strumenti come ConvertICO per convertire immagini PNG in ICO, per esempio, navigare sul sito ConvertICO e caricare il file favicon.png. Il sito web convertirà l’immagine in formato ICO e ci permetterà di scaricarla. Poi, usate il percorso dell’immagine nell’attributo href nel tag <link> come fatto nel primo metodo. Poi, possiamo vedere la favicon sulla pagina web.Esempio di codice:<head>

Esempi di favicon

Nel 2005, il W3C ha pubblicato alcuni consigli sulle favicon, in cui si consigliava di utilizzare il valore dell’icona per l’attributo rel (invece del valore dell’icona di collegamento utilizzato da Internet Explorer fino alla versione 8) e di indicare i diversi tipi di immagine utilizzando l’attributo type, come negli esempi seguenti:

Se un file favicon.ico è incluso nella cartella principale del sito web, i browser usano automaticamente quell’immagine come favicon per tutte le pagine del sito, senza bisogno di includere il tag <link>. Il tag <link> è necessario se vuoi usare altri formati di immagine, salvarla in altre cartelle o fare in modo che pagine diverse facciano riferimento a favicon diverse (dando valori diversi all’attributo href).

Icona per la scheda della pagina web

Uno degli aspetti principali quando si genera l’identità di una pagina web è, senza dubbio, includere una favicon all’interno del web. Questa piccola icona è molto importante per generare e aggiungere valore a un sito web.

Al giorno d’oggi, molti programmi di editing delle immagini permettono la creazione di file ico, png e gif che possono essere utilizzati per generare la favicon e utilizzarla in una pagina web. Quando questa nuova funzionalità è uscita, il formato accettato era solo ico, ma più tardi altri formati hanno cominciato ad essere accettati, essendo oggi il più diffuso il formato png. Dobbiamo solo creare un file vuoto nell’editor di immagini (Gimp, Photoshop, Illustrator…) e salvarlo (generalmente) come favicon.ico, favicon.png, favicon.gif con la risoluzione e il formato indicati nella sezione precedente e caricarlo sul server dove è ospitata la pagina web. È molto facile creare una favicon.

Per includere la Favicon nella nostra pagina web, dobbiamo solo includere una linea all’interno del <head></head> della nostra pagina web. A seconda del formato della favicon, la linea da includere sarà di una forma o di un’altra ma sono quasi simili.

Per offrire le migliori esperienze, utilizziamo tecnologie come i cookie per memorizzare e/o accedere alle informazioni del dispositivo. Il consenso a queste tecnologie ci consentirà di elaborare dati come il comportamento di navigazione o identificazioni univoche su questo sito. Il mancato consenso o la revoca del consenso può influire negativamente su determinate caratteristiche e funzioni.    Maggiori informazioni
Privacidad