Generatore di favicon
Con il nostro generatore di favicon il tuo logo diventa un set completo di file, dall’icona da 16 pixel della scheda del browser a quella da 512 pixel per le app, più l’HTML da incollare. Tutto avviene nel browser: la tua immagine non viene mai caricata.
Qwyzzle
Summit Roasters
Fox EsportsTrascina qui il tuo logo
PNG, JPG, WebP o SVG. L’ideale è un’immagine quadrata da 512 px in su.
Le favicon nascono nel tuo browser. La tua immagine non viene mai caricata.
Cos’è una favicon e dove compare
La favicon è la piccola icona quadrata che rappresenta il tuo sito. Il nome viene dall’inglese “favorite icon”, l’icona dei preferiti: il primo browser a mostrarne una la metteva accanto ai segnalibri, che chiamava Preferiti.
La vedi nelle schede del browser, accanto al titolo della pagina, larga 16 pixel, o 32 su uno schermo ad alta risoluzione. Indica il tuo sito anche nei segnalibri e nella cronologia. Quando qualcuno salva il tuo sito nella schermata home del telefono, diventa l’icona di un’app. E Google la mostra accanto al nome del tuo sito nei risultati di ricerca.
Ovunque compaia, il suo compito è lo stesso: farsi riconoscere al primo sguardo in mezzo ad altre icone.
Perché una favicon diventa un intero set di file
Ognuno di questi posti è arrivato in un momento diverso e chiede un file tutto suo. Il generatore di favicon qui sopra li crea tutti da un’unica immagine.
Schede, segnalibri e cronologia usano favicon.ico, un solo file che contiene le versioni da 16, 32 e 48 pixel. È il formato più vecchio: quando una pagina non indica nessuna icona, i browser cercano ancora favicon.ico nella cartella principale del sito.
Se parti da un SVG ottieni anche favicon.svg, che i browser capaci di mostrare icone SVG usano al suo posto. Essendo fatto di forme e non di pixel, resta nitido su qualsiasi schermo.
iPhone e iPad usano apple-touch-icon.png, un quadrato da 180 pixel, quando qualcuno aggiunge il tuo sito alla schermata home. L’iPhone riempie di nero le parti trasparenti, perciò questa icona ha sempre uno sfondo pieno: il tuo colore, oppure il bianco se hai scelto lo sfondo trasparente.
I telefoni Android, e i siti installati come app dal browser, usano icon-192.png e icon-512.png. Li trovano grazie a site.webmanifest, un piccolo file di testo che dice ai browser il nome del tuo sito, se l’hai scritto nello strumento, e dove si trovano le icone più grandi.
I PNG singoli da 16 a 48 pixel sono di scorta, per i servizi che chiedono un PNG. Per i risultati di ricerca, Google legge i link alle icone nell’HTML della tua home page.
Come aggiungere i file della favicon al tuo sito
Se i file del sito li modifichi tu, o il tuo sviluppatore, bastano due passaggi.
Per prima cosa, estrai lo zip e metti i file nella cartella principale del sito, quella più in alto, dove si trova la home page. Per controllare, aggiungi /favicon.ico all’indirizzo del tuo sito: dovrebbe aprirsi l’icona.
Poi incolla le righe HTML del README (le mostra anche lo strumento) nella sezione head delle tue pagine, cioè la parte in cima all’HTML che contiene il titolo della pagina. C’è una riga per il file ICO, una per l’icona Apple Touch e una per il manifest, più quella per l’SVG se ce l’hai.
Di solito tutte le pagine condividono lo stesso template, quindi basta incollarle una volta. Prima elimina le vecchie righe delle icone, altrimenti i browser potrebbero continuare a mostrare l’icona vecchia.
Con un website builder puoi saltare entrambi i passaggi: carica icon-512.png nell’impostazione dell’icona del sito e l’HTML lo aggiunge il builder al posto tuo.
Come far funzionare un logo a 16 pixel
A 16 per 16, la tua icona intera sta in 256 quadratini di colore. Quasi nessun logo è stato disegnato per questo.
Parti dal simbolo, non dal nome: se schiacci un nome di otto lettere in 16 pixel, a ogni lettera restano due pixel di larghezza. Niente simbolo? Usa l’iniziale, grande e in grassetto: le lettere spesse reggono la riduzione molto più a lungo di quelle sottili.
Poi togli dettagli. Le linee molto sottili e gli spazi piccoli si confondono con ciò che hanno intorno, e uno slogan diventa una macchia.
Conta il contrasto tra chiaro e scuro, non i colori in sé. Le schede sono chiare o scure a seconda del tema, e un’icona blu marino sparisce su una barra delle schede scura. Se il tuo simbolo è scuro, dagli uno sfondo chiaro nello strumento, o viceversa.
Il margine, cioè lo spazio tra il logo e il bordo del quadrato, è un compromesso. Se è troppo ampio, il logo si rimpicciolisce nella scheda. Se è troppo stretto, l’iPhone, che arrotonda le icone della schermata home, taglia gli angoli del logo.
Infine, guarda qui sopra le anteprime nella scheda chiara e in quella scura alla loro dimensione reale, senza ingrandire. La nostra verifica logo gratuita va oltre: riduce il tuo logo a 32 pixel e misura quanti dettagli restano.
Quando ridisegnare il simbolo invece di rimpicciolirlo
A volte non c’è niente da fare. In un’illustrazione dettagliata o in un effetto 3D costruito su luci e ombre, il dettaglio è il design, e a 16 pixel sparisce. Questo strumento può ridimensionare il tuo logo, ma non ridisegnarlo.
Non vuol dire che sia un brutto logo: è solo pensato per spazi più grandi. Disegna apposta una versione piccola, come un simbolo semplificato o la tua iniziale con il font del tuo brand. Mantieni i colori e qualcosa della forma, e le persone collegheranno le due versioni. Tra un’iniziale chiara e una miniatura sfocata, noi scegliamo sempre l’iniziale.
Ti serve un nuovo logo? Il nostro generatore di loghi con IA lo disegna partendo dal nome del tuo brand, più una breve descrizione se vuoi. I loghi creati dai nostri modelli di logo includono il simbolo come file separato, quando ne hanno uno, e ogni logo che acquisti da noi comprende i suoi file favicon.
Domande sulle favicon
È gratis, senza registrazione e senza filigrana. E la tua immagine resta con te: lo strumento funziona interamente nel tuo browser, crea ogni dimensione e lo zip direttamente sul tuo dispositivo, e l’immagine non arriva mai ai nostri server. Puoi quindi usarlo tranquillamente anche con un logo che non hai ancora mostrato a nessuno.
Quadrata, e di almeno 512 pixel per lato. L’icona più grande del set è da 512 pixel, quindi un PNG, JPG o WebP più piccolo va ingrandito per riempirla, e le icone grandi risultano sfocate. Lo strumento ti avvisa quando succede. Un SVG non ha questo limite: è fatto di forme, non di pixel, e resta nitido a ogni dimensione. Un logo largo riempie solo una striscia sottile del quadrato, perciò conviene partire dal simbolo o dall’iniziale.
Ti servono tutti, perché browser e telefoni diversi chiedono file diversi, e l’HTML dello strumento dice a ognuno quale usare. Il file ICO è quello che capiscono tutti i browser. I PNG servono ai telefoni e alle app installate, con file di scorta nelle dimensioni piccole. L’SVG, che ottieni se parti da un SVG, resta nitido su qualsiasi schermo nei browser che lo supportano.
Molto probabilmente il browser ti sta mostrando una copia salvata. I browser tengono le favicon molto più a lungo del resto della pagina: la vecchia icona può restare anche quando i nuovi file sono già online. Prova un ricaricamento forzato, che ricarica la pagina senza i file salvati: Ctrl+Maiusc+R su Windows, Cmd+Maiusc+R su Mac (Opzione+Cmd+R in Safari). Se non basta, apri l’indirizzo del tuo sito con /favicon.ico alla fine e ricarica quella pagina, oppure prova in una finestra di navigazione privata. I browser degli altri si aggiornano col tempo.
Nelle impostazioni del builder, non in una cartella. Quasi tutti i website builder e le piattaforme per negozi online hanno un’impostazione “icona del sito” o “favicon” in cui caricare un solo PNG quadrato. Scegli icon-512.png, il file più grande dello zip, così il builder ha pixel in abbondanza per creare le dimensioni più piccole. Se l’impostazione chiede una dimensione precisa, usa il file corrispondente. I builder aggiungono l’HTML al posto tuo, e il README puoi ignorarlo.
Google rileva una nuova favicon quando il suo crawler, il programma che legge le pagine web per Google, torna a visitare la tua home page. Non c’è una scadenza fissa. Google vuole un’immagine quadrata e il link all’icona nell’HTML della home page, perciò controlla che ci siano entrambi. Da lì in poi, cosa mostrare e quando lo decide Google: dagli tempo.
Non hai ancora un logo? Crea il tuo.
Fallo disegnare al nostro generatore di loghi con IA, oppure parti da un modello nel logo maker. Ogni logo che scarichi da DepthLogo include già le sue favicon.