Carica il logo, regola sfondo e margini, scarica tutti i file che servono al tuo sito con il codice già pronto da incollare. Tutto avviene dentro il tuo browser.
Il logo non lascia mai il tuo dispositivo.
SVG, PNG, JPEG, WebP, HEIC. Meglio se quadrato e con margini larghi.
Seleziona il logoLa 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.
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.
Browser recenti, schermi ad alta densità
Vettoriale: resta nitido a qualsiasi risoluzione, senza dover indovinare in anticipo le misure che serviranno.
«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 bianco.
Android, PWA, schermata di avvio
Le due misure che il manifest dichiara. La 512 serve anche alla splash screen delle app installate.
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.
Installazione come app
Dice al sistema nome, colori e quali icone usare. Senza, i PNG restano lì e nessuno li va a cercare.
Nei risultati di ricerca da smartphone Google mostra la favicon del sito accanto al nome del dominio. È il primo elemento grafico del tuo brand che una persona vede, spesso prima ancora di entrare nel sito.
La documentazione di Google chiede un'icona quadrata di 48x48 px o di un suo multiplo, raggiungibile a un URL stabile e non bloccata dal robots.txt. È il motivo per cui il file .ico generato qui contiene anche la misura da 48: senza, Google ingrandisce quella da 32 e il risultato è sfocato.
Se cambi favicon, la sostituzione nei risultati non è immediata: Google la aggiorna alla scansione successiva della home page.
Il logo tocca i bordi dell'icona
Lascia respirare il logo intorno al 70-80% del quadrato: le maschere di iOS e Android mangiano gli angoli.
Il logo per esteso, con il nome scritto
A 16 px il testo diventa una macchia. Usa il simbolo, la lettera iniziale o il monogramma.
Icona scura su sfondo trasparente
Sparisce nella barra schede in tema scuro. Uno sfondo pieno è l'unico modo per restare leggibili sia su chiaro che su scuro.
Solo un PNG chiamato favicon.png
Manca il .ico per i client vecchi, mancano le icone touch e manca il manifest: il sito resta senza icona su mezza dotazione di dispositivi.
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.
Logo, monogramma e versioni ridotte pensati insieme, così il simbolo regge anche dove c'è spazio per un'icona sola.
Come lavoriamo sul brandingIcone, manifest e metadata li mettiamo a posto in fase di sviluppo, insieme a tutto il resto che i browser si aspettano di trovare.
Come lavoriamo sui siti