Nouplo

Generatore di favicon

Entra un’immagine; escono favicon.ico, apple-touch-icon, icone del manifest e i tag da incollare.

Trascina qui i file

oppure clicca per sceglierli dal tuo dispositivoFormati accettati: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG

Fino a 3 file per operazioneFino a 20 MB per file10 operazioni al giornoRimuovi i limiti con Pro✓ Funziona offline

I tuoi file restano sul tuo dispositivo

Questo strumento viene eseguito interamente nel tuo browser. Nulla viene caricato, nulla viene salvato, e puoi persino disattivare la connessione a internet prima di iniziare.

Come funziona

  1. Aggiungi il tuo logo: meglio un SVG quadrato, altrimenti un PNG o JPG di almeno 512 × 512 px.
  2. Scegli come sta nel quadrato — l’immagine intera con un margine facoltativo, oppure riempiendo il quadrato — e anche forma e sfondo.
  3. Premi «Crea favicon» e scarica tutto insieme in uno ZIP.
  4. Metti i file nella radice del sito e incolla i tag di favicon-tags.html nell’<head> delle pagine.

Domande frequenti

Quali file ottengo, e a cosa serve ciascuno?
favicon.ico contiene 16, 32 e 48 px in un unico file, per i browser e i crawler che chiedono direttamente /favicon.ico. favicon-96x96.png serve ai risultati di ricerca, dove Google vuole un multiplo di 48 px. apple-touch-icon.png (180 px) è l’icona della schermata Home di iPhone e iPad. I due PNG web-app-manifest e site.webmanifest servono ad Android e alle web app installate. Partendo da un SVG si aggiunge favicon.svg, e favicon-tags.html contiene le righe da incollare nell’<head>.
Ho scelto uno sfondo trasparente. Perché l’apple-touch-icon non lo è?
Perché iOS non mostra la trasparenza nella schermata Home: riempie di nero i pixel trasparenti e arrotonda gli angoli da solo. Quel file è quindi sempre un quadrato pieno e opaco, con lo sfondo scelto oppure bianco. Le altre icone restano trasparenti.
Meglio partire da un SVG o da un PNG?
Da un SVG, se ce l’hai. Ogni dimensione viene disegnata dal vettoriale: l’icona da 16 px è disegnata a 16 px invece di essere rimpicciolita da un’immagine grande, e ottieni anche favicon.svg, che i browser moderni preferiscono. Con PNG o JPG, parti da almeno 512 × 512 px; un logo molto dettagliato non sopravvive comunque a 16 px, e per questo ci sono il margine e un segno più semplice.
Perché Google mostra un mappamondo invece della mia icona?
Google deve poter scansionare sia l’icona sia la home page che la indica, e l’icona dovrebbe essere quadrata con un lato multiplo di 48 px: il file da 96 px di qui serve proprio a questo. Una volta pubblicati i file, i risultati di ricerca possono metterci giorni o settimane ad aggiornarsi.
Il mio logo viene caricato?
No. Ogni file viene disegnato in questa pagina con il canvas del browser, e anche lo ZIP viene composto qui. Non viene inviato nulla a un server.

Strumenti correlati