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
Scegli il contenuto dell'icona
Inserisci una o due iniziali per creare un marchio compatto oppure usa un emoji come design.
-
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
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
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
Creatore di GIF
Trasforma una sequenza di immagini o un breve video in una GIF animata. Regola frame rate, loop e dimensioni prima dell’esportazione.
Generatore di codici QR
Genera localmente nel browser un codice QR da URL, testo semplice o payload QR formattato correttamente e scaricalo come PNG.
Generatore di meme
Crea meme con modelli famosi come Drake, Distracted Boyfriend o Doge, oppure carica una tua immagine. Testo sopra e sotto con font Impact, contorno e ombra.
Vettorializzatore da PNG a SVG
Trasforma immagini raster PNG in tracciati SVG nel browser. Ideale per loghi, icone e disegni al tratto. Regola soglia, numero di colori e smussatura.
Ridimensionatore di immagini per social media
Ridimensiona un’immagine con preset integrati per Instagram, Facebook, X, LinkedIn, YouTube, Pinterest e TikTok. Visualizza ogni PNG e scarica i formati che ti servono.
WebP in JPG
Converti immagini WebP in JPG/JPEG direttamente nel browser. Scegli la qualità, appiattisci la trasparenza su un colore di sfondo e scarica senza caricare file.