Generatore di favicon — ICO, PNG e Apple Touch Icon
Trasforma una sola immagine in un set completo di favicon: favicon.ico, icone PNG, un apple-touch-icon e un manifest per web app.
L'apple-touch-icon è sempre opaco. Quando il nome dell'app è vuoto, il manifest usa il nome del file immagine.
Anteprima
File nello ZIP
Come creare una favicon
- Scegli un'immagine quadrata, idealmente almeno 512 per 512 pixel, in formato PNG, JPG, WebP o SVG.
- Scegli come adattare le immagini non quadrate: contain le riempie con il colore di sfondo, cover le ritaglia dal centro.
- Imposta i colori di sfondo e del tema, il margine interno e se le icone piccole devono mantenere uno sfondo trasparente.
- Digita il nome dell'app e il nome breve che il manifest della web app deve contenere, poi controlla le anteprime dal vivo.
- Scarica lo ZIP con tutti i file, oppure prendi favicon.ico e apple-touch-icon.png da soli, e copia lo snippet HTML.
Quando è utile
- Dare a un nuovo sito web una favicon senza aprire un editor di immagini.
- Sostituire una favicon mancante o sfocata che appare come icona vuota nelle schede.
- Aggiungere un apple-touch-icon perché un sito appaia bene quando viene salvato sulla schermata Home di un iPhone.
- Preparare icone Android e un manifest per una progressive web app.
- Trasformare un logo in un set di icone ordinato con margini uniformi su ogni dimensione.
Domande frequenti
Quali dimensioni produce il generatore?
Scrive favicon.ico con immagini da 16, 32 e 48 pixel all'interno, file separati favicon-16x16.png e favicon-32x32.png, un apple-touch-icon.png a 180 per 180 e icone Android a 192 e 512 pixel.
Perché l'apple-touch-icon è sempre opaco?
iOS non mostra la trasparenza in un'icona della schermata Home, quindi un PNG trasparente risulterebbe con un blocco nero o bianco dietro. Il generatore riempie quel file con il tuo colore di sfondo e lascia trasparenti le piccole dimensioni della favicon se lo desideri.
Cosa devo mettere nel manifest?
Usa il nome completo del sito o dell'app e un nome breve di circa dodici caratteri, perché il nome breve è quello che appare sotto l'icona su un telefono. Il colore del tema colora la barra del browser e il colore di sfondo riempie la schermata iniziale.
Posso usare un logo SVG?
Sì. L'SVG viene rasterizzato a 512 pixel di larghezza e le sue proporzioni sono prese dagli attributi width e height o dal viewBox, quindi un logo quadrato resta quadrato.
Dove vanno i file sul mio server?
Mettili nella radice del sito accanto a index.html, così i percorsi nello snippet come /favicon.ico e /site.webmanifest funzionano. Se li tieni in una sottocartella, modifica i valori href nello snippet di conseguenza.
La mia immagine viene caricata da qualche parte?
No. L'immagine viene decodificata e disegnata su una canvas all'interno del browser e lo ZIP viene assemblato in memoria, quindi nulla viene inviato a un server.