Favicon e manifest web
Un'immagine in ingresso, l'intero corredo in uscita: un vero ICO multi-dimensione, l'icona touch di Apple appiattita come Apple pretende, i PNG del manifest, il manifest web stesso e il blocco HTML da incollare. Ti mostra anche il ritaglio maskable di Android prima che morda, che è il punto in cui la maggior parte delle icone perde i bordi senza che nessuno se ne accorga.
Il cerchio è fin dove Android può ritagliare. Tutto ciò che sta fuori può essere tagliato su alcuni dispositivi.
| File | Dimensione | Chi lo usa |
|---|
Perché il .ico conta ancora
Un solo PNG basta alla maggior parte dei browser, e se ti servisse soltanto un'icona per la scheda potresti fermarti lì. L'ICO si guadagna il posto perché tiene più risoluzioni in un unico file ed è il sistema operativo a scegliere quella giusta: la scheda usa la 16, una scorciatoia appuntata o un collegamento sulla scrivania usa la 32 o la 48, e ognuna è disegnata da una bitmap fatta per quella dimensione invece che schiacciata al volo da una grande. Il file che esce di qui è un contenitore di PNG con una piccola intestazione, ed è ciò che legge qualunque browser uscito in questo secolo.
La zona sicura dell'icona maskable
Android non promette di mostrare la tua icona come un quadrato. A seconda del launcher può ritagliarla a cerchio, a squircle o a quadrato arrotondato, e l'unica garanzia è il cerchio interno: l'ottanta per cento della larghezza, centrato. La grafica che arriva ai bordi è esattamente quella che perde i bordi. Il rimedio è dare margine alle icone del manifest fin dentro quella zona sicura, e l'anteprima qui disegna il ritaglio così lo vedi prima di un utente.
Perché l'icona touch di Apple non ha trasparenza
iOS compone l'icona della schermata Home sulla propria forma arrotondata e non rispetta il canale alfa come vorresti: le zone trasparenti escono nere. Perciò quel file in particolare viene appiattito sul tuo colore di sfondo prima della codifica, mentre i PNG del manifest conservano l'alfa, dove viene gestito correttamente.
Che cosa fare con i file
Mettili nella radice del sito, non in una cartella di asset: browser e crawler indovinano il percorso della favicon e alcuni la richiedono che tu la colleghi o no. Poi incolla il blocco HTML nella testa della pagina. Il percorso del manifest è l'unica riga che deve corrispondere a dove metti davvero il file.
Domande frequenti
Serve ancora un favicon.ico se ho i PNG?
In senso stretto, no. In pratica, sì: un'infinità di crawler, lettori di feed e strumenti datati chiedono la favicon per percorso e il tuo markup non lo guardano mai. Costa qualche kilobyte.
La mia icona è impastata a 16 pixel. Che posso fare?
Qui non c'è nulla che possa rimediare, perché lo spazio non basta. A quella dimensione un marchio ha una decina di pixel leggibili in larghezza; un logotipo diventerà sempre poltiglia. Dai in pasto una versione semplificata — una forma, una lettera — e tieni il lockup completo per tutto il resto.
Conviene disattivare il margine maskable?
Solo se la tua grafica ha già di suo un margine generoso. Se riempie la cornice, lascialo attivo, altrimenti Android ci taglia dentro.
La mia immagine viene caricata da qualche parte?
No. Ogni dimensione viene disegnata su un canvas in questa pagina e l'archivio è assemblato in memoria. Non viene inviato nulla.
Realizzato dal team GO AI. Generatore di icone per app · Ridimensionatore in blocco · Tutti gli strumenti gratuiti