Home / Generatore di favicon

Generatore di favicon

Trascina il tuo logo e ricevi tutte le icone di cui il tuo sito ha bisogno: favicon.ico, icona Apple, icone app e manifest – con le righe HTML giuste.

Trascina qui il tuo logo

oppure tocca per sceglierlo. Meglio quadrato, PNG o SVG.

Scegli file

Passo dopo passo

  1. Rilascia il tuo logo, meglio se quadrato, in PNG con sfondo trasparente o in SVG.
  2. In «Nome del sito (per il manifest)» scrivi il nome con cui il sito deve comparire quando qualcuno lo installa come app nella schermata Home.
  3. In «Sfondo» lascia «Trasparente» oppure scegli un colore come quadrato, arrotondato o cerchio. La tonalità si imposta in «Colore».
  4. Con «Margine interno» decidi quanto spazio resta intorno al logo. L'anteprima mostra tutte le dimensioni da 16 a 512 pixel e si aggiorna subito.
  5. Tocca «Scarica tutto in ZIP». Le righe HTML sotto l'anteprima si copiano direttamente con «Copia».

A cosa serve

  • Il tuo sito o blog: L'icona compare nella scheda del browser, nei preferiti e nella cronologia. Senza favicon, i browser mostrano lì solo un simbolo generico.
  • Negozio online: Un'icona riconoscibile nella scheda aiuta i clienti a ritrovare il tuo negozio tra tante pagine aperte.
  • Web app e dashboard: Con il manifest e le icone da 192 e 512 pixel, il sito si può aggiungere alla schermata Home dello smartphone come un'app.
  • Distinguere gli ambienti di test: Se gestisci una versione di prova e una pubblica dello stesso sito, puoi creare per ciascuna un'icona con un colore di sfondo diverso e capire subito in quale scheda stai lavorando.

Cosa c'è nello ZIP?

  • favicon.ico da 16, 32 e 48 pixel – per tutti i browser.
  • apple-touch-icon.png (180 px) – quando qualcuno aggiunge il tuo sito alla schermata Home dell'iPhone.
  • icon-192.png e icon-512.png con site.webmanifest – per Android e i siti installabili.
  • einbauen.html con le righe per il <head> della tua pagina.

Carica tutti i file nella cartella principale del tuo sito e aggiungi le righe HTML. Con WordPress è ancora più semplice: carica un'icona da 512 px in Aspetto → Personalizza → Identità del sito.

Domande frequenti

Come dovrebbe essere il logo?

Semplice e deciso. A 16 pixel i dettagli fini e i testi non si leggono – spesso basta l'iniziale o il simbolo.

Il mio logo viene caricato?

No. Tutte le icone vengono create nel browser.

Il mio logo non è quadrato: verrà deformato?

No. Viene inserito per intero e centrato. Un logo largo lascia margine sopra e sotto, uno alto a destra e a sinistra.

Quando conviene uno sfondo colorato?

Quando un logo scuro si vedrebbe appena su schede scure, oppure per le icone della schermata Home, che su iPhone non vengono mostrate trasparenti. Una forma rotonda o arrotondata sembra allora l'icona di un'app.

Dopo averlo inserito vedo ancora la vecchia icona.

I browser conservano le favicon nella cache con ostinazione. Ricarica la pagina senza cache o aprila in una finestra privata. Dopo un po' si aggiornano anche i preferiti.

Cosa contiene il manifest?

Il nome, una forma breve accorciata a 12 caratteri, le due icone dell'app, il colore scelto come colore del tema e la visualizzazione come app autonoma. È un semplice file di testo, modificabile con qualsiasi editor.

Devo caricare tutti i file?

Per la scheda del browser basta favicon.ico. Gli altri file servono per l'icona Apple, per Android e per i siti installabili come app.

I miei file non sono nella cartella principale.

Allora adatta i percorsi. Nelle righe HTML e nel manifest iniziano con una barra che indica la cartella principale.