Converti immagini in icone e favicon
Scegli un'immagine e generiamo un set completo di icone: una favicon.ico con sei dimensioni incorporate, più icone PNG per ogni dimensione richiesta da browser e sistemi operativi.
Come si usa
- 1
Scegli un'immagine — preferibilmente un PNG quadrato con sfondo trasparente.
- 2
Scegli la modalità di adattamento e le dimensioni desiderate.
- 3
Controlla ogni dimensione prima di scaricare.
- 4
Scarica solo la favicon.ico, o il pacchetto completo con icone PNG e manifesto.
Perché una sola immagine non basta
I browser richiedono 16 e 32 pixel per la scheda, iOS richiede 180 per la schermata Home, e Android richiede 192 e 512 per il manifesto. Fornire un'unica immagine grande lascia che ogni dispositivo la riduca da solo, il che appare sfocato alle dimensioni piccole — per questo generiamo ogni dimensione separatamente con una levigatura di alta qualità.
Cos'è un file ICO
Un unico file che contiene più immagini a dimensioni diverse, dal quale il sistema sceglie quella adatta a ogni punto. Vi mettiamo 16, 32, 48, 64, 128 e 256 pixel, la copertura di cui browser e Windows insieme hanno bisogno.
Immagine intera o riempi e ritaglia?
Le icone sono quadrate e la tua immagine di solito non lo è. «Immagine intera» la mantiene completa aggiungendo margini trasparenti, adatto per i loghi. «Riempi e ritaglia» occupa tutto il quadrato tagliando i bordi, adatto per le fotografie.
Domande frequenti
- Che differenza c'è tra favicon.ico e le icone PNG?
- La ICO riunisce più dimensioni e ogni browser la comprende, anche quelli datati. I PNG separati sono ciò che richiedono iOS, Android e il manifesto web. Il pacchetto completo ti dà entrambi.
- Dove metto i file?
- Nella radice del tuo sito, poi aggiungi i tag mostrati sotto lo strumento nell'head delle tue pagine.
- Qual è una buona immagine di partenza?
- Un'immagine quadrata con sfondo trasparente, di 512 pixel o più. I loghi semplici si leggono molto meglio a 16 pixel rispetto a grafiche ricche di dettagli.
- La trasparenza viene mantenuta?
- Sì. Tutte le dimensioni sono generate in PNG, dentro e fuori dalla ICO, e il PNG supporta la trasparenza pienamente.
- L'SVG è supportato?
- Sì, ed è la miglior fonte possibile: viene disegnato esattamente alla dimensione di ogni icona, quindi il risultato è perfettamente nitido.
- Che dimensione ha l'icona iOS?
- 180 pixel, per il tag apple-touch-icon. È già selezionata di default nella lista delle dimensioni.
- La mia immagine viene caricata su un server?
- No. Tutto viene generato nel tuo browser, e il file ICO stesso viene assemblato byte per byte sulla pagina.
- Cos'è site.webmanifest?
- Un file che indica ad Android quali icone usare quando qualcuno aggiunge il tuo sito alla schermata Home. Lo generiamo già pronto dentro il pacchetto.