Generatore di favicon: crea favicon.ico, PNG e icone Apple touch
Crea favicon.ico, favicon PNG, un’icona Apple touch e un manifest per web app da un’immagine o da un testo nel browser, con i tag HTML da copiare.
Trascina qui un’immagine o selezionane una
PNG, JPG, WebP, GIF (primo fotogramma), BMP o SVG. I risultati migliori si ottengono con un’immagine quadrata di almeno 512 × 512 pixel.
Il testo viene disegnato con i caratteri installati su questo dispositivo, quindi lettere ed emoji possono apparire diverse su un altro computer o telefono. I file PNG e ICO scaricati mantengono l’aspetto che vedi qui.
Anteprima
Le icone da 16, 32 e 48 sono mostrate a dimensione reale; quelle più grandi sono mostrate rimpicciolite. Il motivo a scacchi indica le aree trasparenti.
In una scheda del browser
Una barra delle schede semplificata con tema chiaro e scuro. Verifica che l’icona sia visibile in entrambi: un logo scuro su sfondo trasparente può sparire su una barra delle schede scura.
File
Alcuni dispositivi Apple mostrano in nero le parti trasparenti di un’icona della schermata Home, quindi apple-touch-icon.png viene salvata senza trasparenza: le aree trasparenti vengono riempite con questo colore. L’impostazione della forma non viene applicata a questa icona, perché iPhone e iPad arrotondano da soli gli angoli delle icone della schermata Home.
Usata nei tag HTML e nel manifest. «/» indica la cartella principale (root) del sito web.
Le impostazioni di sfondo, forma, margine interno e ritaglio non vengono applicate a favicon.svg.
I browser possono usare il colore del tema per colorare la barra degli indirizzi o il titolo della finestra. Il colore di sfondo dell’app viene mostrato durante l’avvio di una web app installata.
Per iniziare, scegli un’immagine o passa al testo.
Contenuto di site.webmanifest
Note
- Carica i file nella cartella principale del tuo sito web (la cartella che contiene la home page), oppure inserisci un’altra cartella qui sopra, in modo che i percorsi nell’HTML e nel manifest corrispondano.
- favicon.ico contiene immagini da 16 × 16, 32 × 32 e 48 × 48 memorizzate come dati PNG. I browser attuali e Windows Vista o versioni successive sono in grado di leggerle; alcuni programmi molto vecchi leggono solo immagini di icone non compresse.
- Le immagini di origine piccole, come un’immagine da 64 × 64, vengono ingrandite per le icone più grandi e appaiono sfocate. Se possibile, usa un’immagine di almeno 512 × 512 pixel o un file SVG.
- Le icone di testo usano i caratteri installati sul dispositivo su cui le crei. I file PNG e ICO mantengono quell’aspetto, ma ricreare l’icona su un altro dispositivo può dare un risultato diverso.
- I file SVG vengono disegnati dal browser. Immagini, caratteri o stili che un file SVG carica da altri file o siti web non vengono caricati e potrebbero mancare nelle icone.
- I browser conservano le favicon nella cache a lungo. Dopo aver sostituito una favicon, quella vecchia può continuare ad apparire per un po’; un aggiornamento forzato, una finestra privata o un nome di file diverso nell’HTML possono aiutare.
- Immagini e testi vengono elaborati nel browser e non vengono caricati su LeedyBox.
Come si usa
- Scegli «Immagine» e seleziona o trascina il tuo logo, oppure scegli «Testo o emoji» e digita fino a tre caratteri.
- Imposta sfondo, forma e margine interno, e controlla le anteprime e la scheda del browser con il tema chiaro e scuro.
- Se vuoi, inserisci il nome del sito web, il nome breve, il colore del tema e la cartella in cui verranno salvati i file.
- Premi «Crea i file favicon», poi scarica i file uno alla volta o tutti insieme come favicon-package.zip.
- Carica i file sul tuo sito web e incolla i tag HTML copiati nella sezione head delle tue pagine.
Domande frequenti
Le mie immagini vengono caricate su un server?
No. L’immagine o il testo vengono disegnati e convertiti nel browser e i file vengono creati sul tuo dispositivo. Nulla viene inviato a LeedyBox. Al caricamento della pagina viene scaricata solo la libreria ZIP, direttamente da leedybox.com.
Quali immagini posso usare e ci sono limiti?
File PNG, JPG, WebP, GIF (primo fotogramma), BMP e SVG. I file SVG possono arrivare a 10 MB. Le foto molto grandi (oltre circa 50 megapixel) potrebbero non essere elaborate sui telefoni a causa della memoria che richiedono. Un’immagine quadrata di almeno 512 × 512 pixel, o un file SVG, dà i risultati più nitidi.
Perché la mia favicon appare sfocata o difficile da leggere?
Un’icona da 16 pixel ha pochissimo spazio. Forme semplici, contrasto marcato e una o due lettere funzionano meglio di loghi dettagliati o testi lunghi. Le immagini di origine piccole vengono ingrandite per le dimensioni maggiori e appaiono sfocate. Controlla le anteprime e prova con un margine interno ridotto o con una versione più semplice del tuo logo.
Quali di questi file mi servono?
favicon.ico e i file PNG da 16 e 32 pixel sono usati dai browser desktop, e apple-touch-icon.png da iPhone e iPad. Le icone da 192 e 512 pixel e site.webmanifest vengono usate quando il sito viene aggiunto a una schermata Home o installato come web app. Usandoli tutti insieme ai tag HTML si coprono i casi più comuni.
Perché apple-touch-icon.png non ha trasparenza?
Alcuni dispositivi Apple mostrano in nero le parti trasparenti di un’icona della schermata Home. Lo strumento riempie quindi le aree trasparenti con il colore che scegli (bianco per impostazione predefinita) e lascia gli angoli squadrati, perché iPhone e iPad li arrotondano da soli.