La favicon è quel piccolo ma importante elemento grafico che appare nella scheda del browser, nei segnalibri e nei risultati di ricerca accanto al nome del sito web. Nonostante le sue dimensioni ridotte, una favicon ben implementata contribuisce significativamente alla riconoscibilità del brand e alla professionalità percepita di un sito web. In questa guida vedremo come implementare correttamente le favicon e tutte le varianti di icone web necessarie per coprire ogni piattaforma e dispositivo.
Cos’è una Favicon e Perché è Importante
Il termine “favicon” deriva dalla contrazione di “favorites icon” e fu introdotto da Microsoft con Internet Explorer 5 nel 1999. Originariamente, era un file in formato ICO di 16×16 pixel posizionato nella root del sito web. Oggi, il concetto si è evoluto enormemente e comprende un intero ecosistema di icone in diversi formati e dimensioni, ognuna ottimizzata per un contesto specifico.
L’importanza della favicon va oltre l’estetica. Quando un utente ha molte schede aperte nel browser, la favicon diventa l’unico elemento visivo che permette di identificare rapidamente il sito. Nei segnalibri, funziona come un logo in miniatura. Nei risultati di ricerca di Google su mobile, la favicon appare accanto all’URL, influenzando la percezione di affidabilità del sito. Infine, quando un utente aggiunge il sito alla schermata home del proprio smartphone, l’icona diventa di fatto l’icona dell’applicazione.
Per tutti questi motivi, dedicare attenzione all’implementazione corretta delle favicon non è un dettaglio trascurabile ma un aspetto fondamentale dello sviluppo web professionale.
Il Tag link rel=”icon”: Sintassi Base
In HTML5, la favicon viene dichiarata tramite il tag <link> nella sezione <head> del documento, utilizzando l’attributo rel=”icon”. Questa è la forma moderna e standardizzata, supportata da tutti i browser contemporanei.
La sintassi prevede tre attributi principali: rel impostato su “icon”, href con il percorso del file dell’icona, e type che indica il tipo MIME del file (ad esempio “image/png”, “image/x-icon” o “image/svg+xml”). È possibile specificare anche l’attributo sizes per indicare le dimensioni dell’icona.
Se non viene dichiarata alcuna favicon nel codice HTML, i browser cercano automaticamente un file chiamato “favicon.ico” nella directory root del sito web. Questo comportamento è mantenuto per compatibilità con le implementazioni più vecchie, ed è buona pratica posizionare comunque un file favicon.ico nella root, anche se si utilizzano formati più moderni nel markup.
Per approfondire la struttura della sezione head e gli altri tag che possono essere inseriti al suo interno, consulta il nostro articolo sulla struttura del documento HTML.
Formati e Dimensioni: ICO, PNG e SVG
La scelta del formato per la favicon dipende dal livello di supporto browser desiderato e dalla complessità grafica dell’icona. I tre formati principali sono:
Il formato ICO è il formato storico delle favicon, con il vantaggio unico di poter contenere multiple dimensioni in un singolo file (tipicamente 16×16, 32×32 e 48×48 pixel). Questo lo rende ancora rilevante come formato di fallback universale. Lo svantaggio è la qualità limitata e l’incapacità di scalare senza perdita di definizione.
Il formato PNG offre una qualità superiore con supporto per la trasparenza alfa e una buona compressione. È il formato più utilizzato per le favicon moderne. Le dimensioni comunemente necessarie sono: 16×16 per la barra degli indirizzi, 32×32 per la scheda del browser su schermi Retina, 48×48 per il pinning di Windows, 96×96 per Google TV e 192×192 per Android.
Il formato SVG rappresenta la soluzione più moderna e versatile. Essendo un formato vettoriale, un’unica immagine SVG si adatta perfettamente a qualsiasi dimensione senza perdita di qualità. Il supporto browser per le favicon SVG è ormai ampio, includendo Chrome, Firefox, Edge e Opera. Safari ha aggiunto il supporto più recentemente. La favicon SVG si dichiara con type=”image/svg+xml”.
Apple Touch Icon e Icone per Dispositivi Mobili
I dispositivi Apple utilizzano un sistema proprietario per le icone web, basato sul tag <link> con attributo rel=”apple-touch-icon”. Queste icone vengono utilizzate quando un utente aggiunge il sito alla schermata home dell’iPhone o dell’iPad, e devono seguire specifiche linee guida per dimensioni e aspetto.
La dimensione standard attuale per l’apple-touch-icon è 180×180 pixel, che copre la maggior parte dei dispositivi Apple moderni, inclusi gli iPhone con display Retina. Il sistema operativo applica automaticamente gli angoli arrotondati e, su alcune versioni, effetti di ombreggiatura. Non è necessario applicare questi effetti grafici manualmente all’immagine sorgente.
Per i dispositivi Android, le icone vengono specificate nel file manifest.json (o manifest.webmanifest), un file di configurazione dell’applicazione web progressiva che viene collegato nel tag <head> tramite <link rel="manifest">. All’interno del manifest, la proprietà “icons” contiene un array di oggetti con src, sizes e type per ciascuna dimensione dell’icona.
Le dimensioni raccomandate per il manifest sono: 192×192 pixel per l’uso generale e 512×512 pixel per la splash screen e la presentazione nel Google Play Store (per le PWA). Entrambe le dimensioni dovrebbero essere fornite in formato PNG con sfondo trasparente o con il colore di sfondo appropriato.
Web App Manifest e Icone per PWA
Le Progressive Web App (PWA) richiedono un set di icone più completo rispetto a un sito web tradizionale. Il file manifest.json, oltre alle icone standard, può specificare proprietà aggiuntive come theme_color (il colore della barra del browser), background_color (il colore di sfondo della splash screen) e display (la modalità di visualizzazione dell’app).
Per una copertura completa, il manifest dovrebbe includere icone nelle seguenti dimensioni: 48×48, 72×72, 96×96, 128×128, 144×144, 192×192, 256×256, 384×384 e 512×512 pixel. Inoltre, è consigliabile includere almeno un’icona con la proprietà “purpose” impostata su “maskable” per i dispositivi Android che utilizzano le icone adattive con forme diverse (cerchio, quadrato, goccia).
Il tag meta theme-color, inserito nell’<head> del documento, controlla il colore della barra del browser su Chrome per Android e può essere personalizzato per modalità chiara e scura utilizzando l’attributo media con la media query “prefers-color-scheme”. Questo dettaglio migliora notevolmente l’integrazione visiva del sito con l’interfaccia del dispositivo.
Generatori di Favicon e Best Practice
Creare manualmente tutte le varianti di favicon necessarie può essere un processo lungo e tedioso. Fortunatamente, esistono diversi generatori di favicon online che automatizzano il processo, producendo tutti i file e il codice HTML necessario a partire da un’unica immagine sorgente ad alta risoluzione.
I generatori più completi producono: il file favicon.ico multi-dimensione, le varianti PNG in tutte le dimensioni necessarie, l’apple-touch-icon, il file manifest.json con le icone per Android, il file browserconfig.xml per le tile di Windows e tutto il codice HTML da inserire nella sezione head. Si consiglia di partire da un’immagine sorgente di almeno 512×512 pixel per ottenere risultati ottimali.
Le best practice per le favicon includono:
- Semplicità: l’icona deve essere riconoscibile anche a 16×16 pixel, quindi prediligere forme semplici e colori contrastanti
- Coerenza col brand: utilizzare gli stessi colori e forme del logo aziendale
- Sfondo trasparente: tranne che per le icone maskable, preferire sfondi trasparenti per adattarsi ai diversi temi del browser
- Test su più piattaforme: verificare l’aspetto su browser desktop, mobile e nei segnalibri
- Cache buster: quando si aggiorna la favicon, aggiungere un parametro query string per forzare il refresh della cache del browser
Una favicon ben implementata completa l’identità visiva del sito web su ogni piattaforma e dispositivo. Investire il tempo necessario per configurare correttamente tutte le varianti è un segno di professionalità che gli utenti percepiscono, anche inconsciamente.
Hai bisogno di aiuto con la creazione e implementazione delle favicon per il tuo sito? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.