Ottieni favicon.ico, le dimensioni PNG, un'Apple touch icon, le icone Android e maskable, un web manifest e l'HTML da incollare, tutto in un unico .zip. Crea un set completo di icone per il tuo sito web da una lettera o da un'immagine. È gratis e privato.
Come creare una favicon
- Sotto Parti da, scegli Una lettera o Un'immagine. Per un'immagine, premi Scegli un'immagine.
- Per una lettera, scrivi le tue Lettere e scegli Spessore, Font, Colore del testo, Stile e Sfondo.
- Scegli la Forma: Quadrato, Arrotondato o Cerchio. Regola il Margine interno, oppure Mantieni lo sfondo trasparente.
- Sotto Il tuo sito, aggiungi il Nome del sito o dell'app, il Nome breve e la Cartella delle icone.
- Controlla l'Anteprima, che mostra l'icona in una scheda del browser, nei risultati di ricerca e su un telefono.
- Premi Copia HTML per il codice da incollare nella tua pagina, e Scarica tutto (.zip) per i file.
A cosa serve ogni file
favicon.ico contiene le versioni da 16, 32 e 48 pixel in un unico file e funziona in ogni browser, anche i vecchi. Le favicon PNG danno ai browser moderni un'icona nitida per la scheda. apple-touch-icon.png viene usata quando qualcuno aggiunge il tuo sito alla schermata iniziale di un iPhone o iPad, e le icone Android più site.webmanifest vengono usate quando il tuo sito viene installato su Android o come app.
Cos'è un'icona maskable?
Android ritaglia le icone delle app in cerchi, squircle o quadrati arrotondati a seconda del telefono. Un'icona maskable riempie l'intero quadrato con il tuo colore di sfondo e mantiene il logo dentro l'80% centrale, così niente di importante viene tagliato qualunque sia la forma usata dal telefono.
Consigli per una favicon chiara
A 16 pixel, i dettagli spariscono. Una lettera in grassetto, un segno semplice o la parte più riconoscibile del tuo logo funzionano meglio del logo intero con le parole. Un forte contrasto tra il segno e lo sfondo aiuta a farlo risaltare tra le altre schede, sia con i temi chiari sia con quelli scuri del browser.
Aggiungere le icone al tuo sito
- Decomprimi i file e caricali nella cartella che hai indicato sotto Cartella delle icone, di solito il livello principale del tuo sito.
- Incolla l'HTML copiato nella sezione head di ogni pagina.
- Ricarica la pagina e svuota la cache del browser se continua a comparire la vecchia icona. I browser conservano le favicon a lungo.
- Parti da un'immagine quadrata larga almeno 512 pixel così ogni dimensione appare nitida.
Chi lo usa
Titolari di piccole attività con un nuovo sito web, freelance che creano siti per i clienti, blogger e studenti che mettono online un progetto. Per ridimensionare o convertire prima il tuo logo, prova il convertitore di immagini.
Domande
La mia immagine viene caricata?
No. Le icone vengono create nel tuo browser.
Quali formati di immagine posso usare?
PNG, JPG, SVG e WebP.
Perché vedo ancora la mia vecchia favicon?
I browser conservano le favicon nella cache a lungo. Svuota la cache o apri il sito in una finestra privata per controllare.