Strumenti & Web Design
Generatore di favicon.
Carica il logo, regola sfondo e margini, scarica tutti i file che servono al tuo sito con il codice HTML già pronto da incollare.
100% GratuitoTutti i formati (.ICO, iOS, PWA)HTML pronto all'uso
Trascina qui il tuo logo
SVG, PNG, JPEG, WebP, HEIC. Meglio se quadrato e con margini larghi.
Seleziona il logoEsempio: le nostre favicon in fila
Come appare il pittogramma begrafix esportato nelle diverse misure di sistema.
Misure esportatein scala reale fino a 64 px
16favicon.ico32favicon.ico48favicon.ico180apple-touch-icon.png
192icon-192.png
512icon-512.pngPerché non basta un file
La favicon non è più una sola immagine da mettere nella cartella principale. Ogni sistema ne vuole una misura diversa e la ritaglia a modo suo, e i file non sono intercambiabili tra loro.
favicon.ico
Scheda del browser, cronologia, preferiti, risultati Google
Contiene 16, 32 e 48 px insieme. Il browser sceglie la misura che gli serve senza reinventarla per interpolazione.
favicon.svg
Browser recenti, schermi ad alta densità
Vettoriale: resta nitido a qualsiasi risoluzione, senza dover indovinare in anticipo le misure che serviranno.
apple-touch-icon.png
«Aggiungi a schermata Home» su iPhone e iPad
180x180 e sempre opaca. Gli angoli li arrotonda iOS da sé, e i pixel trasparenti li comporrebbe su nero: l'area fuori dalla forma scelta viene riempita di colore solido.
icon-192 / icon-512
Android, PWA, schermata di avvio
Le due misure che il manifest dichiara. La 512 serve anche alla splash screen delle app installate.
icon-maskable-512.png
Icona adattiva di Android
La forma la decide il launcher del telefono — quadrato stondato, squircle o cerchio. Il logo deve stare nell'80% centrale o perde i bordi.
site.webmanifest
Installazione come app
Dice al sistema nome, colori e quali icone usare. Senza, i PNG restano lì e nessuno li va a cercare.
Errori ricorrenti
Quasi sempre non è il generatore a sbagliare: è come viene preparata l'immagine sorgente o come viene configurata nel codice HTML.
Il logo tocca i bordi dell'icona
Lascia respirare il logo intorno al 70-80% del quadrato: le maschere di ritaglio di iOS e Android mangiano gli angoli esterni.
Il logo per esteso, con il nome scritto
A 16 px il testo diventa una macchia illeggibile. Usa solo il simbolo sintetico, la lettera iniziale o il monogramma.
Icona scura su sfondo trasparente
Sparisce nella barra schede in tema scuro. Uno sfondo pieno o un SVG con media query è l'unico modo per restare visibili sia su chiaro che su scuro.
Solo un PNG chiamato favicon.png
Manca il .ico multi-misura (16/32/48) per i motori di ricerca e i client desktop, mancano le icone touch e manca il manifest: il sito resta senza icona su metà dei dispositivi.
La vecchia favicon non si aggiorna nel browser
I browser memorizzano le icone in modo molto aggressivo. Aggiungi un parametro di versione nel tag link (es. favicon.ico?v=2) per forzare il refresh immediato.
Mancanza del meta tag theme-color
Senza theme-color la barra del browser su smartphone resta del colore generico di sistema. Sincronizzala con il colore dominante del tuo brand.
FAQ
Domande sulle favicon
Tutto quello che c'è da sapere su misure, formati e indicizzazione nei browser.
Se il logo non regge i 16 pixel
Un'identità che funziona solo sulla carta intestata si vede subito qui: a dimensione favicon restano un simbolo o niente. È una delle prove che facciamo mentre disegniamo un marchio, non dopo.
Stai rifacendo il marchio
Logo, monogramma e versioni ridotte pensati insieme, così il simbolo regge anche dove c'è spazio per un'icona sola.
Come lavoriamo sul brandingCome lavoriamo noi
Disegniamo marchi pensati per vivere su schermi, stampe e supporti minimi. Il logo che funziona a 16 pixel funziona ovunque.
Scopri il servizio di BrandingOffrici un caffè per supportare lo sviluppo
I nostri strumenti sono e resteranno 100% gratuiti, senza limiti né abbonamenti. Se questo tool ti ha fatto risparmiare tempo o risorse, puoi supportare i costi dei server e lo sviluppo continuo offrendo un caffè al team su PayPal.
Altri strumenti gratuiti per il tuo lavoro
Tutti gli strumentiComprimi Immagini
Riduci il peso delle foto in WebP, AVIF e JPEG per velocizzare il sito.
Generatore QR Code
Crea codici QR personalizzati con logo, in PNG e vettoriale SVG.
Generatore Link WhatsApp
Crea link diretti wa.me con testo precompilato e codici QR.
Generatore Firma Email
Firme email HTML professionali con foto, logo e link social.
Logo su foto e video
Carica foto o video, aggiungi il logo e controlla l'anteprima.