La favicon (abbreviazione di Favorites Icon, chiamata anche icona del sito, icona dei segnalibri) è la piccola icona visualizzata nelle tab del browser, nella barra dei segnalibri, nella cronologia, nella barra degli indirizzi, è uno degli elementi più basilari per il riconoscimento del brand di un sito web. Un sito senza favicon mostra un'icona di documento vuoto tra le tante tab, appare poco professionale; una favicon ben progettata permette agli utenti di trovare rapidamente il tuo sito tra un mucchio di tab, è una risorsa fondamentale obbligatoria prima del lancio di un sito.
I siti web moderni non hanno bisogno solo di una favicon.ico. Con la diffusione dei dispositivi mobili e lo sviluppo delle PWA (Applicazioni Web Progressive), un pacchetto di icone di sito completo deve includere più dimensioni e formati: la tradizionale favicon.ico per la compatibilità con browser vecchi, PNG 16/32 per le tab normali e i segnalibri del browser, apple-touch-icon 180×180 per gli utenti iPhone/iPad che usano «aggiungi a schermata iniziale», PNG 192/512 per il desktop Android e le schermate di avvio PWA, più site.webmanifest che dice al browser dove si trovano queste icone e il colore tema. Creare manualmente tutte queste dimensioni e scrivere il codice di riferimento HTML corretto è una seccatura per gli sviluppatori senza background di progettazione.
Le favicon testuali sono il modo più veloce: la maggior parte dei blog personali, progetti open source, sistemi interni in realtà non hanno bisogno di un design di logo complesso, usare l'iniziale del brand (es. G per Google, F per Facebook) abbinata al colore del brand per fare un'icona testuale semplice dà un ottimo risultato. Lo strumento fornisce 8 font di sistema comuni, regolazione della dimensione del font, personalizzazione dei colori, senza aprire Photoshop/Figma, puoi fare una favicon professionale in un minuto.
Le favicon Emoji sono una soluzione semplice popolare negli ultimi anni: gli Emoji sono di per sé piccole icone disegnate da designer, con colori vividi e alto riconoscimento, per progetti personali, prototipi, siti di documentazione usare un Emoji pertinente (es. razzo 🚀 per velocità, lampadina 💡 per idee, fuoco 🔥 per popolare) come favicon è divertente e veloce, molto meglio di un'icona vuota, e ha anche una coerenza cross-platform (anche se il rendering varia leggermente tra sistemi).
La modalità immagine è adatta a scenari dove hai già un logo: se hai già un'immagine del logo del brand, dopo il caricamento lo strumento la ritaglia automaticamente al centro in quadrato, generando tutte le dimensioni necessarie. Nota che a piccole dimensioni l'icona è larga solo 16 pixel, i logo complessi dopo il ridimensionamento diventano una macchia sfocata, ecco perché la favicon di solito non è il logo completo, ma la parte simbolica/marchio del logo — come il segno di spunta Nike, la mela di Apple, la M di McDonald's, le forme semplici rimangono chiaramente distinguibili anche a piccole dimensioni.
Perché generare localmente senza caricare sul server? Primo: privacy — logo di brand non pubblicati, bozzetti di design di clienti sono asset sensibili, caricarli su server di strumenti terzi c'è rischio di fuga; secondo: velocità — il disegno locale su Canvas è istantaneo, non devi aspettare caricamento e download; terzo: affidabilità — non serve rete, funziona anche in ambienti di rete interna. Tutta l'elaborazione delle immagini usa le API Canvas native del browser, l'impacchettamento ZIP usa la libreria JSZip in puro JavaScript, non sono necessari servizi backend.
Le tre forme (quadrata, arrotondata, circolare) servono per adattarsi a stili di piattaforme diverse: Windows usa tradizionalmente icone quadrate, iOS/iPadOS usa rettangoli arrotondati (Squircle), Android e alcuni siti usano icone circolari. L'arrotondamento al 22% nello strumento è una dimensione di arrotondamento abbastanza generale, vicina allo stile UI moderno. Nota che quando il browser visualizza la favicon di solito non ritaglia l'icona in cerchio (tranne alcuni browser), la forma circolare influenza principalmente l'aspetto dopo l'aggiunta alla schermata iniziale del telefono.
È importante specificare: ① l'effetto della favicon dipende fortemente dalla semplicità del design, i motivi complessi a 16×16 saranno inevitabilmente sfocati, si consiglia di usare testo/grafica/Emoji semplici; ② l'effetto di rendering degli Emoji dipende dal font del sistema operativo, gli Emoji potrebbero apparire leggermente diversi su sistemi diversi; ③ il file ICO è generato incorporando un PNG 32×32, soddisfa la maggior parte delle esigenze di compatibilità; ④ lo sfondo trasparente su alcuni browser vecchi potrebbe essere visualizzato come sfondo nero o bianco, si consiglia di usare un colore di sfondo per i siti principali per maggiore sicurezza.
