Italiano
Crea favicon da un'immagine, un testo o un'emoji: tutte le dimensioni più l'HTML da incollare.
Ultimo aggiornamento
Coddy ti insegna facendoti scrivere codice vero nel browser: lezioni interattive, feedback immediato e aiuto dall'AI quando ti blocchi.
Una *favicon* è la piccola icona che compare nelle schede del browser, nei segnalibri, nella cronologia e nella schermata Home di iOS / Android quando qualcuno salva il tuo sito. È un dettaglio piccolo con un impatto sorprendentemente grande su come viene percepito un progetto: pubblicare una vera favicon fa la differenza tra un quadratino provvisorio e un prodotto finito.
I browser moderni chiedono la favicon in diverse dimensioni e formati. Le icone di schede e segnalibri vogliono un PNG 16×16 o 32×32. Safari su iOS vuole un apple-touch-icon.png da 180×180. L'aggiunta alla schermata Home di Android vuole 192×192 e 512×512 dentro un web manifest. I browser più vecchi e alcune integrazioni si aspettano ancora un favicon.ico multi risoluzione. Ritagliarle tutte a mano, una alla volta, è un lavoro noioso: un favicon generator lo fa con un clic.
Questo generatore funziona interamente nel browser. L'immagine che carichi viene decodificata in locale in un <canvas>, ogni dimensione di output viene disegnata accanto e l'intero pacchetto (PNG, ICO, web manifest, README e frammento HTML) viene raccolto in un .zip senza caricare mai nulla.
favicon.ico è un formato contenitore che può raccogliere più dimensioni (16, 32, 48), così chi lo richiede con sistemi datati trova sempre ciò che gli serve.apple-touch-icon.png e le voci di un manifest.webmanifest): devono esserci entrambi.Usa **Testo** per un monogramma di 1-3 caratteri, **Emoji** per un'icona con un solo glifo o **Immagine** per trascinare un PNG, un JPEG o un SVG. La modalità Immagine è il miglior punto di partenza se hai già un logo.
Scegli un colore di sfondo (e un colore del testo per i monogrammi). Scegli **Quadrato**, **Arrotondato** o **Cerchio**: i quadrati arrotondati riprendono il modo in cui iOS ritaglia le icone della schermata Home, quindi sembrano native.
Il nome del sito diventa il meta tag application-name e lo short_name del manifest.webmanifest della PWA. Usa il nome del brand che gli utenti vedrebbero in un segnalibro del browser.
Scorri la riga delle anteprime per verificare che l'icona si legga ancora a 16px e 32px (le dimensioni delle schede). Se il disegno perde leggibilità a quelle dimensioni, semplifica la sorgente: meno caratteri o un ritaglio più stretto.
Clicca **Scarica il pacchetto favicon (.zip)** per ottenere tutti i file in una volta. Metti i file nella radice del sito, poi incolla il frammento HTML nel tuo <head>: hai finito.
Ogni download contiene i file qui sotto. Il frammento HTML li collega; se te ne serve solo una parte, tieni quelli che corrispondono alle piattaforme che supporti.
| File | Dimensione | Usato da | Note |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Schede del browser (fallback per sistemi datati) | Contenitore ICO multi risoluzione: ogni browser richiede ancora questo URL. |
favicon-16x16.png | 16×16 | Icona della scheda del browser | Usato sugli schermi ad alta densità tramite <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | Scheda del browser + segnalibri | L'icona principale della scheda sugli schermi retina. |
favicon-48x48.png | 48×48 | Riquadro del sito su Windows, barra delle applicazioni | Incluso anche dentro favicon.ico per i sistemi datati. |
apple-touch-icon.png | 180×180 | Aggiungi a Home di Safari su iOS | Se manca, iOS usa come ripiego uno screenshot: includilo sempre. |
android-chrome-192x192.png | 192×192 | Schermata Home di Android | Richiamato dal manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | Richiesta di installazione PWA + schermata iniziale | Obbligatorio per le PWA installabili. |
site.webmanifest | - | Metadati di installazione PWA | Elenca icone, nome e colore del tema. Collegato tramite <link rel="manifest">. |
Scrivi 1-3 lettere (per esempio **Co**, **C** o **JS**), scegli un colore del brand e seleziona **Arrotondato** per una sagoma adatta a iOS.
I monogrammi sono i più leggibili a 16px perché non ci sono dettagli da perdere. Usa una lettera maiuscola in grassetto o una coppia di due lettere compatta e mantieni un forte contrasto tra colore del testo e dello sfondo.
Scegli un'emoji che rispecchi lo spirito del progetto: 🚀 per un lancio, 🧪 per un esperimento, 📚 per la documentazione. Imposta uno sfondo neutro.
Le favicon con emoji risultano simpatiche per siti personali, hackathon e progetti secondari. Ricorda che la stessa emoji appare diversa su macOS (Apple) e Windows (Segoe): una volta esportato, il pacchetto congela l'aspetto macOS / Linux / Chrome che vedi nell'anteprima.
Trascina un PNG o un SVG del tuo logo, aumenta il cursore **Padding** per evitare che il disegno tocchi i bordi e attiva **Riempi con il colore di sfondo** se il logo ha bordi trasparenti.
Gli input SVG restano nitidi a ogni dimensione. Anche gli input PNG funzionano, ma diventano sfocati oltre la loro risoluzione nativa: parti da una sorgente di almeno 512×512.
apple-touch-icon.png. Se non è dichiarata un'icona Apple touch, iOS usa come ripiego uno screenshot della pagina, che di solito è bruttissimo.<link rel="icon" href="/images/favicon.ico">. Funziona, ma i browser cercano comunque /favicon.ico nella radice del sito. Metti una copia anche nella radice oppure accetta i 404 nel log degli accessi.favicon.ico?v=2) o svuotando la cache del sito.favicon.ico multi risoluzione (16/32/48), un PNG 32×32, un apple-touch-icon.png da 180×180 per iOS e PNG da 192×192 e 512×512 dichiarati in un site.webmanifest per Android e le PWA installabili. Il pacchetto scaricato da questo strumento li contiene tutti.<link rel="icon" type="image/png">. Supportano anche tutti il classico URL /favicon.ico. Le favicon SVG sono supportate dai browser moderni e permettono a un unico file di restare nitido a ogni dimensione: sono ottime se il tuo logo è già vettoriale, ma Safari su iOS ha ancora bisogno del PNG di riserva.Cmd/Ctrl + Shift + R), cancella i dati del sito nei DevTools o aggiungi una query string all'URL della favicon (/favicon.ico?v=2). Anche una CDN davanti al tuo sito di solito va svuotata./apple-touch-icon.png. Il pacchetto la include.<canvas> e ogni output (PNG, ICO, ZIP, manifest) viene prodotto in locale. Niente lascia il tuo computer.