Dopo molte, molte ore di duro lavoro sul tuo computer o laptop, sei finalmente pronto per lanciare quel sito Web perfetto, con l’URL perfetto e il layout perfetto e il logo perfetto, i caratteri perfetti e il …

Ti viene l’idea.

Ma hai davvero pensato a tutto?

Indipendentemente dallo scopo del tuo sito Web, dal blog all’azienda o oltre, è probabile che lo avvierai in un campo affollato di altri siti molto simili. Anche con un solido piano SEO e di marketing, c’è sempre la possibilità di perdersi in un continuo mix di siti Web.

Ecco perché è importante cercare tutti i possibili vantaggi e utilizzare gli strumenti per aiutarti a distinguere il tuo sito web.

In altre parole, è necessario estendere il marchio oltre le nozioni di base. Devi rendere il tuo sito web più credibile, aiutare a costruire il tuo marchio e molto altro.

Un modo per farlo è con una favicon.

Che cos’è un Favicon?

Che cos'è un Favicon?

Una favicon (pronuncia pronunciata – icone , abbreviazione di icone preferite) è quel piccolo logo che appare accanto a un indirizzo web (come google.com sopra). In genere, vedrai una favicon nel tuo browser o nella tua pagina dei segnalibri.

L’aggiunta di una favicon al tuo sito Web o negozio online aiuta a rafforzare il tuo marchio, separando il design del tuo sito Web da tutti gli altri che sono là fuori. Le Favicon aiutano a:

  • Rendi professionale il tuo sito web
  • Avere un sito facilmente riconoscibile
  • Distingua il tuo sito dalla concorrenza
  • Costruisci il marchio e la consapevolezza della tua azienda

In definitiva, è un piccolo emblema che può avere grandi implicazioni.

Prima delle favicon, era difficile distinguere i siti Web l’uno dall’altro nel browser. Se hai aperto 12 schede, sembravano tutte uguali . La prima favicon è stata creata per facilitare la navigazione tra più pagine Web, per identificare facilmente i siti da un elenco.

Quindi, come puoi fare una favicon?

Copriamo il tipo e le dimensioni dell’immagine per iniziare.

Che tipo di immagine e dimensioni dovrebbe essere un Favicon?

Mentre puoi creare la tua favicon usando tipi di immagine standard come GIF, JPG e PNG, non c’è garanzia che funzioneranno su tutti i browser. Ad esempio, alcune versioni precedenti di Internet Explorer, che molte persone usano ancora, potrebbero non visualizzare nessuno di questi formati quando si tratta di una favicon.

Nota per gli utenti Mac: al momento della stesura di questo documento, è necessaria un’estensione di terze parti per visualizzare le favicon nelle schede del browser Safari, sebbene vengano visualizzate negli elenchi dei segnalibri. Tuttavia, il nuovo macOS Mojave, che verrà rilasciato entro la fine dell’anno, lo correggerà con un’opzione per attivare o disattivare la funzionalità in Safari> Preferenze> Impostazioni> Schede.

Quindi, per evitare il problema, ti consigliamo di utilizzare il formato Microsoft ICO che funziona su tutti i browser. Il formato ICO consente inoltre di salvare la favicon in varie dimensioni in un unico file. Se devi usare un formato diverso, ti suggeriamo un PNG come il miglior tipo di immagine successivo.

Questo è importante perché vuoi essere sicuro che la favicon apparirà correttamente quando viene visualizzata in una scheda, un segnalibro o un elenco di preferiti o se un utente lo trascina sul desktop o salva sulla schermata principale dei dispositivi mobili.

In genere, si consiglia di salvare la favicon nelle seguenti dimensioni:

  • 32 × 32 – Standard per tutti i browser.

  • 120 × 120 – iPhone (standard)

  • 152 × 152 – iPad e iPad Mini

  • 167 × 167 – iPad Pro

  • 180 × 180 – iPhone (retina)

  • 192 × 192 – Android

  • 310 × 310 – Windows 10 e Microsoft Edge

Come si crea un Favicon?

È abbastanza semplice In effetti, ci sono un sacco di strumenti online gratuiti che eseguono l’intero processo per te in pochi secondi.

Copriamo i migliori generatori di favicon in giro (tutti sono gratuiti).

17 migliori generatori di favicon gratuiti

1. Favikon

Favikon - Generatore Favicon

Forse il generatore più semplice della nostra lista, con Favikon devi semplicemente caricare, ritagliare e scaricare. È possibile creare un file ICO o PNG per più applicazioni.

In tre passaggi hai finito di creare una favicon per il tuo sito Web o blog e puoi salvarla come .ico o .png. Cosa significa questo? Puoi scaricarlo sia in dimensioni grandi che piccole.

2. Freefavicon

freefavicon - Generatore Favicon

Favicon gratuito offre agli utenti la possibilità di caricare un’immagine e modificarla in base alle caratteristiche desiderate. È gratuito e supporta una grafica semplice.

Questo servizio a doppio scopo offre il metodo di caricamento standard oppure puoi usare il loro strumento per creare icone da zero. Sebbene non sia il costruttore di icone più completo che abbiamo mai visto, funziona bene con icone semplici fino a sei dimensioni.

3. Logaster

Logaster - Generatore Favicon

Se non hai già un logo, ma vuoi creare una favicon, Logaster dovrebbe essere la tua prima scelta. Fornisce ai proprietari di siti Web e blog la possibilità di creare un logo e convertirlo in una favicon. Invece di caricare o modificare un’immagine, Logaster ti guida nel processo di creazione di un logo reale inserendo il nome della tua azienda o del tuo sito web e quindi scegliendo un’attività. Da lì viene prodotto il tuo logo che include anche un file favicon per il tuo sito web.

4. Favicon.cc

Favicon.cc - Generatore Favicon

Ci piace molto il servizio Favicon.cc , in quanto è uno degli strumenti favicon più avanzati nella nostra lista.

Non solo puoi importare un’immagine di dimensioni fino a 5 MB in sei tipi di file – BMP, CUR, GIF, ICO, JPG, PNG – ma il servizio ti consente di creare la tua favicon da zero. Puoi anche aggiungere l’animazione che è necessaria per far risaltare ancora di più la tua favicon.

5. Genfavicon

Genfavicon - Generatore Favicon

Generare una favicon online dovrebbe essere un processo facile e Genfavicon offre.

È un altro generatore che semplifica il caricamento, la modifica, in cui è possibile ritagliare la parte dell’immagine nell’area che si desidera utilizzare come favicon. Puoi generare una favicon in cinque dimensioni: 16 × 16, 32 × 32, 48 × 48, 64 × 64, 128 × 128 – e accetta formati di immagine GIF, JPG e PNG.

È perfetto se stai cercando un’opzione semplice.

6. X-Icon Editor

X-Icon Editor - Generatore Favicon

L’ X-Icon Editor è un generatore di creare-da-zero che mostra un’anteprima di come il vostro favicon apparirà in punti diversi, come una scheda del browser, lista dei preferiti, e barra degli indirizzi web.

L’editor stesso ha alcune belle funzionalità e ti consente di creare un’icona in quattro dimensioni. Sarai anche in grado di visualizzare in anteprima il risultato finale prima di completare la progettazione.

7. Favicon-Generator.org

Favicon-Generator.org - Generatore Favicon

Favicon-Generator.org semplifica il processo di creazione di favicon permettendoti di scegliere tra la generazione di un semplice file ICO 16 × 16 o la creazione di icone per browser, Android, IOS e applicazioni Microsoft. Puoi anche sfogliare la loro galleria pubblica e selezionare una favicon prefabbricata, se preferisci.

8. RealFaviconGenerator.net

RealFaviconGenerator.net - Generatore Favicon

Ricco di funzionalità ma ancora relativamente semplice da usare, il generatore favicon di RealFaviconGenerator.net è lo strumento più completo di quelli presenti nella nostra lista.

Non solo ha le opzioni di creazione favicon più dettagliate, ma ti consente anche di controllare una favicon corrente per vedere se mancano applicazioni e quali formati dovrai creare per risolvere i problemi.

9. FaviconGenerator.com

FaviconGenerator.com - Generatore Favicon

Lo strumento FaviconGenerator.com è un generatore semplice e intuitivo che ti consente di utilizzare immagini di dimensioni fino a 2 MB, anche se deve essere 100 × 100. Puoi anche creare una favicon in cinque dimensioni: 16 × 16, 24 × 24, 32 × 32, 48 × 48 e 64 × 64.

Questa opzione è la migliore per chi ha una scarsa conoscenza di CSS e HTML perché dopo aver generato la favicon, ti verrà richiesto di copiare un codice. Stai lontano se preferisci un generatore di favicon veloce e privo di codice.

10. Generatore di favicon Dynamic Drive

Generatore di favicon Dynamic Drive

Questo generatore di favicon di Dynamic Drive è uno strumento più standard in cui carichi direttamente la tua immagine e il programma crea la favicon per te. Oltre ai soliti tre tipi di file di immagini, GIF, JPG e PNG, Dynamic Drive supporta anche BMP. La dimensione massima del file può essere caricata fino a 150 KB.

11. Favic-o-Matic

Favic-o-Matic - Generatore Favicon

Vincendo il nostro voto per il sito del generatore favicon meglio progettato, Favic-o-Matic gestisce anche la più ampia gamma di opzioni di dimensioni. Dalle dimensioni di conversione regolari alle icone per Android e iOS, il servizio offre una scelta di 20 varianti di dimensioni diverse per soddisfare quasi tutte le esigenze.

Carica un’immagine di almeno 32 × 32 px e inizia a creare la tua favicon con Favic-O-Matic. Il generatore online ti aiuta a creare icone su diverse piattaforme, tra cui iOS, Android, Windows, Metro e altro.

12. Antifavicon

Antifavicon - Generatore Favicon

Mentre troverai la maggior parte del nostro elenco direttamente nelle immagini, che si tratti di caricarle o modificarle, Antifavicon è unico poiché funziona solo con il testo. Basta inserire la verbosità desiderata, selezionare la combinazione di colori e il servizio genererà automaticamente la favicon testuale con un’opzione per salvare il file.

Quindi, se preferisci utilizzare il testo anziché un’immagine per la tua favicon, questo dovrebbe essere il tuo punto di partenza. Antifavicon è facile da usare e una buona opzione per i principianti completi.

13. FavIcon.pro

Favicon.pro - Generatore Favicon

Un altro generatore senza fronzoli, FavIcon.pro convertirà GIF, JPG e PNG in una delle cinque dimensioni. Supporta icone di dimensioni 16 × 16, 32 × 32, 48 × 48, 64 × 64 e 128 × 128. Queste sono considerate le dimensioni preferite di favicon, ma l’attuale versione di WordPress supporta file fino a 152x152px.

Con FavIcon.pro, sei in grado di generare icone per ogni piattaforma, browser e sistema operativo (SO). Se stai cercando di sperimentare diverse dimensioni di favicon e icone, usa FavIcon.pro.

14. ProDraw

ProDraw - Generatore Favicon

Utilizzando una procedura in tre passaggi, ProDraw utilizza il metodo di caricamento per immagini fino a 1 MB nei seguenti formati: BMP, GIF, JPG, PNG e TIF. Da lì seleziona la tua dimensione tra otto diverse opzioni e crea il tuo download. La funzione extra qui è l’opzione di scegliere tra quattro diversi livelli di nitidezza.

ProDraw offre anche altri servizi come l’aggiunta di effetti alle foto, la generazione di cartoline elettroniche, HTML di Google Maps e la conversione di indirizzi in posizione GPS. Quindi, se stai cercando uno strumento online che vada oltre le icone e le favicon, ProDraw è il tuo vincitore.

15. Faviconit.com

Favicon It - Generatore Favicon

Il generatore di faviconit colpisce tutti i punti principali non solo creando favicon, ma anche toccando le icone per i dispositivi Apple e l’intestazione HTML per tutti i browser Web e dispositivi.

Carichi un’immagine che è almeno 310 × 310 e un massimo di 1 MB e Favicon fa il resto. Tutto quello che devi fare è fare clic sul pulsante “faviconit!” Dopo che l’immagine è stata caricata.

16. Webestools Favicon Generatore online

Webestools - Generatore Favicon

Webestools è un generatore di favicon che offre ai progettisti e ai proprietari di siti Web una varietà di strumenti online.

Tra questi strumenti c’è il loro generatore online Favicon che ti consente di caricare immagini dal tuo computer o da Internet. È quindi possibile modificare l’immagine utilizzando il suo strumento di editor online e creare la favicon desiderata di 16 × 16 o 32 × 32 dimensioni.

17. Faviconr

Faviconr - Generatore Favicon

Il generatore online Faviconr ti consente di generare la tua favicon dai formati di immagine GIF, JPG e PNG. Consente agli utenti di caricare immagini inferiori a 150 KB per generare una favicon. Puoi creare una favicon che sia trasparente, purché anche il file GIF o PNG di origine sia trasparente.

Al termine, Faviconr richiede ai proprietari di siti Web e blog di copiare e incollare una riga di codice sul tuo sito. Ciò significa che per usare Faviconr avrai bisogno di un po ‘di conoscenza del backend.

Come aggiungi un Favicon al tuo sito web?

Ormai hai scelto il generatore favicon perfetto e hai una bellissima favicon pronta per partire!

Ma c’è ancora un’altra cosa da fare: caricarlo sul tuo sito web. Il modo in cui carichi la tua favicon dipende da come hai impostato il tuo sito web.

Se stai utilizzando un costruttore di siti Web come Wix  o  Weebly o una soluzione di e-commerce come Shopify , consulta il rispettivo centro assistenza del servizio per indirizzarti ai passaggi corretti per aggiungere la tua favicon. Se stai usando la popolare  piattaforma WordPress , caricare una favicon è facile (ecco come con FTP per Joomla ).

Come caricare una favicon su WordPress
  • Accedi alla tua dashboard di WordPress
  • Scorri verso il basso fino a Aspetto , quindi fai clic su Personalizza
  • Vai alla sezione Identità del sito e vai all’icona del sito
  • Fai clic su Seleziona immagine e carica la tua favicon nuova di zecca
  • Fai clic su Pubblica
  • Hai finito!

E questo è tutto. La tua favicon è pronta per essere visualizzata su tutti i browser di siti Web in tutto il mondo.

Pensieri finali

Anche se a prima vista non sembra molto, le favicon sono un grosso problema quando si tratta della portata complessiva e del branding del tuo sito web.

Pensa per un momento a tutti i luoghi in cui vedi una favicon e inizierai a capire come alla fine diventa l’identificatore principale o principale del tuo sito.

Scheda Browser.

Collegamento sulla barra delle applicazioni.

Collegamento sul desktop.

Icona touch di Apple.

Icona Android.

E ancora e ancora.

Quando finisci di progettare il tuo sito Web e lo prepari al lancio, assicurati di coprire ogni minimo dettaglio in modo che il tuo sito sia davvero pronto per raggiungere il mondo. Presto quel piccolo favicon potrebbe benissimo essere il modo in cui il mondo ti raggiunge.