Vai al contenuto
SPCXTools

Generatore di Favicon

Trasforma un logo, una lettera o un'emoji in un pacchetto favicon completo, con il codice HTML per utilizzarlo.

Funziona localmente: i file non lasciano mai il tuo dispositivo

Caricamento strumento…

Come usare Generatore di Favicon

  1. 1Scegli Da immagine e seleziona il tuo logo (un PNG o SVG quadrato è l'ideale), oppure scegli Da testo e digita una lettera, delle iniziali o un'emoji.
  2. 2Regola il raggio degli angoli, il padding e i colori. Le anteprime mostrano l'icona nelle dimensioni reali.
  3. 3Clicca su Scarica pacchetto favicon per ottenere un file ZIP con tutti i file.
  4. 4Carica i file nella root del tuo sito web e incolla lo snippet HTML nel <head> delle tue pagine.

Crea una favicon in pochi secondi

Una favicon è la piccola icona che appare nelle schede del browser, nei preferiti, nella cronologia, nei risultati di ricerca su mobile e nella schermata home quando qualcuno salva il tuo sito. Aiuta i visitatori a trovare la tua scheda tra decine di altre e dà un aspetto curato anche a un piccolo sito web. Questo generatore di favicon crea tutti i file di cui hai bisogno partendo da una singola immagine — o da una lettera o un'emoji se non hai ancora un logo — e ti fornisce il codice HTML per aggiungerli al tuo sito.

Funzionalità

  • Da un'immagine: PNG, JPG, SVG, WebP e altri.
  • Da testo o emoji: iniziali o un'emoji su sfondo colorato.
  • Angoli arrotondati e padding per adattare perfettamente l'icona alle schede e alle schermate home.
  • Anteprime in tempo reale a 16, 32, 64 e 128 pixel.
  • Pacchetto completo: favicon.ico in più dimensioni, icone PNG, Apple touch icon, icone Android e web manifest.
  • HTML pronto da copiare per i tag link.
  • Privato: generato interamente nel tuo browser.

Guida alle dimensioni delle favicon

File Dimensioni Usato da
favicon.ico 16, 32, 48 px Tutti i browser, scorciatoie di Windows, fallback legacy
favicon-16x16.png 16 px Schede del browser
favicon-32x32.png 32 px Schede su schermi high-DPI, barra delle applicazioni
apple-touch-icon.png 180 px Schermata home di iPhone e iPad
android-chrome-192x192.png 192 px Schermata home di Android
android-chrome-512x512.png 512 px Splash screen di Android, installazione PWA

Consigli di design

  • Semplifica. Usa il simbolo del tuo logo, non il logo completo con il nome dell'azienda.
  • Usa il contrasto. L'icona deve risaltare sia sui temi chiari che su quelli scuri del browser.
  • Testa a 16 px. Se non riesci a riconoscerla nell'anteprima più piccola, semplificala ulteriormente.
  • Riempi il quadrato. Le icone con molto spazio vuoto sembrano minuscole nelle schede; riduci il padding.

Strumenti correlati

Converti prima un logo vettoriale in un PNG ad alta risoluzione con Da SVG a PNG, cambia le dimensioni di un'immagine esistente con Ridimensiona immagine, oppure converti tra vari formati immagine con il Convertitore di immagini.

Domande frequenti

Quali file sono inclusi?
favicon.ico (16, 32 e 48 px in un unico file), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, un site.webmanifest e uno snippet HTML con i tag link corrispondenti.
Qual è l'immagine migliore per una favicon?
Un'immagine semplice e quadrata, con forme nette e pochi dettagli. Le favicon vengono spesso mostrate a soli 16×16 pixel, quindi il testo e le linee sottili scompaiono. Il simbolo del logo senza il testo, o una singola lettera, funzionano molto meglio di un logo completo. Usa un'immagine di partenza larga almeno 512 px.
Dove metto i file?
Caricali nella cartella principale (root) del tuo sito web in modo che siano disponibili a indirizzi come /favicon.ico. Poi incolla lo snippet HTML all'interno della sezione <head>. Molti browser cercano automaticamente /favicon.ico anche senza il tag.
Perché non vedo la nuova favicon?
I browser salvano le favicon in cache in modo molto aggressivo. Apri direttamente l'indirizzo dell'icona, forza l'aggiornamento della pagina o prova con una finestra anonima. Potrebbe volerci un po' di tempo prima che i segnalibri e le schede si aggiornino.
Conviene usare uno sfondo trasparente?
La trasparenza rende bene nelle schede del browser, ma iOS riempie di nero le aree trasparenti della Apple touch icon. Se la tua icona non si vede bene sia su sfondi chiari che scuri, disattiva la trasparenza e scegli un colore di sfondo.
La mia immagine viene caricata su un server?
No. Tutte le icone vengono elaborate e generate direttamente nel tuo browser. Non viene inviato nulla a nessun server.

Strumenti correlati

Da SVG a PNGTrasforma la grafica vettoriale SVG in immagini PNG nitide di qualsiasi dimensione, mantenendo la trasparenza.Ridimensiona immagineRidimensiona le foto a dimensioni esatte in pixel o in percentuale — una singola immagine o un intero blocco, senza caricare nulla.Convertitore di ImmaginiConverti foto e grafiche in JPG, PNG, WebP e AVIF — in blocco e senza caricamenti.Da PNG a WebPRendi le immagini più leggere per il tuo sito web convertendo i file PNG e JPG in WebP — direttamente nel tuo browser.Aggiungi Bordo a ImmagineAggiungi facilmente bordi colorati personalizzabili e angoli arrotondati alle tue foto.Aggiungi testo a immagineInserisci didascalie, titoli o testi per meme su qualsiasi immagine e trascinali esattamente dove vuoi.