Generatore Favicon, Icone App e Manifesto PWA
Genera file binari favicon.ico (16x16, 32x32, 48x48), icone iOS Apple Touch, icone Android PWA con zona sicura dell'80% e il manifesto site.webmanifest.
Strumenti OnlineZona Sicura Icona Mascherabile PWA & Geometria Badge
Il 20%+ mantiene il logo nel Cerchio della Zona Sicura dell’80% su Android
Console di Anteprima Live Multi-Piattaforma
Simulazione in tempo reale per Risultati Google Search (SERP), Schede Browser, Schermata Home iOS e Maschere Adattive Android
Verifica come Google Search mostra la tua favicon circolare da 48×48 px accanto al percorso del dominio su smartphone e desktop.
Verifica come Google Search mostra la tua favicon circolare da 48×48 px accanto al percorso del dominio su smartphone e desktop.
La trasparenza viene automaticamente sostituita con il tuo sfondo solido affinché iOS non trasformi il canale alfa in nero pieno.
Metadati del Manifesto Web App (site.webmanifest)
<!-- Standard Favicon & Google Search (48x48 multiple) -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<!-- Apple iOS Home Screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android & PWA Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#4f46e5" />Tabella Ufficiale di Riferimento Dimensioni Favicon, Apple Touch Icon e Manifesto PWA
Specifiche tecniche complete conformi a Google Search Central, Apple iOS Human Interface Guidelines e W3C Web App Manifest
| Nome File | Risoluzione (px) | Standard di Codifica | Piattaforma di Destinazione e Contesto | Requisito Tecnico di Conformità |
|---|---|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Contenitore Binario Microsoft ICONDIR | Browser Classici e Crawler di Google Search | Deve includere obbligatoriamente il fotogramma binario 48×48 px; non rinominare mai un semplice file PNG in .ico. |
| favicon-16x16.png | 16×16 px | PNG RGBA a 32 bit | Schede Browser Desktop Standard (1x) e Segnalibri | Sagoma ad alto contrasto necessaria per mantenere la leggibilità a 16 pixel. |
| favicon-32x32.png | 32×32 px | PNG RGBA a 32 bit | Schede Browser Display Retina (2x HiDPI) | Icona principale della scheda sui moderni monitor ad alta densità. |
| favicon-48x48.png | 48×48 px | PNG RGBA a 32 bit | Risultati di Ricerca Google (SERP) Mobile e Desktop | Soglia minima richiesta da Google Search Central (multiplo esatto di 48 px: 48×48, 96×96, 144×144). |
| favicon-96x96.png | 96×96 px | PNG RGBA a 32 bit | Risultati Google SERP ad Alta Densità e Scorciatoie Desktop | Multiplo 2x di 48 px raccomandato per un ritaglio circolare nitido nei risultati di ricerca. |
| apple-touch-icon.png | 180×180 px | PNG Opaco a 24 bit | Schermata Home di Apple iPhone e iPad (Web Clips) | Richiede uno sfondo opaco; iOS trasforma qualsiasi pixel trasparente in nero solido (#000000). |
| android-chrome-192x192.png | 192×192 px | PNG 32 bit (purpose: any) | Schermata Home e Cassetto App di Android | Requisito fondamentale negli audit Google Lighthouse per l’installabilità PWA. |
| android-chrome-512x512.png | 512×512 px | PNG 32 bit (purpose: any) | Schermata di Avvio (Splash Screen) Android PWA e WebAPK | Grafica master ad alta risoluzione obbligatoria per la generazione automatica della schermata iniziale. |
| maskable-icon-512x512.png | 512×512 px | PNG Opaco (purpose: maskable) | Forme Adattive Launcher Android (Cerchio, Squircle, Goccia) | Gli elementi grafici principali devono trovarsi nel cerchio centrale sicuro dell’80% (almeno 20% di margine interno). |
Deve includere obbligatoriamente il fotogramma binario 48×48 px; non rinominare mai un semplice file PNG in .ico.
Sagoma ad alto contrasto necessaria per mantenere la leggibilità a 16 pixel.
Icona principale della scheda sui moderni monitor ad alta densità.
Soglia minima richiesta da Google Search Central (multiplo esatto di 48 px: 48×48, 96×96, 144×144).
Multiplo 2x di 48 px raccomandato per un ritaglio circolare nitido nei risultati di ricerca.
Richiede uno sfondo opaco; iOS trasforma qualsiasi pixel trasparente in nero solido (#000000).
Requisito fondamentale negli audit Google Lighthouse per l’installabilità PWA.
Grafica master ad alta risoluzione obbligatoria per la generazione automatica della schermata iniziale.
Gli elementi grafici principali devono trovarsi nel cerchio centrale sicuro dell’80% (almeno 20% di margine interno).
Come Generare e Installare Favicon, Icone iOS e Manifesto PWA
Procedura in 5 passaggi per la piena conformità con Google Search Central e i dispositivi mobili
Scegli la Sorgente Grafica nello Studio 3-in-1
Carica un file logo SVG o PNG esistente, digita un monogramma da 1 a 3 lettere con font personalizzato oppure seleziona un’emoji vettoriale.
Controlla il Contrasto Dark Mode e la Zona Sicura
Verifica il rilevatore automatico di visibilità sulle schede scure e regola il cursore del margine interno (20%+ per Android Maskable) dentro il cerchio dell’80%.
Esamina le 4 Anteprime Multi-Piattaforma in Tempo Reale
Osserva la resa nei risultati Google Search (mobile e desktop), sulle schede chiare e scure di Chrome/Safari, nello squircle iOS 180×180 e nelle maschere Android.
Configura il Manifesto Web e Scarica l’Archivio ZIP
Imposta il nome dell’applicazione e i colori del tema, quindi premi Scarica Pacchetto Icone Completo (.ZIP) per ottenere tutti i 10 file pronti all’uso.
Estrai i File nella Cartella Pubblica e Incolla il Codice
Copia i file estratti nella directory radice public/ e incolla con un clic i tag HTML5 <head> o l’oggetto Metadata nativo per Next.js App Router.
Codifica Binaria 100% nel Browser e Assoluta Riservatezza del Brand
Ogni ridimensionamento su HTML5 Canvas, la creazione degli header binari ICONDIR, la scansione della luminanza dei pixel e la compressione ZIP avvengono esclusivamente nella memoria RAM locale del tuo dispositivo. I tuoi loghi aziendali non vengono mai caricati su server esterni.
Domande Frequenti (Standard Favicon, Apple Touch Icon & PWA)
Risposte tecniche sull’indicizzazione in Google Search, contenitori binari .ICO e icone mascherabili
Q:Cosa succede se carico un’icona completamente bianca con sfondo trasparente?
Un’icona bianca su fondo trasparente (luminanza superiore al 90%) risalta bene in modalità scura, ma sparisce quasi del tutto sulle schede chiare standard di Chrome, Edge e Safari. Il nostro sistema rileva automaticamente questo rischio e mostra un avviso giallo, permettendoti di aggiungere con un clic uno sfondo solido o sfumato ad alto contrasto.
Q:Perché su Android l’icona della mia Web App appare rimpicciolita dentro un cerchio bianco?
Questo fastidioso effetto "francobollo" si verifica quando il file site.webmanifest non include un’icona specifica con attributo "purpose": "maskable". In assenza di tale dichiarazione, Android non osa ritagliare l’immagine e la rimpicciolisce forzosamente dentro un piatto bianco. Il nostro generatore crea il file maskable-icon-512x512.png dedicato proprio per eliminare il bordo bianco.
Q:Quanti byte occupa l’intestazione binaria di un file favicon.ico conforme alle specifiche Microsoft?
L’intestazione principale ICONDIR occupa esattamente 6 byte (00 00 01 00 seguito dal numero di immagini), a cui si aggiungono 16 byte per ciascuna risoluzione presente (3 × 16 = 48 byte per le tre viste 16×16, 32×32 e 48×48). I dati binari della prima immagine PNG iniziano quindi esattamente all’offset di 54 byte.
Q:È preferibile usare un’emoji vettoriale o un monogramma se un progetto non ha ancora un logo definitivo?
Entrambe le soluzioni sono ottime per andare online rapidamente: un monogramma di 2 lettere con spessore 800 (Extra-Grassetto) su sfondo sfumato trasmette un’identità aziendale sobria e leggibile già a 16×16 pixel, mentre un’emoji vettoriale (come un razzo o un fulmine) offre un impatto visivo immediato per strumenti digitali e startup.
Q:Come fa Next.js App Router a collegare tutte le icone e il manifesto senza scrivere tag HTML manuali?
Next.js App Router mette a disposizione l’oggetto tipizzato Metadata nel file app/layout.tsx. Copiando la scheda di codice Next.js generata dal nostro studio, il framework compila automaticamente tutti i tag <link rel="icon">, <link rel="apple-touch-icon"> e <link rel="manifest"> nell’intestazione di ogni pagina.
Cos'è Generatore Favicon, Icone App e Manifesto PWA?
Chi progetta siti e applicazioni web lo sa bene: basta una favicon sgranata nella scheda del browser o un’icona rimpicciolita dentro un cerchio bianco sullo smartphone per far sembrare trascurato anche il software più curato. Oggi non esiste più una singola icona universale, ma una vera e propria architettura multi-formato: il motore di ricerca Google pretende multipli esatti di 48×48 pixel per mostrare il logo nei risultati di ricerca, i display Retina su desktop richiedono livelli nitidi a 32×32 e 96×96 px, iPhone e iPad convertono qualsiasi trasparenza in un quadrato nero se non trovano un’immagine opaca da 180×180 px, mentre i dispositivi Android ritagliano dinamicamente il bordo esterno delle Web App (PWA). Il nostro Generatore Favicon, Icone App e Manifesto PWA realizza l’intero pacchetto di produzione 100% lato client nel browser sfruttando le API native HTML5 <canvas>, ArrayBuffer e DataView.
Caso Reale: Correzione del Contrasto su Schede Chiare e dell’Effetto «Francobollo» su Android per una Web App Mobile-First
Un team di sviluppo impegnato nel lancio di una piattaforma di prenotazioni mobile-first aveva caricato come icona un pittogramma completamente bianco su sfondo trasparente (luminanza relativa del 94,8%). Se sulle schede scure il simbolo spiccava bene, sui browser in Modalità Chiara spariva quasi del tutto contro la barra grigio-bianca; inoltre, gli utenti Android che installavano la PWA vedevano l’icona rimpicciolita dentro un antiestetico piatto bianco perché mancava il file maskable. Grazie all’avviso automatico di visibilità dello studio, il team ha applicato uno sfondo solido Verde Smeraldo (#10B981) con il 20% di margine interno, ottenendo un archivio ZIP completo da 18,9 KB perfettamente visibile su ogni tema e dispositivo.
Prospetto Tecnico di Validazione Multi-Piattaforma (Benchmark Mobile-First — 18,9 KB)
| File nel Pacchetto | Risoluzione & Peso | Struttura Binaria / Canale Alfa | Difetto Visivo Eliminato |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px (4,3 KB) | Header ICONDIR 54 byte + 3 livelli PNG | Indicizzazione garantita su Google Search e zero errori 404 |
| favicon-48x48.png & 96x96.png | 48² & 96² px (3,2 KB) | PNG RGBA 32 bit (multipli 1x e 2x) | Nitidezza perfetta nel badge circolare dei risultati Google |
| apple-touch-icon.png | 180×180 px (4,7 KB) | PNG opaco 24 bit a tinta unita | Impedisce a iOS di colorare di nero le aree trasparenti |
| maskable-icon-512x512.png | 512×512 px (6,7 KB) | Cerchio sicuro 80% + 20% margine | Elimina l’effetto francobollo e i tagli sui launcher Android |
Perché la Generazione Binaria nel Browser Supera i Convertitori Online Classici
- Impacchettamento Binario
ICONDIRReale: Costruiamo il filefavicon.icobyte per byte unendo i tre fotogrammi 16×16, 32×32 e 48×48, anziché limitarci a rinominare l’estensione di un file PNG. - Doppio Controllo di Contrasto (Modalità Scura e Chiara): Verifica istantaneamente la luminanza percepita secondo lo standard ITU-R BT.709 per evitare icone invisibili sulle schede del browser.
- Massima Riservatezza Locale: L’intera elaborazione grafica e la creazione dello ZIP avvengono nella memoria RAM del tuo dispositivo senza inviare alcun file in rete.
Storia e Origine
La storia della favicon ha inizio nel marzo 1999, quando Microsoft rilasciò Internet Explorer 5 introducendo il supporto per un piccolo file chiamato favicon.ico posizionato nella cartella principale del sito. In origine il browser scaricava quell’icona da 16×16 pixel solo se l’utente salvava la pagina tra i «Preferiti» (Favorites), generando milioni di curiose richieste nei log dei server Apache di tutto il mondo e offrendo ai webmaster dell’epoca un metodo ingegnoso per contare quanti utenti salvavano il sito nei segnalibri. Nel 2007, il debutto del primo Apple iPhone trasformò radicalmente il settore grazie a apple-touch-icon.png, che permetteva di aggiungere i siti web alla schermata Home con la stessa dignità estetica delle applicazioni native. Negli anni successivi il consorzio W3C ha definito il Web App Manifest (site.webmanifest) e la specifica Maskable Icons per Android, portando alla suite completa utilizzata oggi.