Favicon Generator - Text to Favicon.ico

Crea istantaneamente favicon personalizzate: perfette per siti Web, app e PWA

Genera la tua favicon

Abilita SVG

Come installare le favicon sul tuo sito web

Migliora l'aspetto del tuo sito web su tutti i dispositivi installando favicon personalizzate. Segui questi semplici passaggi per integrare il pacchetto favicon appena generato:

  1. Genera la tua favicon: utilizza il nostro generatore di favicon per creare icone personalizzate con il testo, i colori, la forma e il carattere desiderati. Fai clic su "Genera favicon" per scaricare il pacchetto favicon.

  2. Scarica e decomprimi: una volta generato, scarica il pacchetto favicon ed estrai i file nella directory principale del tuo sito web.

  3. Aggiungi codice HTML: inserisci il seguente codice nella sezione "head" del tuo file HTML per garantire la compatibilità tra vari dispositivi e browser:

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" type="image/png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" type="image/png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" type="image/png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" type="image/png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" type="image/png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" type="image/png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="512x512" href="/favicon-512x512.png" type="image/png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFFFFF" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicon-512x512.png" />

Come Usare il Generatore di Favicons

  1. Inserisci il testo desiderato (1-2 caratteri).
  2. Personalizza i colori, la forma e il carattere.
  3. Clicca su 'Genera Favicon'.
  4. Scarica il tuo pacchetto di favicon.
  5. Implementalo utilizzando il codice fornito.

Dimensioni dei Favicons Generati

Il nostro generatore di favicons crea icone in queste dimensioni essenziali:

Dimensioni Comuni delle Icone per Apple Touch:

  • 57x57px: iPhone e iPod touch.
  • 60x60px: Icone touch per i nuovi iPhone.
  • 72x72px: Icone per iPad.
  • 76x76px: iPad con display Retina.
  • 114x114px: iPhone con display Retina.
  • 120x120px: Icone touch Retina per i nuovi iPhone.
  • 144x144px: iPad con display Retina.
  • 152x152px: iPad con display Retina.
  • 180x180px: iPhone 6+ e nuove icone Retina.

Dimensioni Generali delle Icone:

  • 16x16px: Favicons per le schede del browser.
  • 32x32px: Dimensione standard dei favicons.
  • 48x48px: Collegamenti Windows.
  • 64x64px: Collegamenti Windows.
  • 96x96px: Dispositivi Chrome e Android.
  • 192x192px: Dispositivi Android.
  • 512x512px: Icone per schermi ad alta risoluzione e alcune Progressive Web Apps (PWAs).

Formati Aggiuntivi:

  • favicon.ico (32x32px): Un file di icona a risoluzioni multiple per la massima compatibilità con sistemi e browser più vecchi.
  • Formato SVG: Se abilitato, il pacchetto include anche un'icona grafica vettoriale scalabile (SVG), ideale per varie dimensioni e dispositivi grazie alla sua scalabilità.

Perché Sono Importanti le Molteplici Dimensioni dei Favicon

Nel mondo multi-dispositivo di oggi, avere molteplici dimensioni di favicon è cruciale:

  • Garantisce la compatibilità su tutti i dispositivi e browser
  • Migliora la chiarezza visiva su schermi ad alta risoluzione
  • Soddisfa i requisiti per le Progressive Web Apps (PWAs)
  • Migliora il riconoscimento nelle schede del browser affollate

Domande frequenti