Saldi PRIMAVERA FINO AL 87 % DI SCONTO

+ Dominio GRATUITO per piani annuali

L'affare termina tra:

00 :

13 :

24 :

32

Come Creare una Favicon

Primo piano di favicon su un laptop

Non dovresti dimenticare l’umile favicon quando crei un brand, un piccolo dettaglio che farà risaltare la tua attività nella mente dei tuoi clienti.

Creare favicon richiede uno sforzo minimo.

Quindi, anche se puoi avviare il tuo sito web senza una di esse, non c’è davvero alcun motivo per non includerne una nella tua lista di cose da fare per il branding.

Quindi cos’è una favicon?

Le favicon sono le piccole icone visualizzate nelle schede e negli elenchi dei preferiti o segnalibri su browser come Chrome, Mozilla e Safari.

La parola “favicon” è una versione abbreviata di “icona preferita”, ma ha anche altri nomi:

  • Icona di collegamento
  • Icona del sito
  • Icona segnalibro

Comunque, significano tutti la stessa cosa.

Entrando in vita nel lontano 1999, le favicon sono state introdotte agli utenti di internet con il lancio di Internet Explorer 5.

Le aziende di solito utilizzano una versione ridotta del loro logo come favicon, ridotta a 16×16 pixel.

Vengono utilizzati come utili significanti visivi per gli utenti, in modo che possano navigare facilmente su più siti web.

Supponiamo che tu stia acquistando vestiti nuovi. Immagina che le dozzine di schede che hai aperto sul tuo browser rappresentino un centro commerciale.

Quello che puoi vedere è una fila di piccoli loghi, in modo che mentre confronti articoli e prezzi, è facile passare da un negozio all’altro.

Certo, ci sono meta titoli accanto a ciascuna favicon che potresti leggere, ma chi ha tempo per farlo costantemente?

Come creare una favicon

Primo piano di un uomo che disegna

Ora che sai cos’è una favicon, probabilmente ne vorrai una per il tuo sito web.

È uno dei modi più semplici per rendere la tua attività memorabile per gli utenti di internet e ti darà anche un vantaggio dall’aspetto professionale.

E se vuoi sapere come creare favicon, non c’è molto da fare.

Hai anche delle opzioni. Vuoi farlo da solo o avere un favicon generator che fa il lavoro al tuo posto?

Poiché è un’abilità utile da apprendere, esaminiamo innanzitutto i passaggi da eseguire per assegnare manualmente una favicon al tuo sito.

1. Crea un’immagine

Quando si tratta di trovare un’icona adatta per un sito web, il logo del brand è il posto più ovvio in cui cercare.

Ma puoi scegliere qualsiasi immagine per rappresentare il tuo sito. Assicurati solo che:

  • Sia coerente con il tuo brand. Usa gli stessi colori, caratteri tipografici e forme.
  • Si distingua. I tuoi clienti dovrebbero essere in grado di ricordare facilmente l’immagine.
  • Non copi nessun’altra icona o immagine. Non essere scambiato per un altro brand.

Puoi progettare un’immagine favicon utilizzando un editor come Photoshop o un software open source come Canva. Se il budget non è un problema, potresti persino assumere un designer professionista.

Ci sono alcuni elementi di design che dovrebbero essere completamente evitati se vuoi che la tua favicon abbia un aspetto elegante, professionale e memorabile.

Assicurati di non cadere in errore con queste regole non dette della favicon:

  • Niente foto. Alla dimensione che la tua favicon deve avere per adattarsi a una scheda del browser, nessuna foto sarà abbastanza chiara per avere un bell’aspetto o persino memorabile da remoto.
  • Nessuna parola. Potresti sicuramente includere una, due o anche tre lettere nella tua favicon, soprattutto se fa parte del tuo logo, ma intere parole? Dimenticalo.
  • Nessuna spazzatura di marketing. Sebbene sia ottimo per il branding e la coerenza delle immagini, una favicon non è il luogo per strumenti promozionali come banner “nuovi” o “saldi”.

Usa la dimensione corretta

Mentre le schede del browser visualizzano le favicon in 16×16 pixel, potrebbero anche essere visualizzate su un sito fino a 32×32 o addirittura 64×64 pixel.

Assicurati che la tua favicon abbia un aspetto migliore qualunque sia il sito in cui si trova e creala in un formato più grande. Può poi essere sempre ridotta a 16×16 pixel.

Usa il formato corretto

Sebbene in precedenza le favicon dovevano essere salvate come .ico, ora vengono accettati anche i file .png. Puoi utilizzare strumenti come faviconer.com per convertire i file nel formato .ico.

Se vuoi che la tua favicon venga visualizzata come un’icona di una scheda bloccata di Safari, dovrai salvarla come file .svg.

Usa lo stile corretto

Vale la pena ricordare che le favicon non vengono visualizzate solo nelle schede del browser e negli elenchi di segnalibri. Sarà anche visibile su dispositivi wireless e menu di scelta rapida.

Con questo in mente, crea due versioni della tua immagine favicon: una con riempimento a tinta unita e una trasparente. In questo modo, puoi garantire che avrà un bell’aspetto ovunque venga visualizzato.

2. Carica la tua immagine sul tuo sito

Uomo che lavora al laptop con un cane

Una volta che hai un’icona pronta per l’uso, il passaggio successivo è relativamente semplice.

Rinomina il tuo file di immagine .png o .ico in “favicon” e carica il file nella directory principale del tuo sito web.

Se hai creato un file .png, probabilmente dovrai caricare più file per soddisfare tutti i requisiti di dimensione.

È qui che la conversione della tua favicon in un formato .ico è vantaggiosa. Un file .ico può contenere più di un’icona, il che significa che le tue varie dimensioni possono essere caricate sul tuo sito come una sola.

3. Aggiungi un codice HTML di base

È probabile che non sia necessario aggiungere alcun codice per aiutare i browser moderni a trovare la tua favicon. La maggior parte di loro rileverà automaticamente favicon.png o favicon.ico e lo imposterà come icona.

Detto questo, vale la pena aggiungere un codice di base per garantire che l’icona sia visibile da qualsiasi browser.

Puoi implementare un codice HTML “link rel = shortcut icon” aprendo il file header.php e digitandolo sotto o dopo il tag </head>:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

Ricorda solo di cambiare il tipo di estensione del file a seconda del formato in cui hai salvato la favicon.

4. Rendilo versatile

Cartello all'esterno del logo Apple

Un numero crescente di transazioni di e-commerce avviene su dispositivi mobile, quindi se puoi ottimizzare il tuo sito per l’uso wireless, dovresti assolutamente farlo.

Anche se non tutti nel mondo possiedono un dispositivo Apple, dovrai creare un’icona Apple Touch se vuoi che la tua favicon funzioni correttamente per questi utenti.

Le icone Apple Touch rappresentano i siti web che sono stati salvati nella schermata iniziale su un telefono o tablet Apple.

Non tutti i siti hanno ottimizzato le proprie favicon per l’utilizzo con Apple Touch. In questi casi, quando un utente salva l’URL del sito nella schermata iniziale, viene visualizzata una versione in miniatura della pagina di destinazione.

Ma se vuoi sembrare super elegante, puoi creare e caricare un file icona appositamente progettato per l’uso su un dispositivo Apple Touch.

Per cominciare, il file deve essere fornito in formato .png. È anche meglio creare l’icona fino a 180×180 pixel, per assicurarti che abbia un aspetto eccezionale su qualsiasi numero di dimensioni dello schermo.

Infine, vale la pena aggiungere un codice HTML separato al tuo sito web per le tue icone Apple Touch. La codifica sarebbe simile a questa:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Come renderla ancora più semplice

Spero che ricorderai la parte di questo articolo che menzionava che ci sono due opzioni per creare favicon per il tuo sito.

E forse ti starai chiedendo come la seconda opzione potrebbe essere più semplice della prima – dopotutto, era abbastanza semplice.

Entra nel costruttore del sito web.

Progettato per semplificarti la vita in ogni modo, almeno quando si tratta di creare un sito di successo, un buon costruttore di siti web viene fornito con un favicon generator.

Con uno strumento come il generatore di favicon di Zyro, ti vengono fornite tutte le informazioni necessarie per sapere come creare una favicon senza i passaggi aggiuntivi di programmazione, conversione e ricerca di un designer che svolga la parte più divertente del lavoro.

Quindi, esaminiamo i passaggi per capire come creare una favicon e caricarla sul tuo sito con uno strumento, utilizzando Zyro come esempio.

Screenshot della home del generatore di favicon Zyro

1. Scegli un template

Puoi scegliere da uno dei template preimpostati di Zyro o caricare la tua immagine personalizzata.

2. Personalizza alla perfezione

Utilizza gli strumenti a tua disposizione per modificare l’immagine o il colore, il layout e il testo del template.

3. Scarica e vai

Hai finito: è ora di scaricare la tua favicon come file .png o .ico e pubblicarla sul tuo sito.

Quando si tratta di caricare la favicon generata sul tuo sito Zyro, non c’è lavoro di programmazione, nessuna conversione necessaria e servono solo pochi click.

Basta andare all’editor di Zyro. Se hai più siti web, scegli il sito su cui vuoi caricare una favicon.

Seleziona Impostazioni generali dal menu a discesa delle impostazioni, individua Favicon ed espandi le opzioni disponibili.

Vai a Sfoglia file per trovare l’immagine favicon che hai generato con lo strumento di Zyro e fai doppio click per caricarla.

Successivamente, controlla l’anteprima di come apparirà la tua icona sui browser.

Se sei soddisfatto, fai click su Salva modifiche e la tua favicon verrà caricata.

Scritto da

Avatar dell'autore

Michela

Michela si focalizza sulle tendenze del marketing digitale e sull'aiutare le aziende ad avere successo online, con un particolare interesse per la creazione di siti web e di e-commerce. Nel suo tempo libero le piace sedersi davanti un buon libro e ascoltare musica.

Unisciti alla conversazione

L'indirizzo email non verrà pubblicato. Tutti i campi sono obbligatori.