Icone App vs Favicon: ICO vs PNG e cosa si aspetta ogni piattaforma

Le icone sono ovunque nel software moderno, dalla piccola immagine nella scheda del browser al grande quadrato nella schermata iniziale del telefono. Nonostante sembrino simili in superficie, queste icone servono scopi diversi, seguono regole di formato diverse e vengono visualizzate in contesti molto differenti. Confonderle o usare il formato sbagliato porta a schede sfocate, icone dei segnalibri mancanti o rifiuti dall'app store.

Le due categorie più comuni sono le favicon e le icone app. Una favicon (abbreviazione di "favorite icon") è la piccola immagine che appare nelle schede del browser, negli elenchi dei segnalibri e nella cronologia del browser. Un'icona app è l'immagine che rappresenta un'applicazione nativa su un sistema operativo desktop o mobile. Entrambe partono come file immagine, ma differiscono nei requisiti di formato, nelle dimensioni attese e nel modo in cui la piattaforma le individua e le utilizza.

Questo articolo spiega cos'è ogni tipo di icona, quando dovresti usare il formato ICO rispetto al PNG, e cosa si aspettano effettivamente le principali piattaforme. Che tu stia costruendo un sito web, confezionando un'applicazione desktop o distribuendo un'app mobile, saprai esattamente quale formato e quali dimensioni fornire.

Cos'è una favicon?

Una favicon è l'icona che un browser web visualizza accanto al tuo sito. La vedi nella scheda del browser accanto al titolo della pagina, nel tuo elenco di segnalibri, nella cronologia del browser e in alcuni casi nella barra degli indirizzi o nei risultati di ricerca. Il termine deriva dall'implementazione originale di Internet Explorer, che cercava un file chiamato favicon.ico nella directory root di ogni sito web.

Storicamente, le favicon dovevano essere nel formato ICO. Internet Explorer lo richiedeva e non c'erano alternative. La capacità del formato ICO di incorporare più dimensioni in un singolo file lo rendeva una scelta pratica: un unico file poteva servire l'immagine 16x16 per la scheda e l'immagine 32x32 per la barra dei segnalibri. I browser moderni (Chrome, Firefox, Safari, Edge) ora accettano anche favicon PNG specificate tramite un tag <link> nell'HTML della pagina, ma ricorrono ancora a /favicon.ico se non è presente alcun tag link esplicito.

Per la massima compatibilità con tutti i browser, incluse le versioni più vecchie e i crawler, fornire un file favicon.ico nella root del tuo sito è ancora l'approccio più sicuro. Questo file ICO dovrebbe contenere almeno le dimensioni 16x16 e 32x32. Molti sviluppatori includono anche 48x48 per le schede browser ad alto DPI. Puoi integrare con tag link PNG per le piattaforme che li preferiscono, ma il file ICO funge da rete di sicurezza.

Cos'è un'icona app?

Un'icona app rappresenta un'applicazione nativa all'interno dell'interfaccia di un sistema operativo. Su Windows, appare sul desktop, nella barra delle applicazioni, nel menu Start e nel selettore ALT+TAB. Su macOS, compare nel Dock, nel Launchpad e nel Finder. Su iOS e Android, occupa un posto nella schermata iniziale e nel cassetto delle app. Ogni piattaforma ha i propri requisiti di formato e specifiche di dimensione.

Windows usa il formato ICO per le icone delle applicazioni. Un eseguibile Windows (.exe) incorpora una risorsa ICO che il sistema operativo legge e visualizza. Questo ICO dovrebbe contenere livelli a 16, 32, 48, 64, 128 e 256 pixel per coprire ogni contesto di visualizzazione e livello di scalatura DPI. I collegamenti (.lnk) possono anche fare riferimento a file ICO esterni.

macOS usa il formato ICNS, che è il contenitore di icone multi-risoluzione proprietario di Apple. I file ICNS possono contenere dimensioni fino a 1024x1024 pixel. Le immagini sorgente sono tipicamente PNG che vengono compilate nel bundle ICNS durante il processo di build.

iOS richiede immagini PNG a dimensioni specifiche (60x60 a 2x e 3x, più varianti per iPad, Spotlight e Impostazioni). Apple non usa ICO o ICNS per le icone delle app iOS. Le immagini sono incluse nel catalogo asset del bundle dell'app come semplici PNG.

Android usa anch'esso PNG, tipicamente forniti come livelli di icone adattive (primo piano e sfondo) a più densità (da mdpi a xxxhdpi). L'icona del Play Store è un PNG 512x512.

Le web app (PWA) usano icone PNG referenziate in un file manifest.json. Le dimensioni comuni sono 192x192 e 512x512. Queste icone appaiono nella schermata iniziale quando un utente installa la PWA.

Consigli pratici ed errori comuni

Ottenere icone corrette su tutte le piattaforme richiede attenzione ad alcuni dettagli facili da trascurare. Ecco gli errori che gli sviluppatori commettono più spesso, insieme a soluzioni semplici.

Affidarsi a un singolo PNG per tutto: un singolo PNG 512x512 funzionerà per alcuni contesti ma fallirà per altri. I browser che cercano /favicon.ico non lo troveranno. Gli eseguibili Windows non possono incorporare un PNG come risorsa icona. Genera sempre un file ICO dedicato per i casi d'uso favicon e Windows, anche se il PNG è il tuo formato sorgente principale.

Usare una sola dimensione nel file ICO: un file ICO con solo 32x32 appare bene nella scheda del browser ma diventa una macchia sfocata nella visualizzazione icone grandi di Windows Explorer. Includi sempre più dimensioni. Il set completo (da 16 a 256) assicura che ogni contesto di visualizzazione abbia un livello pixel-perfect da cui attingere.

Dimenticare i display ad alto DPI e Retina: gli schermi moderni concentrano da due a tre volte i pixel dei display standard. Una favicon 16x16 che appare bene su un monitor 1080p risulta minuscola e sfocata su un display Retina. Includi un livello 32x32 (che i browser usano con scalatura 2x per lo slot scheda da 16px) e un livello 48x48 per la scalatura 3x o le schede ad alto DPI.

Non testare su più piattaforme: un'icona perfetta sulla tua macchina di sviluppo potrebbe apparire completamente diversa su un altro sistema operativo o browser. Testa la tua favicon almeno su Chrome, Firefox, Safari ed Edge. Se stai costruendo un'app desktop, testa l'ICO su Windows al 100%, 150% e 200% di scalatura DPI. Pochi minuti di test risparmiano ore di lamentele degli utenti.

Per un approfondimento sul formato ICO e la sua struttura, o per aiuto nella creazione specifica di favicon, consulta la nostra guida alla creazione di favicon.