Hai un logo, e il tuo sito ha bisogno di una favicon: quella minuscola immagine nella scheda del browser. Facile, finché non scopri che i browser, l'iPhone, gli Android e Windows vogliono ciascuno la propria dimensione e il proprio file. Il generatore di favicon di GetPlugzz fa tutto questo da una sola immagine. Trascini il logo, premi un pulsante e ottieni favicon.ico, una Apple touch icon, icone Android, un tile Windows, un file manifest e il codice da incollare nel tuo sito. Gira nel tuo browser, quindi non c'è un account, non c'è una filigrana e non viene caricato niente.
Come creare una favicon in tutte le dimensioni da una sola immagine?
Apri il generatore di favicon e fai così:
- Aggiungi un'immagine. Trascina il tuo logo nel riquadro o clicca per sceglierlo. Funziona meglio un'immagine quadrata di almeno 512 × 512 pixel. Qualsiasi altra viene ritagliata in un quadrato dal centro.
- Controlla l'anteprima. Se la tua immagine ha lo sfondo trasparente, viene mantenuto, perfetto per i loghi. Vedrai tutte le dimensioni che verranno create.
- Scarica. Premi Scarica Tutto (ZIP) per ottenere tutte le dimensioni, poi incolla il codice mostrato nell'head del tuo sito. Per il codice c'è un pulsante Copia.
Non c'è niente da ridimensionare a mano e niente da installare. Se il browser blocca il download, clicca su Consenti vicino alla barra degli indirizzi e va avanti.
Perché una favicon ha bisogno di così tante dimensioni?
Pensa a una cabina fotografica che stampa la stessa immagine come un adesivo minuscolo, una foto tessera e un poster. È lo stesso volto, ma ogni posto ha la sua cornice. Una favicon funziona uguale. Il tuo logo compare in posti diversi, e ognuno chiede una dimensione diversa:
- 16 × 16 e 32 × 32: la scheda del browser. Quella da 32 la mantiene nitida sugli schermi ad alta risoluzione (retina).
- 48 × 48: i collegamenti di Windows.
- 150 × 150: il tile di Windows.
- 180 × 180: la Apple touch icon, che iPhone e iPad usano quando qualcuno aggiunge il tuo sito alla schermata Home.
- 192 × 192 e 512 × 512: Android, per la schermata Home e la schermata di avvio (usate anche per le web app).
Cosa c'è nel file ZIP?
Lo strumento crea tutto questo per te e lo impacchetta in un solo file:
- favicon.ico: l'icona classica delle schede del browser. È un vero file multi-dimensione, con dentro le versioni 16, 32 e 48.
- favicon-16x16.png, favicon-32x32.png e favicon-48x48.png: le dimensioni piccole.
- apple-touch-icon.png: l'icona per iPhone e iPad.
- android-chrome-192x192.png e android-chrome-512x512.png: le icone per Android.
- mstile-150x150.png: il tile di Windows.
- site.webmanifest: dice ai browser quali icone usare.
- head-snippet.html: il codice da incollare, salvato come file.
Dove vanno i file?
Carica i file nella cartella principale del tuo sito e incolla il codice dello strumento nell'head delle tue pagine. È quel codice a dire al browser dove trovare ogni icona. Due piccoli consigli: apri site.webmanifest e aggiungi il nome del tuo sito, perché resta vuoto, e cambia il colore del tema se vuoi qualcosa di diverso dal bianco.
Non hai ancora un sito su cui caricarli? La nostra guida per lanciare il tuo primo sito web copre dominio, hosting e pagine. Se preferisci non partire da una pagina bianca, un AI website builder (link sponsorizzato) di Bluehost include l'hosting, quindi avresti dove mettere i file.
Quale immagine funziona meglio?
- Quadrata e grande. Parti da almeno 512 × 512 pixel. Lo strumento la riduce a tutte le dimensioni, quindi non devi mai ridimensionare niente da solo.
- Centrata. Un'immagine non quadrata viene ritagliata in un quadrato dal centro, quindi tieni la parte importante nel mezzo.
- Il trasparente va bene. Se il tuo logo ha lo sfondo trasparente, le icone lo mantengono.
- Il semplice vince. A 16 pixel c'è pochissimo spazio, quindi una forma decisa o una sola lettera si legge meglio di un disegno pieno di dettagli.
Una cosa da sapere: una immagine alla volta
Il generatore crea tutte le dimensioni da un'immagine in un colpo solo. Non elabora tanti loghi diversi insieme. Se hai un altro sito, premi Scegli un'altra immagine e ricomincia, ci vogliono pochi secondi.
Da sapere prima di iniziare
- Un'immagine non quadrata viene ritagliata dal centro. Usa un'immagine quadrata perché nulla venga tagliato.
- Dai all'icona Apple uno sfondo pieno: gli iPhone riempiono di nero le aree trasparenti.
- A 16×16 pixel i dettagli fini spariscono, quindi una forma semplice funziona meglio.
- I browser e Google tengono i vecchi favicon per un po'; uno nuovo può impiegare giorni ad apparire.
- Inserisci il nome del tuo sito in site.webmanifest e carica tutti i file nella cartella principale del tuo sito.
Domande frequenti
Sì. Non c'è nessun account e nessuna filigrana.
No. Le icone vengono create nel tuo browser e la tua immagine non lascia mai il tuo dispositivo.
Parti da un'immagine quadrata di almeno 512 × 512 pixel. Lo strumento la riduce a tutte le dimensioni che ti servono, quindi non devi ridimensionare niente da solo.
Sì. Se il tuo logo ha lo sfondo trasparente, resta trasparente nelle icone.
Caricali nella cartella principale del tuo sito e incolla il codice dello strumento nell'head delle tue pagine.
Generatore di Favicon gratis — tutte le dimensioni, un'immagine
Un'immagine dentro, tutte le dimensioni di icona fuori: ico, Apple, Android, Windows e il codice da incollare. Creato da GetPlugzz, fatto interamente nel tuo browser.
