Generatore di favicon
Creare favicon da testo, emoji o immagini per il proprio sito web
Design della favicon
Scegliere un'emoji
0% indica un quadrato; 100% usa il tracciato originale completamente arrotondato.
File immagine fino a 10 MiB. Il motore di rendering originale deforma l'immagine per adattarla a un quadrato.
Anteprima e file
Questa è un'illustrazione. La resa delle emoji nel browser e nel sistema può differire.
Anteprima in tempo reale aggiornata. Generi i file quando il design è pronto.
File PNG generati
Il design è cambiato. Questi file contengono ancora l'ultimo design generato; li rigeneri per aggiornarli.
File PNG: 16, 32, 48, 64, 128 e 256 px. L'ICO contiene il PNG generato da 32 px.
Aggiungere al sito
- Carichi i file scaricati e usi i tag copiati nell'head della Sua pagina.
- I percorsi predefiniti dei tag si riferiscono alla radice del Suo sito; li adatti se colloca i file altrove.
- Il file ICO scaricato contiene una sola immagine PNG, anziché tutte le dimensioni generate.
- Le icone Apple touch e le icone del manifest delle applicazioni web sono risorse separate; questo strumento non genera tali file.
- Non è garantito che una favicon appaia nei risultati di ricerca.
- Lo strumento legge il Suo file nel browser senza caricarlo sul server. Conservi un originale intatto.
Informazioni sullo strumento Generatore di favicon
Il nostro generatore di favicon online gratuito Le permette di creare favicon professionali da testo, lettere, emoji o immagini caricate, direttamente nel browser. Le favicon sono le piccole icone che compaiono nelle schede del browser, nei segnalibri e nei risultati di ricerca, e svolgono un ruolo fondamentale nel riconoscimento del marchio e nell'esperienza utente. Con questo strumento può progettare e scaricare favicon in più dimensioni, senza software di grafica né competenze tecniche.
Il generatore supporta tre modalità di creazione: la modalità Testo/Lettera, per creare favicon da uno o due caratteri con pieno controllo su font, colore e stile; la modalità Emoji, per generare rapidamente favicon da qualsiasi emoji con sfondi e dimensioni regolabili; e la modalità Carica, per creare file favicon quadrati da immagini che il browser è in grado di decodificare. Lo strumento elabora in locale senza caricare il file selezionato; questo non garantisce che ogni altro script o richiesta della pagina sia privato.
Lo strumento genera sei PNG quadrati nelle dimensioni 16, 32, 48, 64, 128 e 256 px. Può scaricare i singoli file, un ICO basato su un'unica immagine PNG da 32 px e i relativi tag link HTML. Questi file non coprono tutti i requisiti di icona delle varie piattaforme.
Funzioni principali
- Tre modalità di creazione: Testo/Lettera, Emoji e Carica immagine
- Colore del testo, colore di sfondo, famiglia di font e peso del font personalizzabili
- Raggio del bordo regolabile, dal quadrato al cerchio
- Supporto dello sfondo trasparente per le modalità testo ed emoji
- Griglia di selezione rapida delle emoji più popolari, con 32 emoji di uso comune
- Genera sei dimensioni standard di favicon: 16x16, 32x32, 48x48, 64x64, 128x128 e 256x256
- Anteprima dal vivo con aggiornamenti in tempo reale mentre regola le impostazioni
- Anteprima simulata della scheda del browser che mostra come apparirà la favicon
- Download delle singole dimensioni come file PNG
- Download di un contenitore favicon.ico con un PNG generato da 32 px; la compatibilità dipende dal client
- Copia dei tag link HTML negli appunti per integrarli facilmente nel sito web
- Tutta l'elaborazione avviene nel browser, senza alcun caricamento sul server
Come usare il Generatore di favicon
- Scelga una modalità: Selezioni Testo/Lettera per creare una favicon da caratteri, Emoji per usare un'emoji, oppure Carica immagine per convertire un'immagine esistente.
- Personalizzi il design: Nella modalità Testo inserisca 1-2 caratteri e regoli dimensione del font, colori, raggio del bordo, famiglia di font e peso. Nella modalità Emoji selezioni o digiti un'emoji e configuri sfondo e dimensioni. Nella modalità Carica selezioni un file immagine dal Suo dispositivo.
- Controlli l'anteprima in tempo reale: Veda l'anteprima dal vivo 256x256 aggiornarsi subito a ogni modifica delle impostazioni. Controlli la simulazione della scheda del browser per vedere come apparirà la favicon in una scheda reale.
- Generi le favicon: Faccia clic sul pulsante «Genera favicon» per creare tutte e sei le dimensioni standard dal Suo design.
- Scarichi le favicon: Scarichi i singoli file PNG per ogni dimensione, ottenga un file favicon.ico oppure copi i tag link HTML per la sezione head del Suo sito web.
- Aggiunga al sito web: Collochi i file scaricati nella directory principale del sito e incolli i tag link HTML nell'head del documento HTML.
Casi d'uso
- Lancio di un nuovo sito web: Crei rapidamente una favicon professionale per un nuovo sito web o una nuova applicazione web senza bisogno di un grafico.
- Personal branding: Generi una favicon con le Sue iniziali per un blog personale, un portfolio o un sito professionale.
- MVP di startup: Crei una favicon provvisoria ma curata nelle prime fasi di sviluppo, quando un'identità di marchio completa non è ancora definita.
- Progetti collaterali ed esperimenti: Dia personalità a progetti per hobby, partecipazioni a hackathon o siti sperimentali con favicon personalizzate di emoji o testo.
- Test di sviluppo web: Generi favicon segnaposto per ambienti di sviluppo, server di staging o prototipi per i clienti.
- Gestione di più siti: Crei favicon distinte per siti, sottodomini o applicazioni web diversi, per distinguere più facilmente le schede aperte.
- Documentazione e tutorial: Generi risorse favicon per siti dimostrativi, esempi di codice e materiali didattici.
- Sviluppo di estensioni del browser: Crei risorse icona per le estensioni del browser che richiedono icone piccole e riconoscibili in varie dimensioni.
Domande frequenti
Che cos'è una favicon?
Una favicon (abbreviazione di «favorites icon», icona dei preferiti) è una piccola icona associata a un sito web. Compare nelle schede del browser, negli elenchi dei segnalibri, nella cronologia del browser e nei risultati dei motori di ricerca. Le favicon aiutano gli utenti a identificare e ritrovare rapidamente il Suo sito tra più schede e segnalibri.
Quali dimensioni devo usare per la mia favicon?
Questo strumento fornisce file PNG da 16, 32, 48, 64, 128 e 256 px e un ICO da 32 px. Scelga le dimensioni richieste dal client di destinazione; Google Search attualmente consiglia icone quadrate più grandi di 48 px, e l'inclusione non è garantita.
Qual è la differenza tra i formati PNG e ICO?
PNG è un formato di immagine raster; ICO è un contenitore di icone. Questo strumento esporta sei file PNG e incorpora il PNG generato da 32 px all'interno di una sola voce ICO. Verifichi i requisiti del client di destinazione; nessuno dei due formati garantisce un supporto universale.
Posso creare una favicon trasparente?
Sì, sia nella modalità Testo/Lettera sia in quella Emoji può attivare l'opzione di sfondo trasparente. Questo crea una favicon con sfondo trasparente, utile per favicon che devono fondersi con il colore di sfondo della scheda del browser.
L'immagine che carico viene inviata a un server?
Questo strumento elabora l'immagine selezionata nel browser senza caricarla. I file sono limitati a 10 MiB e i formati dipendono dalla decodifica del browser. Questa dichiarazione non riguarda l'archiviazione, il tracciamento o le richieste effettuate da altri script del sito.
Come aggiungo la favicon al mio sito web?
Collochi i file favicon scaricati nella directory principale del Suo sito web (o in una sottodirectory a Sua scelta), poi aggiunga i tag link HTML alla sezione head dell'HTML. Può copiare i tag link pronti all'uso da questo strumento. Ad esempio: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Consigli e buone pratiche
- Mantenga la semplicità: Le favicon vengono mostrate in dimensioni molto piccole. Usi forme semplici e decise e colori ad alto contrasto che restino riconoscibili a 16x16 pixel.
- Usi al massimo 1-2 caratteri: Per le favicon basate su testo funziona meglio un solo carattere. Due caratteri possono andare bene, ma risultare meno leggibili nelle dimensioni ridotte.
- Scelga colori a contrasto: Si assicuri che il testo o l'emoji risalti chiaramente sullo sfondo. Un contrasto elevato garantisce la visibilità nelle schede del browser.
- Provi alle dimensioni ridotte: Controlli sempre l'aspetto della favicon a 16x16 e 32x32 prima di finalizzarla. Ciò che è ottimo a 256x256 può risultare illeggibile in dimensioni minori.
- Pensi alla modalità scura: Molti utenti navigano con temi scuri del browser. Una favicon con sfondo trasparente e contenuto scuro può diventare invisibile. Valuti di aggiungere uno sfondo colorato o di usare contenuti di colore chiaro.
- Usi il raggio del bordo: Gli angoli arrotondati (20-30%) conferiscono alle favicon un aspetto moderno e curato. Il cerchio pieno (100%) funziona bene per singole lettere o emoji.
- Includa più dimensioni: Fornisca risorse adatte ai client di destinazione. Questo strumento genera le sei dimensioni PNG indicate e un ICO; le icone Apple touch e del manifest delle web app richiedono risorse separate e non è garantita una copertura completa dei dispositivi.