Generare favicon e icone app per il tuo sito

Pubblicato il 2026-02-27 · 2 min di lettura

#Favicon #PWA #Design

Ogni progetto serio ha bisogno di un favicon chiaro nella scheda del browser, di un'icona Apple touch per iOS e di icone app per Android e PWA. Questo strumento ti aiuta a generarli da un'unica immagine: carica un logo quadrato, scegli le dimensioni, scarica i PNG e copia lo snippet HTML nel tuo sito.

Perché favicon e icone app sono importanti

Favicon — la piccola icona nella scheda del browser e nei segnalibri. Senza, la scheda sembra generica e il tuo brand è meno riconoscibile.
Icona Apple touch — usata quando l'utente aggiunge il sito alla schermata Home su iPhone e iPad. La dimensione giusta (es. 180×180) garantisce un'icona nitida.
Icone PWA / Android — necessarie per "Aggiungi a Home" e l'installazione. Dimensioni tipiche: 192×192 e 512×512.

Una sola immagine quadrata può coprire tutto. Il generatore gira interamente nel browser: il tuo logo non esce dal tuo dispositivo.

Immagine sorgente consigliata

Usa un'immagine quadrata (PNG o SVG) di almeno 512×512 pixel. Una risoluzione maggiore va bene; lo strumento ridimensiona. Evita immagini troppo piccole o deformate per mantenere le icone nitide su schermi ad alta densità.

Avvio rapido con lo strumento

Carica — Clicca su "Scegli file" e seleziona il tuo logo (PNG o SVG, quadrato, 512×512 o più).
Sfondo — Scegli un colore di sfondo se il logo ha trasparenza; viene usato anche come theme-color nello snippet.
Dimensioni — Spunta le dimensioni che ti servono (favicon 16/32, Apple 180, PWA 192/512, ecc.).
Scarica — Clicca su un'anteprima per scaricare quella dimensione in PNG, o "Scarica tutto in ZIP" per averle tutte insieme.
Snippet — Copia il blocco HTML e incollalo nel <head> del tuo sito. Carica i PNG sul server (es. /assets/icons/) e aggiorna i percorsi nello snippet se necessario.

Dove mettere i file

Setup comune:

Metti i PNG di favicon e icone in una cartella tipo /assets/icons/ o nella root.
Aggiorna lo snippet in modo che gli href puntino a quei percorsi (es. /assets/icons/favicon-32x32.png).
Aggiungi site.webmanifest per la PWA con gli stessi percorsi per le icone 192×192 e 512×512.

In sintesi

Il generatore di favicon e icone app ti permette di passare da un logo a tutte le dimensioni necessarie e a uno snippet pronto da incollare nel <head>. Usa un'immagine quadrata in buona risoluzione, scarica i PNG e inserisci lo snippet nel tuo progetto.