Generatore di favicon

Un favicon (abbreviazione di 'favorite icon') è la piccola icona quadrata che il browser mostra accanto al titolo di una pagina — nella tab del browser, nella barra dei preferiti, nella cronologia e a volte nei risultati di ricerca. Di solito viene mostrata a 16×16 o 32×32 pixel e si trova nella root del sito come favicon.ico. I siti moderni aggiungono anche un favicon.svg, un'Apple touch icon e icone PWA per le schermate home. Un favicon riconoscibile migliora i tassi di clic nei preferiti e nei risultati di ricerca.

Inizia con 16×16 e 32×32 — le due dimensioni che i browser mostrano nelle tab e nei preferiti — raggruppate in un unico favicon.ico. Per una copertura completa aggiungi anche 48×48 (usato da Windows), un apple-touch-icon 180×180 per iOS, e PNG 192×192 e 512×512 per Android e le schermate home PWA. Questo generatore produce tutte queste dimensioni in una volta da un'unica sorgente, quindi non hai mai bisogno di ridimensionare manualmente o usare più strumenti.

Scegli una sorgente — carica un'immagine (PNG, JPG, SVG o WebP), digita da una a tre lettere, o incolla un'emoji — poi scegli un colore di sfondo, forma (quadrato, arrotondato o cerchio) e padding. Lo strumento renderizza tutte le dimensioni favicon su un canvas, impacchetta 16/32/48 in un favicon.ico, e ti consegna uno ZIP con tutti i file più lo snippet HTML da incollare nel tuo <code>&lt;head&gt;</code>. L'intero processo richiede meno di un minuto e non richiede software di design.

Sì — perché non viene caricato nulla in realtà. Ogni passaggio viene eseguito nel tuo browser usando un <code>&lt;canvas&gt;</code> HTML e JavaScript: la tua immagine viene letta localmente, ridimensionata, codificata in PNG e ICO, e compressa in ZIP sul tuo dispositivo. Nessun file viene mai inviato a un server, a differenza di strumenti come favicon.io e RealFaviconGenerator.net che elaborano la tua immagine nel cloud. Il tuo logo non lascia mai il tuo computer — importante se stai lavorando su un progetto cliente o su un prodotto non ancora pubblicato.

Quasi sempre è la cache del browser. I browser memorizzano nella cache i favicon in modo aggressivo, quindi esegui un ricaricamento forzato (Ctrl+F5), apri l'URL dell'icona direttamente (tuosito.com/favicon.ico) per confermare che si carica, o prova in una finestra privata. Controlla anche che i file siano nella root del tuo sito, che i percorsi nei tuoi tag <code>&lt;link&gt;</code> siano corretti (uno slash iniziale è importante), e che tu abbia caricato tutte le dimensioni. I nuovi favicon possono impiegare un po' di tempo per aggiornarsi nei preferiti e nei risultati di ricerca.

Sì — la Canvas API e il download dei file funzionano in Safari iOS, Chrome per Android e Samsung Internet. Puoi caricare una foto dal rullino fotografico, digitare una lettera, o incollare un'emoji, poi scaricare lo ZIP completo direttamente sul telefono. È utile per prototipare rapidamente un favicon quando sei lontano dalla scrivania. Il layout si adatta agli schermi piccoli, quindi lo strumento è comodo da usare a 375px.

Le icone manifest (PNG 192×192 e 512×512 elencati in site.webmanifest) sono quelle che Android e le PWA installate usano. Un'icona 'maskable' mantiene il suo contenuto importante all'interno di una zona sicura centrale — circa l'80% dell'icona — in modo che rimanga ben visibile quando il sistema la ritaglia in cerchio, squircle o quadrato arrotondato. Questo generatore aggiunge automaticamente quel padding della zona sicura alle icone 192 e 512 e le contrassegna con <code>purpose: maskable</code>. Non devi calcolare manualmente l'area sicura.