Come creare una favicon.

Apri il Generatore Favicon / ICO e scegli Immagine. Carica un PNG, JPG, JPEG, WebP o GIF, oppure seleziona Prova un esempio. L'esempio pratico utilizza favicon-orbit.png, un segno a orbita viola di 512 × 512 pixel con angoli trasparenti. L'input è di 202,491 byte.

Per un brand senza un logo finito, seleziona Testo sulla pagina dello strumento. Inserisci una o due lettere e scegli Continua. L'editor offre caratteri Modern sans, Classic serif e Monospace, oltre a colori separati per testo e sfondo. Sono accettati fino a tre caratteri, ma caratteri extra possono diventare difficili da riconoscere a piccole dimensioni.

Conserva l'opera originale. Il generatore crea nuovi file icona e non sovrascrive la sorgente. L'input GIF diventa un'icona statica anziché una favicon animata.

Per un monogramma, il menu Carattere inizia con tre stili inclusi. Seleziona Usa caratteri di sistema su un browser desktop supportato e consenti l'accesso per aggiungere i caratteri installati sul tuo dispositivo. Usa le frecce precedente e successiva per confrontare i caratteri adiacenti, o scegli una famiglia e ispeziona l'anteprima dal vivo, specialmente a 16 pixel. I caratteri rimangono sul tuo dispositivo; gli stili inclusi funzionano senza autorizzazione.

L'editor visualizza schede del browser chiare e scure oltre ad anteprime alle dimensioni comuni delle icone. Controlla prima l'esempio da 16 pixel; è il test più rigoroso per verificare se il segno rimane riconoscibile. L'anteprima Apple Touch rappresenta un'esportazione da 180 pixel e viene visualizzata più piccola nell'area di lavoro.

Su un telefono, apri Impostazioni. Lascia Crea da impostato su Immagine caricata e Adattamento immagine impostato su Mostra l'intera immagine. Per questo esempio, imposta Spazio attorno al contenuto su 0 e abilita Sfondo trasparente. La sorgente contiene già la sua forma viola arrotondata e margini chiari, quindi non necessita di uno sfondo colorato aggiuntivo.

Con una sorgente diversa, Mostra l'intera immagine mantiene i suoi bordi, mentre Riempi l'icona potrebbe ritagliarli. Quadrato arrotondato, Quadrato e Cerchio definiscono la forma esterna. Sfondo trasparente preserva le aree chiare ma non può rimuovere uno sfondo opaco già disegnato in una foto. Esamina l'anteprima più piccola dopo ogni modifica dell'inquadratura.

Sotto Download, scegli Pacchetto icone sito web (ZIP) per questo esempio. Lascia Nome sito web come My website per la prova, o sostituiscilo con il vero nome del brand per il tuo progetto. Questo nome viene usato in site.webmanifest; non viene aggiunto come testo sopra l'immagine.

Seleziona Start. Il browser genera un favicon.ico a sette fotogrammi con immagini quadrate a 16, 24, 32, 48, 64, 128 e 256 pixel. Crea anche icone PNG a 16, 32, 48, 180, 192 e 512 pixel, un manifest e le istruzioni di installazione. Il risultato è un unico ZIP invece di un pulsante di download separato per ogni icona.

Se ti serve solo una favicon.ico classica, scegli Multi-dimensione ICO invece. È utile quando una piattaforma web accetta un caricamento ICO e non richiede un pacchetto separato.

Download salva website-icons.zip. L'esempio pratico contiene nove file ed è di 304,351 byte. Il confronto sopra mostra la sorgente a 512 pixel accanto al fotogramma autentico a 256 pixel estratto dal ICO esportato, invece di uno screenshot simulato del browser.

Estrai lo ZIP, carica i file delle icone nella root del tuo sito web e leggi INSTALL.txt. Include i tag link HTML per ICO, l'icona PNG, l'icona Apple Touch e il web manifest. Se inserisci i file in una sottocartella, aggiorna sia i percorsi HTML che i percorsi delle icone all'interno di site.webmanifest.

Controlla il tuo sito in una nuova scheda del browser e sui dispositivi che ti interessano. I browser possono memorizzare le favicon nella cache, quindi un'icona vecchia non prova immediatamente che l'installazione sia fallita. Conserva l'immagine sorgente e il pacchetto scaricato prima di aggiornare l'editor, perché un aggiornamento riporta alla pagina principale dello strumento.