Quando si tratta del tuo sito web o del tuo blog, la tua strategia di branding è fondamentale per convertire i visitatori in clienti. Non bisogna trascurare nessun piccolo dettaglio. Questo include la necessità di creare favicon e un generatore di favicon gratuito può aiutarti a crearle.
Le favicon sono le piccole icone di immagine che appaiono accanto al titolo di un sito web nella scheda di una finestra del browser.
Poiché è possibile utilizzarle anche come icone per le applicazioni desktop, sono necessarie almeno alcune dimensioni diverse che possono essere incluse in un tipo di file ICO della favicon. Nella maggior parte dei casi, è anche possibile impostare un file PNG come icona della favicon.
Le favicon sono essenziali perché gli utenti sono costantemente alla ricerca di informazioni su più siti web contemporaneamente attraverso le schede del browser. Le Favicon aiutano gli utenti a identificare i contenuti e il marchio più velocemente per un’esperienza utente più allettante.
Ecco quindi 15 strumenti online gratuiti per il generatore di favicon e maggiori dettagli su come creare favicon e installarle.
Diamoci da fare.
Le migliori pratiche per il file ICO
Quando si vogliono creare favicon, il primo passo è quello di imparare di più su di esse, compresi i loro requisiti e le migliori pratiche.
Il termine “favicon” è un modo di dire “icona preferita”. Si trattava di icone che, proprio come oggi, venivano visualizzate con il titolo di un sito web nella parte superiore di un browser.
Solo che in origine venivano visualizzate quando un utente aggiungeva un sito web alla sua cartella “preferiti”. I browser moderni fanno riferimento a questa cartella come a dei segnalibri.
L’icona di una favicon deve avere una certa dimensione. Altrimenti, i browser e i dispositivi non li useranno.
Le dimensioni minime indispensabili sono le dimensioni minime:
- 16×16 pixel per i browser
- 32×32 pixel per le barre delle applicazioni desktop
- 96×96 pixel per le icone favicon delle applicazioni desktop
- 180×180 pixel per dispositivi iOS e Android
Tieni presente che puoi scegliere tra 16×16 px e 32×32 px. Se non sei troppo preoccupato per il branding, dovrebbe bastare una di queste dimensioni dell’immagine.
Per i dettagli, consultate il Favicon Cheat Sheet.
Quando si crea un’icona Favicon, è una buona idea seguire anche queste buone pratiche:
- Dovrebbero essere semplici e non eccessivamente stilizzate, in modo da essere facilmente visibili in piccole dimensioni.
- Scegli uno o due colori per la combinazione di colori. Al massimo, non più di tre colori.
- Le icone Favicon dovrebbero essere in colori a 8 o 24 bit.
- Il design delle icone favicon non dovrebbe includere molte linee o lettere.
- Anche se è possibile avere uno sfondo trasparente, è importante notare che i dispositivi Apple non lo permettono.
- Le icone delle favicon dovrebbero corrispondere al tuo marchio e al tuo logo esistente.
Crea il tuo logo rapidamente se non ne hai uno
Come già detto in precedenza, è una buona idea avere la tua favicon legata al tuo marchio e al tuo logo attuale. Se non ne hai già una, puoi crearne una velocemente, per esempio, con il TailorBrand Logo Maker.
Può generare un logo per te con l’aiuto di una IA. Dopo aver risposto ad alcune semplici e rapide domande sullo stile del logo desiderato, compreso il font, e dopo aver sottoscritto un account gratuito, verranno generati diversi loghi di alta qualità, professionali e moderni.
Se trovi un logo che ti piace, puoi passare a un account premium per scaricarlo. Anche se, è possibile scaricare gratuitamente la versione favicon del logo.
Ho elencato 15 migliori programmi per creare loghi se vuoi controllare anche altre opzioni.
I migliori generatori di Favicon gratuiti: Strumenti online
Se vuoi creare favicon più simplici, o vuoi semplicemente caricare un’immagine e farla opportunamente dimensionata e convertita in un file di immagine ICO, ecco alcuni generatori di favicon gratuiti.
Non sono in un ordine particolare perché sono tutte ottime opzioni in cui è possibile creare una favicon in pochi click. Dopo aver creato una favicon con una qualsiasi di queste opzioni online, è possibile scaricarle e utilizzarle gratuitamente.
1) Favicon.io
Con questo generatore di favicon gratuito, è possibile creare favicon da un testo, un’immagine o un emoji.
Con l’opzione basata sul testo, è possibile scegliere il colore e la forma dello sfondo, lo stile, la dimensione e il colore del carattere. Il generatore di Favicon utilizza Google Fonts che ha più di 800 font disponibili.
In alternativa, è possibile scegliere di caricare un file per il generatore di favicon per trasformarlo nelle dimensioni appropriate. Oppure, è possibile scaricare una favicon emoji da una gigantesca lista di opzioni.
La favicon generata funzionerà per tutti i browser e per più piattaforme.
2) Favicon-Generator.org
Questo generatore di favicon gratuito offre la possibilità di caricare un file immagine e scegliere tra la dimensione standard 16×16 px per i browser web, o una dimensione più grande adatta ad Android, Microsoft e iOS.
Hai la possibilità di mantenere le attuali dimensioni dell’immagine invece di ridimensionarla in un quadrato. Basta tenere presente che mantenere questa opzione selezionata o deselezionata può distorcere il risultato finale della tua favicon.
Quindi, è meglio assicurarsi che la tua immagine sia già abbastanza vicina ad essere quadrata.
3) Real Favicon Generator
Questo generatore di favicon gratuito è piuttosto unico perché è uno dei pochi della lista che include una sezione di anteprima del simulatore del browser in modo da poter vedere come sarà la tua favicon una volta che sarà stata dimensionata e convertita.
È anche possibile ottenere dimensioni per tutti i browser, le piattaforme e la maggior parte delle tecnologie.
Tuttavia, questo generatore di favicon ha solo la possibilità di selezionare un’immagine da convertire in favicon.
4) Favicon.cc
Con questo generatore di favicon gratuito, è possibile caricare un’immagine per creare una favicon, oppure creare una propria icona favicon disegnandola con il mouse.
È possibile scegliere i colori che si desidera utilizzare con un selezionatore di colori, nonché attivare o disattivare la trasparenza della favicon.
C’è anche la possibilità di creare favicon con un’animazione. Inoltre, sono disponibili impostazioni come mettere l’animazione in loop, modificare e cancellare i fotogrammi.
Questo generatore di favicon ha anche una modalità di anteprima, in modo da poter vedere come appare la propria favicon, una volta pronta.
5) FaviconGenerator.com
Si tratta di un semplice generatore di favicon gratuito dove è possibile caricare un’immagine e poi scegliere la dimensione desiderata. E’ molto semplice, ma è una buona opzione quando si vuole creare una favicon in modo veloce senza doversi preoccupare delle impostazioni e delle opzioni.
Con questo generatore, è anche possibile creare favicon retina che funzionano con i dispositivi Apple touch. Richiede un piccolo lavoro extra, ma tutte le istruzioni sono riportate in dettaglio sulla loro pagina web.
6) Favicomatic
Favic-o-Matic genera favicons, sia ICO che PNG (anche trasparenti).
È possibile caricare un’immagine con questo generatore di favicon gratuito, e poi scegliere se scaricare un file ICO 16×16 e 32×32 pixel o includere diverse dimensioni compatibili con tutti i dispositivi.
Ci sono anche impostazioni avanzate come la possibilità di modificare il colore di sfondo e alcune opzioni di compatibilità avanzate.
7) Ionos Favicon Generator
Il generatore di favicon Ionos Favicon Generator permette di disegnare un’icona della favicon, di usare le iniziali o di caricare un’immagine che si desidera utilizzare.
Il risultato è una favicon che funziona su tutti i browser e dispositivi. Ha anche una bella area di anteprima dove è possibile vedere rapidamente come sarà la propria favicon in tempo reale.
8) Website Planet Favicon Generator
Questo generatore di favicon gratuito offre la possibilità di caricare un’immagine (JPG, PNG o GIF), oppure di scegliere da una galleria gratuita di favicon pre-fatte.
Potrebbe essere importante notare che se stai cercando di creare favicon per la tua azienda, probabilmente vorrai creare una favicon che sia il tuo logo o simile ad essa. Quando lo si fa, si ottiene un aspetto più coeso e più memorabile.
Quindi, scegliere una delle immagini pre-fatte potrebbe non essere una buona idea, soprattutto perché altri siti possono usare la stessa identica immagine che hai scelto.
9) RedKetchup Favicon Generator
Per questo generatore, c’è un’opzione per caricare un’immagine o crearne una con testo.
Se si creano favicon con testo, ci sono molte impostazioni, tra cui la modifica della famiglia di font, la dimensione del font, il colore dello sfondo, il colore del testo, e c’è una scala regolabile per alternare il confine tra un quadrato e un cerchio. Quindi, si può scalare il bordo per avere bordi arrotondati di varia rotondità.
Ci sono anche ulteriori opzioni per la compatibilità tra i dispositivi.
10) Genfavicon
Questo generatore di favicon gratuito è unico perché quando si carica un’immagine, si ha la possibilità di ritagliarla per renderla una favicon.
C’è anche una finestra di anteprima per vedere come sarà la propria nuova favicon dal vivo nel browser di un utente.
È possibile selezionare tra le opzioni di dimensionamento: 16×16, 32×32, 48×48, 64×64 e 128×128 pixel.
11) FavIcon.pro
Ecco un’altra opzione rapida quando si tratta di un generatore di favicon gratuito. Quando si carica un’immagine per creare una favicon, è possibile scegliere la dimensione dell’immagine che si desidera utilizzare: 16×16, 32×32, 48×48, 64×64 e 128×128 pixel.
FavIcon consente di convertire JPG, GIF, PNG in file di tipo ICO e si può utilizzare per convertire le icone delle applicazioni, le icone del desktop e le favicon nei tuoi siti web.
12) Faviconr
Faviconr è un’altra opzione semplice e veloce per ottenere una favicon gratuitamente.
Carica un file JPG, PNG o GIF e scegli se vuoi uno sfondo trasparente (puoi creare favicon trasparenti solo se il tuo file di origine è anche un file PNG o GIF trasparente). Fare clic sul pulsante, salvare il file e il gioco è fatto.
13) ICOConvert
Questo generatore di favicon gratuito è piuttosto unico perché dopo aver caricato un’immagine che si desidera utilizzare per creare una favicon, è possibile ritagliarla e stilizzarla.
Ci sono opzioni per modellare il bordo in diverse forme, tra cui un quadrato, a forma di cuore, un quadrato decentrato, un cerchio, una forma a cuore inclinato o un quadrato, e un’opzione per scegliere un bordo bianco.
È inoltre possibile scegliere di scaricare la favicon come file ICO o PNG con diverse opzioni di dimensionamento, tra cui 16×16, 24×24, 32×32, 48×48, 64×64, 96×96, 128×128, 192×192 e 256×256 pixel. C’è anche un’opzione per creare icone favicon per i computer Windows 7, 8, Vista e XP.
Questo generatore di favicon gratuito include anche opzioni per la compressione e la conversione di file da PNG a SVG.
14) Wizlogo Favicon Generator
Wizlogo è un’altra semplice opzione per generare gratuitamente una favicon. Tutto quello che devi fare è selezionare un’immagine da caricare, quindi selezionare un file ICO 32×32 o un’icona della favicon per web, iOS, Windows e Android. E il gioco è fatto.
Wizlogo può essere utilizzato anche come generatore di logo gratuito.
15) FavICO
FavICO è una delle ultime opzioni per la creazione di favicon in kodo gratuito. Carica un’immagine che vuoi usare per creare una favicon. Poi, scegli tra una dimensione 16×16, o 32×32 pixel e premere crea. E questo è tutto.
Come installare una Favicon
Una volta che hai utilizzato uno dei generatori di favicon gratuiti per crearne una, puoi installarla in modo che possa essere visualizzata per il tuo sito web.
Per siti web standard o non WordPress, prima di tutto, carica la favicon nella root del tuo server.
Poi, partendo dal tag <head> del file index.html, usa il codice ufficiale W3C:
...
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
Assicurati solo di cambiare “https://example.com/myicon.png” con il link effettivo alla tua icona della favicon.
Inoltre, cambia “image/png” per indicare il tipo di file immagine che stai usando per la favicon.
Ecco i tipi di immagine da sostituire “image/png” che sono compatibili quando si tratta di creare una favicon:
- File immagine PNG – image/png
- File immagine GIF – image/gif
- File immagine ICO – image/x-icona
- File immagine SVG – image/svg+xml
Non dimenticare di salvare il file.
Nella maggior parte dei casi, i generatori di favicon gratuiti elencati sopra generano anche il codice necessario che è specifico per le impostazioni scelte, ad esempio per le animazioni o la compatibilità. Quindi, se questo codice non funziona, puoi fare riferimento al generatore di favicon che hai usato per creare una favicon per il tuo sito web.
Installare automaticamente una Favicon in WordPress
Per i siti WordPress, è possibile creare un’icona favicon senza dover utilizzare uno dei generatori di favicon gratuiti elencati sopra.
È possibile utilizzare qualsiasi immagine si desideri, purché sia larga almeno 512 px.
Per installarla automaticamente, accedi al tuo sito WordPress auto-ospitato e nel cruscotto di amministrazione, vai su Aspetto > Personalizza.
Dopo aver caricato il Customizer, clicca su Site Identity (Denominazione Sito) nel menu a sinistra. Poi, sotto l’icona del sito, fare clic su Seleziona immagine.
Nella finestra pop-up, fai clic sulla scheda Upload Files (Carica file), quindi su Select Files (Seleziona file). Scegli l’immagine che vuoi dal tuo computer.
Fai clic su Seleziona e ritaglia l’immagine (se necessario). In alternativa, è possibile lasciare l’immagine così com’è e fai clic su Salta Ritaglio.
Quindi, salva le modifiche facendo clic sul pulsante Pubblica nel Customizer.
Installare manualmente un Favicon per i siti WordPress
Per installare manualmente la tua favicon che è un file ICO per WordPress, carica prima la favicon nella root del tuo sito web così come la root del tuo tema attuale.
Assicurati che il file si chiami “favicon.ico”, altrimenti l’icona della favicon non verrà visualizzata.
Questo dovrebbe bastare, ma alcuni browser più vecchi potrebbero non notare la tua favicon, quindi c’è un ulteriore passo da fare per garantire la compatibilità.
Trova il tuo file header.php attraverso SFTP o il pannello di controllo del tuo provider di hosting.
Aprilo e cerca la riga di codice simile all’esempio qui sotto:
... <link rel="shortcut icon" ... /favicon.ico" /> ...
Poi, sostituiscilo con il codice qui sotto o aggiungilo se non c’è:
... <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" /> ...
Salva il file e hai finito.
Conclusione
Qualcosa di così piccolo come una favicon può sembrare inizialmente insignificante, ma aiuta la riconoscibilità del marchio e l’esperienza dell’utente. Questi generatori di favicon gratuiti dovrebbero aiutarti a creare favicon da aggiungere al tuo sito web.