MiServe DevTools

I tuoi adesivi

Fissa qui gli strumenti. Restano salvati in questo browser.

Generatore di favicon e icone per app

Trasforma un'immagine in un set completo di favicon: favicon.ico, icone PNG, l'Apple touch icon, le icone Android e maskable, un web manifest e l'HTML per collegarli.

Opzioni
Adattamento
Sfondo
0%
0%

Riempie l'Apple touch icon e l'icona maskable, che non possono essere trasparenti.

Viene scritto nel manifest e nel tag theme-color. Alcuni browser lo usano per colorare la propria interfaccia.

Compare sotto l'icona nella schermata Home, dove c'è spazio per circa 12 caratteri.

Funziona nel tuo browser con WebAssembly. Nulla di ciò che incolli viene caricato.

Informazioni su questo strumento

Quale file usa ogni piattaforma

Un browser desktop prende l'icona per le schede e i preferiti da <link rel="icon">: di solito il PNG da 16 pixel su uno schermo standard e quello da 32 pixel su uno ad alta densità. Se la pagina non indica nessuna icona, il browser richiede invece /favicon.ico.

iPhone e iPad usano apple-touch-icon.png, da 180 pixel, quando qualcuno aggiunge il sito alla schermata Home. Android e le web app installate leggono l'elenco icons del web manifest: 192 pixel per la schermata Home, 512 pixel per la schermata di avvio e l'icona maskable dove è il launcher a dare forma alle icone. mstile-150x150.png serve per i riquadri delle versioni meno recenti di Windows ed è incluso per completezza.

Perché favicon.ico conta ancora

I browser richiedono /favicon.ico di loro iniziativa per tutto ciò che non ha un head HTML in cui indicare un'icona: un PDF, un'immagine o una risposta JSON aperti in una scheda. Anche i lettori di feed, i crawler e altri strumenti spesso la cercano lì. Il formato ICO può contenere più dimensioni in un solo file, e questo contiene 16, 32 e 48 pixel, ciascuna salvata come dati PNG: un formato che Windows legge da Vista in poi, come tutti i browser attuali.

Icone maskable e zona sicura

I launcher Android ritagliano le icone delle app a cerchio, a quadrato con gli angoli arrotondati o in un'altra forma. Per non perdere nulla nel ritaglio, un'icona normale di solito viene rimpicciolita e appoggiata su una base bianca. Un'icona maskable invece copre l'intero quadrato con uno sfondo opaco e tiene tutto ciò che conta dentro la zona sicura: un cerchio centrato con un diametro pari all'80% della larghezza dell'icona. Tutto ciò che sta fuori da quel cerchio può essere tagliato.

Questo strumento riempie l'icona maskable con il colore di sfondo dell'app e lascia un margine di almeno il 14% su ogni lato attorno alla tua grafica. Controlla l'anteprima rotonda e aumenta il margine interno se un angolo della grafica viene tagliato.

Apple ignora la trasparenza

iOS non mantiene i pixel trasparenti in un'icona della schermata Home: li colora di nero e arrotonda gli angoli per conto suo. Per questo l'Apple touch icon generata qui è sempre opaca e quadrata, riempita con il colore di sfondo dell'app, con un margine di almeno l'8% e senza il raggio degli angoli che hai impostato.

Come funziona

Le icone vengono disegnate dai package di immagini di Go compilati in WebAssembly, in un thread in background del tuo browser, con il ricampionamento Catmull-Rom. Un'immagine di partenza molto grande viene prima ridotta nella pagina, così ogni modifica viene ridisegnata rapidamente. La tua immagine non viene caricata.

Domande

Quanto deve essere grande l'immagine di partenza?

Un'immagine quadrata di almeno 512 × 512 pixel, idealmente un PNG con lo sfondo trasparente. L'icona più grande del set è di 512 pixel, quindi un'immagine più piccola va ingrandita e risulta sfocata.

Mi serve ancora un file favicon.ico?

Sì. I browser ripiegano su /favicon.ico ogni volta che una pagina o un file non indica nessuna icona, e anche alcuni crawler e lettori di feed cercano quel file. Tienilo nella cartella principale del sito anche se colleghi le icone PNG.

Dove metto i file?

Estraili nella cartella principale del sito e incolla lo snippet HTML nell'head di ogni pagina. Lo snippet e il manifest usano percorsi che partono dalla radice, come /favicon.ico, quindi modificali se i file si trovano altrove.

Perché il browser mostra ancora la vecchia favicon?

I browser tengono le favicon in cache a lungo. Apri direttamente l'indirizzo dell'icona, per esempio /favicon.ico, e ricaricalo, oppure svuota la cache del sito. Una finestra privata mostra ciò che vede un nuovo visitatore.

La mia immagine viene caricata?

No. L'immagine viene letta dal tuo browser e ogni icona viene generata sul tuo dispositivo con WebAssembly. Lo strumento non fa alcuna richiesta di rete con l'immagine.

Altri strumenti in Grafica