Generatore di favicon con iniziali ed emoji

Crea una favicon semplice e riconoscibile senza preparare prima un’immagine. Inserisci una o due iniziali oppure scegli un solo emoji, quindi regola la forma e il colore di sfondo. Per le iniziali puoi scegliere anche il colore dei caratteri e lo stile del carattere; gli emoji mantengono l’aspetto nativo del browser. L’anteprima da 512 px si aggiorna nel browser e il download finale include le piccole icone per browser, le icone per dispositivi mobili e i file di configurazione necessari per aggiungere il design a un sito. Non viene caricato nulla e non viene usata l’IA.

Come creare una favicon

  1. 1

    Scegli il contenuto dell'icona

    Inserisci una o due iniziali per creare un marchio compatto oppure usa un emoji come design.

  2. 2

    Definisci lo stile

    Scegli una forma quadrata, quadrata con angoli arrotondati o circolare, quindi imposta il colore di sfondo. Per le iniziali puoi modificare anche il colore dei caratteri e lo stile del carattere; gli emoji conservano il loro aspetto nativo.

  3. 3

    Controlla l'anteprima

    Esamina l'anteprima da 512 px e valuta anche se il design resta chiaro quando viene ridotto a 16 px nella scheda del browser.

  4. 4

    Scarica e installa

    Scarica il pacchetto di favicon creato localmente, aggiungi i file al sito e incolla o adatta il frammento incluso per la sezione `<head>`.

Cosa contiene il pacchetto di favicon

Lo stesso design di una favicon deve funzionare in contesti diversi, dalla minuscola scheda del browser alla schermata principale di un dispositivo mobile. Il generatore rende il design nelle dimensioni pratiche elencate qui sotto e raggruppa tutti i file localmente.

Elemento del pacchetto Dimensione o contenuto Uso previsto
favicon.ico Immagini da 16, 32 e 48 px Schede, segnalibri e software che richiedono ancora un file ICO
favicon-16x16.png 16 × 16 px Favicon piccola per browser
favicon-32x32.png 32 × 32 px Favicon standard per browser
apple-touch-icon.png 180 × 180 px Icona touch di Apple
android-chrome-192x192.png 192 × 192 px Icona per app web nei contesti Android più piccoli
android-chrome-512x512.png 512 × 512 px Icona più grande per app web
mstile-150x150.png 150 × 150 px Immagine per i riquadri Microsoft
site.webmanifest Manifest JSON Fa riferimento alle icone Android nei browser che usano un manifest per app web
browserconfig.xml Configurazione XML Fa riferimento all’immagine e al colore del riquadro Microsoft
favicon-head.html Frammento HTML Riferimenti pronti da copiare per icone, manifest e configurazione del browser

Crea una favicon che funzioni anche a 16 px

Una favicon non è un poster in miniatura. I dettagli sottili, le parole lunghe e le differenze di colore poco marcate scompaiono rapidamente nelle dimensioni di una scheda. Un’iniziale in evidenza, un breve marchio di due lettere o un emoji semplice sono in genere più riconoscibili di una composizione complessa.

  • Per le iniziali, usa un contrasto deciso tra i caratteri e lo sfondo.
  • Lascia spazio attorno alle lettere e agli emoji, in modo che le maschere delle piattaforme non comprimano il design.
  • Confronta le versioni quadrata, quadrata con angoli arrotondati e circolare prima di scegliere la sagoma più chiara.
  • Controlla le piccole icone esportate oltre all’anteprima da 512 px. Un design curato a grandezza naturale può diventare poco chiaro a 16 px.
  • Prova la favicon installata in più browser e su interfacce chiare e scure.

Aggiungi i file generati al sito

Mantieni i nomi generati e colloca i file dove il frammento per la sezione <head> si aspetta di trovarli, in genere nella directory principale del sito. Incolla il frammento nel <head> di ogni modello di pagina. Se il tuo framework distribuisce le risorse statiche da una cartella diversa o tramite una rete per la distribuzione dei contenuti, aggiorna prima della pubblicazione i percorsi nel frammento, nel manifest e nella configurazione del browser.

I file inclusi forniscono i riferimenti alle icone, ma da soli non rendono un sito installabile come app web progressiva. L’installazione può richiedere altri campi nel manifest, un hosting sicuro e criteri specifici del browser.

Domande frequenti

Sì. Inserisci una o due iniziali, quindi scegli la forma, il colore di sfondo, il colore in primo piano e lo stile del carattere. Il testo breve è intenzionale perché rimane più leggibile alle piccole dimensioni di una favicon.

Sì. L’emoji conserva l’aspetto nativo del browser, mentre forma e colore di sfondo restano configurabili. Controlla l’anteprima prima del download, perché la resa varia tra sistemi e browser e gli emoji complessi non sono disponibili ovunque.

Sì. Il pacchetto include un file favicon.ico con immagini da 16, 32 e 48 px, favicon PNG separate da 16 e 32 px e icone più grandi per Apple, Android e Microsoft.

Generatore di favicon crea un nuovo design da iniziali, testo breve o un emoji. Convertitore di favicon è lo strumento separato che trasforma un’immagine PNG, JPEG o WebP esistente in file favicon.

No. Il testo o l’emoji, il rendering dell’anteprima e la creazione del pacchetto rimangono nel browser. Lo strumento non carica il design e non consulta alcun sito web.

No. Applica le tue scelte senza usare l’IA. Inoltre, non può stabilire se le iniziali, un emoji, i colori o il design finito violino un marchio registrato o i diritti di terzi. Verifica questi diritti prima di usare la favicon a fini commerciali.

I browser conservano spesso le favicon nella cache. Verifica che i file generati e i riferimenti nel <head> siano pubblicati nei percorsi previsti, quindi svuota la cache del browser o prova in una finestra privata. Alcuni motori di ricerca e piattaforme aggiornano le icone secondo i propri tempi.

Strumenti correlati