Nessun upload, 100% locale, nessun account

Generatore favicon

Carica il tuo logo o icona e scarica tutte le dimensioni favicon standard come PNG. Include Apple Touch Icon e icone PWA. Niente lascia il tuo dispositivo.

Come funziona Generatore favicon

Generatore di favicon prende qualsiasi immagine fornita e la ridimensiona alle dimensioni standard dei favicon usando la Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (icona touch Apple), 192x192 (Android Chrome) e 512x512 (manifesto PWA). Tutte e sei le dimensioni vengono generate nel browser, insieme a un favicon.ico multi-dimensione che racchiude le immagini 16x16, 32x32 e 48x48 in un unico file legacy. L'immagine sorgente non lascia mai il dispositivo.

Un set completo di favicon copre l'intera gamma di icone delle schede del browser, segnalibri, scorciatoie per la schermata iniziale e schermate iniziali PWA. Usare un'immagine sorgente ad alta risoluzione (almeno 512x512 pixel) offre all'algoritmo di ridimensionamento i dettagli migliori. I tag link HTML necessari per fare riferimento a ciascun file generato sono mostrati in uno snippet che puoi copiare direttamente nell'elemento head della pagina.

Scritto da Bastien Sulyan

Come usare Generatore favicon, passo dopo passo

  1. Trascina l'immagine sorgente nell'area di caricamento. Usa un'immagine quadrata di 512 px o più grande per risultati ottimali.
  2. Visualizza l'anteprima delle sei dimensioni generate nel pannello dei risultati.
  3. Scarica i sei file PNG e il favicon.ico dal pannello dei risultati.
  4. Copia lo snippet HTML con i tag link per tutte le dimensioni.
  5. Posiziona i file PNG nella root del sito e incolla i tag link nell'intestazione della pagina.

Casi d'uso comuni

  • Uno sviluppatore configura un nuovo sito web e ha bisogno di tutte le dimensioni dei favicon generate dal logo del brand senza un abbonamento a uno strumento di design.
  • Un autore PWA genera le icone 192x192 e 512x512 richieste nel manifesto dell'app web per l'installazione dalla schermata iniziale.
  • Un blogger aggiorna l'identità del sito e sostituisce il favicon predefinito con un'icona personalizzata costruita dal proprio logo.
  • Un freelance produce rapidamente il set completo di favicon per un progetto cliente senza aspettare di installare software di design offline.

Domande frequenti

Quali formati di immagine posso usare come sorgente?

Qualsiasi formato che il browser può decodificare funziona come input: JPEG, PNG, WebP, GIF e SVG. Per le sorgenti SVG, il browser rasterizza il vettore su un Canvas prima del ridimensionamento, quindi i PNG di output sono immagini raster indipendentemente dalla sorgente.

Perché il mio favicon è sfocato nella scheda del browser?

Le dimensioni 16x16 e 32x32 sono molto piccole. Se l'immagine sorgente contiene dettagli fini o linee sottili, non sopravvivranno al ridimensionamento. Un design semplice e deciso con forme chiare funziona molto meglio a piccole dimensioni rispetto a un'illustrazione complessa.

Lo strumento genera file ICO?

Sì. Oltre ai sei PNG, lo strumento assembla anche un favicon.ico che racchiude le immagini 16x16, 32x32 e 48x48 in un unico file, quello che i browser Windows più datati e alcuni crawler cercano ancora nella root del sito. I browser moderni si accontentano dei link PNG, quindi pubblicare entrambi non costa nulla e lascia scegliere a ciascun client.

L'immagine sorgente viene elaborata su un server?

No. Le chiamate Canvas drawImage che producono ogni dimensione vengono eseguite nella scheda del browser. L'immagine sorgente viene letta dal disco locale e i sei output PNG vengono creati in memoria e proposti come download. Nessun dato file passa attraverso un server.

Quale dimensione devo usare per l'icona touch Apple?

iOS e iPadOS usano il PNG da 180x180 pixel referenziato dal tag link apple-touch-icon. Questa dimensione viene usata quando un utente aggiunge il sito alla schermata iniziale su un dispositivo Apple. Lo strumento genera questo file insieme alle altre dimensioni.

Posso usare un'immagine rettangolare come sorgente?

Sì, ma l'output verrà inserito in un'area con bande nere orizzontali o verticali per adattarsi al canvas quadrato. Per risultati ottimali, inizia con un'immagine quadrata o ritaglia l'immagine sorgente a una forma quadrata prima di usare lo strumento.

Strumenti correlati

Mantieni tutto locale, esplora gli strumenti complementari.

Tutti gli strumenti immagini