Generatore di favicon
Come funziona
Carica un'immagine quadrata (PNG, JPEG o SVG) e lo strumento genera tutte le dimensioni di favicon che servono a un sito moderno o a una PWA: 16×16, 32×32 e 48×48 per le schede del browser e i preferiti, 180×180 per l'Apple Touch Icon, 192×192 e 512×512 per Android e per le web app installabili. Vedi l'anteprima di ogni dimensione prima di scaricare, così ti accorgi subito se un dettaglio si perde quando l'immagine viene rimpicciolita.
Con Scarica tutto in ZIP ottieni i sei PNG in un unico file. Accanto trovi il codice HTML con i tag link già pronti, da copiare nell'head della pagina: collegare le favicon al sito diventa un copia e incolla. Il file ZIP non contiene il codice HTML né un file .ico, perché tutti i browser in uso oggi leggono le favicon in PNG.
Parti da un'immagine quadrata di almeno 512×512 pixel, meglio se un PNG con sfondo trasparente. Un'immagine rettangolare viene stirata fino a diventare quadrata, quindi ritagliala prima. E tieni il disegno semplice: un dettaglio che si legge bene a 512 pixel di solito sparisce a 16.
Il ridimensionamento avviene nel tuo browser con le Canvas API: l'immagine non lascia mai il tuo dispositivo.
Domande frequenti
Che dimensioni deve avere una favicon?
- Oggi servono più dimensioni: 16×16, 32×32 e 48×48 per le schede del browser e i preferiti, 180×180 per l'Apple Touch Icon di iPhone e iPad, 192×192 e 512×512 per Android e le PWA. Lo strumento le genera tutte e sei da una sola immagine.
Che immagine devo caricare?
- Un'immagine quadrata di almeno 512×512 pixel, meglio se un PNG con trasparenza. Sono accettati PNG, JPEG e SVG. Lo strumento la ridimensiona a tutte le misure necessarie; se non è quadrata viene deformata, quindi ritagliala prima.
Cosa c'è nel file ZIP?
- I sei PNG: favicon-16.png, favicon-32.png, favicon-48.png, apple-touch-icon.png, icon-192.png e icon-512.png. Il codice HTML per l'head non è nello ZIP ma sulla pagina, con il pulsante Copia. Non viene creato un file .ico, perché tutti i browser in uso oggi leggono le favicon in PNG.
Come inserisco la favicon nel sito?
- Carica i sei PNG nella cartella principale del sito, poi copia il codice HTML generato e incollalo dentro l'head di ogni pagina. I percorsi nei tag partono dalla radice (per esempio /favicon-32.png): se metti i file in un'altra cartella, correggi i percorsi.
La mia immagine viene caricata su un server?
- No. Tutto il ridimensionamento avviene nel browser con le Canvas API, quindi l'immagine non lascia mai il tuo dispositivo.