Generatore di Favicon - Crea favicon.ico e icone PWA

Trasforma un'immagine in un set completo di favicon: un favicon.ico multi-risoluzione, icone PNG, un'icona touch per Apple, un web manifest e l'HTML da incollare nel tag head. Tutto viene elaborato nel tuo browser.

Trascina le immagini qui o clicca per caricare

Supports PNG, JPG, WEBP, SVG

Cosa Produce Questo Generatore di Favicon

Una favicon ha smesso di essere un singolo file molto tempo fa. Una scheda del browser richiede 16 pixel, una scheda retina 32, un collegamento sul desktop di Windows 48, la schermata iniziale di un iPhone un PNG da 180 pixel e una web app installabile icone da 192 e 512 pixel dichiarate in un manifest. Questo strumento prende un'immagine sorgente e genera tutto in una volta: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png e un site.webmanifest, impacchettati in un ZIP insieme alle quattro righe di HTML che li collegano. Il file .ico è creato manualmente anziché delegato a un convertitore. ICO è un formato contenitore, non un codec: un'intestazione di directory di sei byte registra quante immagini ci sono all'interno, poi una voce di sedici byte per ogni immagine ne registra larghezza, altezza, lunghezza in byte e offset assoluto, seguiti dai dati dell'immagine. Tutti i browser attuali accettano dati PNG all'interno di quei payload, quindi questo generatore scrive PNG anziché la codifica legacy BMP/DIB con il suo ordine di righe dal basso verso l'alto e la maschera di trasparenza a un bit separata. Vengono inserite tre immagini — 16, 32 e 48 pixel — così Windows e i browser più vecchi possono scegliere la dimensione di cui hanno bisogno invece di ridimensionarne una in modo approssimativo. Vale la pena conoscere una stranezza del formato se mai esaminerai i byte: larghezza e altezza occupano ciascuna un singolo byte, quindi 256 viene scritto come zero e nulla di più grande può essere espresso. La qualità del ridimensionamento riceve la stessa attenzione. Ridurre un logo da 1024 pixel direttamente a 16 pixel con una singola chiamata drawImage chiede al filtro bilineare del browser di riassumere un blocco di 64 per 64 a partire da un campione di 2 per 2, scartando quasi ogni pixel sorgente e producendo il pasticcio granuloso per cui sono note le favicon fatte a mano. Questo strumento invece dimezza l'immagine ripetutamente, senza mai ridurre più della metà in un singolo passaggio, così che ogni livello calcoli la media di un vicinato completo e i dettagli fini sopravvivano fino a 16 pixel. Raggio degli angoli e margine interno sono applicati durante questa resa e non in seguito, mantenendo il bordo arrotondato anti-alias a ogni dimensione.

Perché Generare un Set Completo di Icone

Fornire un solo PNG da 32 pixel e dichiararsi soddisfatti lascia lacune visibili: una scheda fissata sfocata, un'icona inscatolata nel nero su iPhone e un prompt di installazione del browser che non appare mai perché il manifest è privo di icone.

Copre ogni superficie in una volta sola — schede, segnalibri, collegamenti rapidi di Windows, schermate iniziali iOS, prompt di installazione Android e schermate di avvio PWA

Ottieni un favicon.ico multi-risoluzione reale con immagini da 16, 32 e 48 pixel all'interno, non un PNG rinominato che alcuni strumenti rifiutano

Evita il quadrato nero che iOS mette dietro le icone touch Apple trasparenti, perché quel file viene appiattito su un colore a tua scelta

Copia codice HTML funzionante e un site.webmanifest valido, invece di cercare quali tag link e campi del manifest sono ancora attuali

Come Creare una Favicon

Quattro passaggi, tutti eseguiti localmente nel tuo browser. La tua immagine sorgente non viene mai caricata su un server.

Carica un PNG, JPG, WebP o SVG. Una sorgente quadrata dà i risultati migliori; le altre sono centrate senza essere stirate

Scrivi il nome del tuo sito per il manifest, poi scegli uno sfondo trasparente o a tinta unita e regola il raggio degli angoli e il margine interno mentre le anteprime della scheda e della schermata iniziale si aggiornano

Genera il pacchetto: il file ICO è assemblato byte per byte e ogni PNG è ridotto alla dimensione finale per la massima nitidezza

Scarica il file ZIP, decomprimilo nella cartella root pubblica del tuo sito e incolla i quattro tag link nell'head del tuo HTML

Domande Frequenti

Almeno 512 per 512 pixel, e quadrata se possibile. 512 è l'icona più grande nel pacchetto, quindi una sorgente più piccola deve essere ingrandita e apparirà morbida sulle schermate di installazione Android e sulle schermate di avvio PWA. Un'immagine non quadrata viene ridimensionata per adattarsi e centrata con spazio trasparente o colorato sui lati corti, mai stirata. Un SVG è l'input ideale perché viene rasterizzato prima a piena risoluzione di lavoro, quindi non c'è un limite superiore alla nitidezza delle icone grandi.

Perché superfici diverse richiedono dimensioni diverse e lasciare che ciascuna ridimensioni una singola immagine produce risultati peggiori rispetto a fornire quella giusta. 16 pixel sono per la scheda standard del browser e la barra dei preferiti, 32 per la scheda retina e la barra delle applicazioni di Windows, e 48 per il collegamento sul desktop di Windows. La directory ICO permette al sistema operativo di scegliere la corrispondenza esatta invece di ricampionare. Le dimensioni superiori a 48 sono deliberatamente escluse: ogni superficie che ne richiede di più legge le icone PNG o del manifest, e riempire il .ico con un'immagine da 256 pixel rende solo il file più grande senza alcun beneficio.

Perché iOS non rispetta il canale alfa in apple-touch-icon.png. Invece di comporre la tua icona sullo sfondo, riempie i pixel trasparenti di nero, trasformando un bel logo trasparente in un quadrato scuro nella schermata iniziale. Questo generatore aggira il problema appiattendo solo quel singolo file su un colore opaco — bianco per impostazione predefinita, o qualsiasi colore tu scelga. Tutti gli altri output mantengono la loro trasparenza, quindi l'icona della scheda del browser si fonderà ancora con i temi chiari e scuri.

In parte. I browser richiedono automaticamente /favicon.ico dalla radice del tuo sito anche senza alcun HTML, quindi quello funziona senza preavviso. Nient'altro lo fa. I tag link PNG permettono ai browser moderni di scegliere una dimensione nitida senza decodificare l'ICO, il tag apple-touch-icon è il modo in cui iOS trova l'icona della schermata iniziale, e il link al manifest è ciò che fa sì che Chrome ed Edge trattino il tuo sito come installabile. Incolla tutte e quattro le righe e ogni superficie sarà coperta.

È il file JSON che trasforma un sito web in qualcosa di installabile. Contiene il nome del tuo sito, il nome breve mostrato sotto l'icona della schermata iniziale, l'elenco delle icone con le loro dimensioni, un colore tema per l'interfaccia del browser, un colore di sfondo per la schermata di avvio e una modalità di visualizzazione. Chrome ed Edge non offriranno un prompt di installazione senza. Il file generato usa la visualizzazione standalone e prende i suoi colori dalla tua scelta di sfondo; modificalo liberamente in seguito per aggiungere start_url, scope o orientamento.

Sedici pixel sono all'incirca le dimensioni di un singolo carattere di testo, e i dettagli che si leggono chiaramente a 512 semplicemente non hanno spazio per esistere. Questo strumento esegue il ricampionamento nel miglior modo possibile — dimezzando ripetutamente in modo che nessun passaggio scarti più di tre quarti del suo input — ma la vera soluzione è progettuale, non di ridimensionamento. Contorni sottili, gradienti, testi piccoli e qualsiasi cosa con più di due o tre forme non sopravvivranno. Se il tuo logo completo è complesso, usa una singola lettera o il suo segno più distintivo, e aggiungi dal 10 al 15 percento di margine interno in modo che non tocchi i bordi.

Sì, e di solito dà il risultato migliore. Un avvertimento: un SVG con solo un viewBox non ha una dimensione intrinseca in pixel, e i browser rasterizzano questi file a una dimensione predefinita di 300 per 150, il che distruggerebbe la qualità prima di qualsiasi ridimensionamento. Questo strumento legge il viewBox e riscrive dimensioni esplicite prima della rasterizzazione, così la copia di lavoro inizia a piena risoluzione. Gli SVG che fanno riferimento a font esterni o immagini remote perderanno questi elementi, poiché nulla al di fuori del file viene recuperato — converti prima il testo in tracciati.

Decomprimi tutto nella root pubblica del tuo sito — la directory servita al livello superiore del tuo dominio, che è public/ in Next.js e Vite, static/ in Hugo e SvelteKit, e la web root per un hosting statico generico. I percorsi nello snippet HTML iniziano tutti con una barra, quindi saranno raggiungibili da lì senza modifiche. Nulla viene caricato in alcun momento: la tua immagine viene decodificata, ridimensionata, codificata e compressa interamente nel tuo browser, così il tuo marchio inedito non lascia mai la tua macchina.

Altri Strumenti per Immagini

Esplora altri potenti strumenti per le tue esigenze di modifica immagini

Generatore di Favicon - Crea favicon.ico e icone PWA

Cosa Produce Questo Generatore di Favicon

Perché Generare un Set Completo di Icone

Come Creare una Favicon

Domande Frequenti

Altri Strumenti per Immagini

Comprimi Immagine

Ridimensiona

Ritaglia Immagine

Converti Formato

Editor Foto

Ruota Immagine

Capovolgi Immagine

Aggiungi Filigrana

Aggiungi Bordo

Angoli Arrotondati

Filtri

Sfoca Volto

Mosaico

Rimuovi Sfondo

Migliora Immagine

Aggiungi Testo

Collage

HTML a Immagine

GIF in Sequenza

Ritaglia immagini

Rinomina immagini in blocco

Ritaglio Circolare

Bianco e Nero

Dividi Immagine

Unisci Immagini

Cambia DPI

Immagine in Base64

Immagine in PDF

Da HEIC a JPG

Rimuovi dati EXIF

Tavolozza Colori