Il tuo blog ha una favicon personalizzata? In caso contrario, dovrebbe davvero. Oggi impareremo cos’è una favicon, perché ne hai bisogno e infine come creare una favicon per il tuo blog o sito web.
Vedo ancora tonnellate di blog senza uno, quindi se il tuo blog è uno di loro, fatevi un favore e crearne uno ora usando il tutorial qui sotto. Prometto che non ci vorrà molto ed è anche divertente!
Aggiornato: 11/4/2020
Divulgazione: Questo post può contenere link di affiliazione (indicato con un *) il che significa che potrei ricevere una piccola commissione se scegli di effettuare un acquisto con il mio link. Apprezzo il tuo supporto e non consiglierò mai prodotti che non sto da solo.
Prima di tutto, che cos’è una Favicon?
Una Favicon, pronunciata fave-icon, è l’abbreviazione di Preferiti Icona che è stato chiamato perché appaiono nella vostra lista di segnalibri sito web, in altre parole, i vostri siti web preferiti. Favicon sono una piccola versione del logomark che appare come un’icona scheda del browser, un’icona segnalibro, o un’icona di collegamento.
Le favicon sono un modo rapido per gli utenti di riconoscere il tuo sito web a prima vista. Dai un’occhiata alle mie schede del browser qui sotto. Riconosci la maggior parte dei siti web che ho aperto qui?
Perché è necessario creare una Favicon?
Quando non assegni una favicon personalizzata al tuo blog o sito web, viene assegnata un’icona generica o nessuna icona. Nel peggiore dei casi, il tuo blog utilizza la favicon della tua società di hosting. Nella migliore delle ipotesi, ogni browser assegna la propria cosa per voi: Chrome aggiunge un piccolo globo (vedi immagine sopra), Safari aggiunge la prima iniziale di URL del tuo sito web in una scatola grigia (vedi immagine sotto), e Firefox non aggiunge nulla. In entrambi i casi, parlare di noioso!
Guarda di nuovo le schede del browser sopra. Avere icone riconoscibili rende facile fare clic avanti e indietro rapidamente tra i siti web non è vero? Se salvi un sito Web nei tuoi segnalibri, vedrai anche la favicon nell’elenco dei segnalibri. Questo lo rende facile trovare rapidamente quello che stai cercando. Aiuta i tuoi lettori a trovare rapidamente il tuo blog nelle loro schede o segnalibri incorporando una favicon.
C’è un altro posto scommetto che non hai pensato a dove appaiono le favicon: se hai siti web che visiti frequentemente sul tuo telefono, puoi sempre aggiungerli alla schermata iniziale del tuo telefono come scorciatoia. Se i tuoi lettori amano visitare spesso il tuo sito, potrebbero voler aggiungere una scorciatoia dalla schermata iniziale in modo da volerli sicuramente avere un’icona dall’aspetto piacevole per distinguersi dalle altre icone delle app che hanno già aggiunto.
Ed ecco una nuova scheda di Safari. Immagina la scorciatoia del tuo sito web qui. Non vuoi che il tuo blog sia rappresentato da un’icona grigia noiosa come l’icona “C” qui sotto?
Come progettare una Favicon per il tuo blog
Alcune regole di progettazione per la creazione di una Favicon
Innanzitutto, parliamo di alcune best practice per la progettazione della tua favicon.
- La tua favicon dovrebbe essere visibile e immediatamente riconoscibile
Il modo migliore per rendere riconoscibile la tua favicon è usare il tuo logo come punto di partenza. Anche se il tuo blog non è ancora super famoso, va bene. Utilizzando elementi di design coerenti e temi in tutto il vostro branding aiuterà a distinguersi dal resto e aiutare le persone alla fine riconoscere il vostro marchio.Qui ci sono un paio di opzioni per voi da considerare come si progetta la tua favicon:- il vostro logo o logomark
- più semplice variazione del logo
- un simbolo o icona che rappresenta il vostro marchio
- le iniziali (o solo la prima iniziale) della marca – assicurarsi che lo stile delle iniziali corrisponde al tuo iniziale del logo design e stile
- una semplice foto – ultimamente ho visto blogger usando le loro foto del profilo di creare una favicon
- la Tua favicon deve utilizzare un design molto semplice
Prendete una buona occhiata a le favicon tuo browser schede a destra ora. Cosa noti? Sono minuscoli! La favicon tipica viene visualizzata a 16 x 16 pixel. Per questo motivo, è importante assicurarsi di utilizzare una versione molto semplificata del vostro logo o elemento di branding. La grafica dettagliata ed elaborata non si adatta bene a dimensioni così ridotte. Molto probabilmente sembreranno un pasticcio sfocato. - Assicurati che la tua favicon contrasti bene con sfondi chiari e scuri
A seconda delle preferenze dei tuoi lettori, le loro schede del browser possono essere bianche, nere, chiare o grigio scuro. Per questo motivo, ti consigliamo di fare in modo di creare una favicon con colori che contrastano bene su entrambi gli sfondi chiari e scuri.Alcune favicon hanno sfondi trasparenti e funzionano perché i loro colori contrastano bene su qualsiasi sfondo. Se la grafica è troppo chiara o troppo scura, può essere utile aggiungere un cerchio o un quadrato di colore solido dietro la grafica o il logo per farlo risaltare ed essere leggibile su qualsiasi scheda colorata. - Guarda le schede del browser per l’ispirazione
Fai clic sul Web e guarda le favicon utilizzate sui tuoi siti Web preferiti. Si noti se lavoreranno su sfondi chiari o scuri. La grafica ha uno sfondo trasparente o è su un quadrato o un cerchio colorato?
Favicon Inspiration
Favicon che usano la trasparenza
Notate come queste icone possono risaltare su uno sfondo scuro o chiaro, tranne che per l’ultimo, ‘Say Yes.’Quello avrebbe dovuto essere posto su un quadrato bianco. Ed è un po ‘ difficile da dire, ma la quarta icona, il fiore di loto in realtà ha un contorno nero molto fine. In questo modo puoi vederlo facilmente anche se è visualizzato su schede di colore chiaro.
Favicon che utilizzano uno sfondo colorato
Queste favicon sono state progettate con uno sfondo quadrato o arrotondato per garantire che siano chiaramente visibili su entrambe le schede scure e chiare.
Favicon che usano le iniziali
Alcune di queste icone iniziali usano un backround colorato, altre ne usano uno trasparente. In entrambi i casi, assicurarsi che sia leggibile.
Favicon utilizzando una foto del profilo
Utilizzando una foto del profilo sembra essere una nuova tendenza che sta prendendo piede. Se si va questa strada, assicurarsi di utilizzare la stessa foto del profilo in tutti i profili online in modo che sia immediatamente riconoscibile.
Come creare una Favicon per il tuo blog
Crea un file Favicon Passo dopo passo
- Crea la grafica in un editor di immagini
Utilizzando un editor di immagini come Photoshop (iscriviti per la prova gratuita)*, Pixlr, BeFunky o Canva,* crea il tuo file favicon a 512 x 512 pixel. Anche se viene visualizzato a soli 16×16 nelle schede del browser, verrà visualizzato anche a dimensioni più grandi in alcune delle altre applicazioni che ho menzionato sopra. - Anteprima della tua Favicon in dimensioni ridotte
Se hai finito di creare una favicon grafica, riduci l’immagine fino a quando la tua grafica diventa minuscola, circa la dimensione delle favicon che vedi nel tuo browser. È ancora leggibile? Ha senso? Se lo fa, grande, passare al passo successivo. - Salva il file
Per prima cosa, salva il tuo grafico come file modificabile nel tuo programma software in modo da poter tornare indietro e perfezionarlo se necessario.Quindi, salvarlo come file PNG. - Genera una Favicon.File ico
Usa un generatore di favicon per convertire il tuo file PNG in un file ICO. Questo passaggio è necessario poiché alcuni browser leggeranno solo i file ICO.
Alternative per progettare il proprio da zero
Se si desidera un modo semplice e veloce per creare un testo o iniziali favicon, utilizzare il testo > ICO favicon generator. Ho rapidamente creato questo per DYOB:
È inoltre possibile utilizzare l’Emoji > ICO favicon generator se si vuole veramente rendere più facile su se stessi. 
Infine, aggiungi la tua nuova Favicon al tuo blog o sito web
WordPress
Il modo più semplice per aggiungere una favicon in un blog WordPress self-hosted è accedere alla tua dashboard. Quindi vai su Aspetto > Personalizza, quindi fai clic sulla scheda Identità sito. Nella sezione Icona del sito, seleziona la tua nuova favicon.file ico da caricare.
E boom, il gioco è fatto, check it out nel tuo browser! Si noti che potrebbe essere necessario aggiornare un paio di volte e/o cancellare la cache nel browser prima che appaia.
Come aggiungere una favicon a un WordPress.com blog.
Squarespace
È molto facile aggiungere una favicon anche a Squarespace.
Blogger
Accedi al tuo blog e fai clic su Impostazioni nella colonna di sinistra. Quindi fare clic su Favicon nella sezione Base. Quindi, carica la tua favicon.file ico, salva e boom!
Prova la tua nuova Favicon
Se vuoi testare l’aspetto della tua favicon in varie piattaforme e impostazioni, usa questo Checker Favicon. Se desideri modificare il modo in cui le tue icone appaiono in una qualsiasi delle piattaforme, ad esempio iOS (iPhone), puoi utilizzare il generatore per ottimizzarle per ogni impostazione. Poi basta seguire le istruzioni per aggiungerli tutti al tuo blog.
Hai appena imparato come creare una Favicon
Congratulazioni! Quando si progetta il proprio blog, si vuole fare in modo che non lasciare fuori tutti i dettagli, anche quelli più piccoli. L’aggiunta di una favicon personalizzata non solo aiuta i tuoi lettori a individuare rapidamente il tuo blog nelle loro schede o segnalibri, ma dimostra che ti interessa mantenere il tuo marchio coerente.
Ora è il tuo turno
Fammi sapere nei commenti se hai domande su come creare una favicon o se hai bisogno di aiuto per identificare un tipo di favicon da creare per il tuo marchio. In caso contrario, si prega di condividere la tua favicon con noi nei commenti!
E se ti è piaciuto questo tutorial, per favore condividilo facendo clic su una delle icone sotto la mia firma!
Questo post è stato originariamente pubblicato su 8/14/2013 e aggiornato su 2/11/2015, poi di nuovo su 11/4/2020.
Ehi amico, vuoi cose di design fai-da-te gratis?
Ho un’intera libreria di beni GRATUITI solo per te! Unisciti ai 10.000 + altri e ottenere l’accesso immediato ora!