Vai al tutorial
lil cactus

Come creare un file favicon ICO

Principiante4 minutiAggiornato il

Risposta rapida

In Lil Cactus apri la tua grafica e scegli File poi Esporta poi ICO… Nel campo Nome file scrivi favicon.ico. In Dimensioni delle icone lascia selezionate tutte e sei le dimensioni (da 16 a 256 px; è l’impostazione predefinita), poi fai clic su Esporta. Il download contiene tutte e sei le versioni quadrate in un unico file ICO.

Le sei dimensioni esportate dell’icona della foglia su strisce chiare e scure: 16, 32, 48, 64, 128 e 256 pixel nella riga superiore di ciascuna, con 16 e 32 pixel ingranditi quattro volte sotto
Le sei dimensioni contenute in favicon.ico su sfondo chiaro e scuro: 16, 32, 48, 64, 128 e 256 px nella riga superiore, con 16 e 32 px ingranditi 4× sotto.
Tempo
4 minuti
Livello
Principiante
Ti serve
Un’icona o un’altra grafica aperta nell’editor
Funziona con
PNG, JPG, SVG, PSD e progetti Lil Cactus (la trasparenza viene mantenuta)
Apri l’esempio in Lil CactusUsa una tua foto

Gratis, senza registrazione. La tua foto resta sul tuo computer.

Una favicon è la piccola icona accanto alla scheda o al segnalibro di un sito web. Le forme semplici con ampie aree di colore si leggono meglio in piccolo. Questo esercizio usa una foglia in due toni con una sola venatura chiara.

Esportare una favicon ICO in quattro passaggi

  1. Apri la grafica

    Apri la grafica per esercitarsi di questa pagina. Per un tuo file, scegli File poi Apri… e seleziona l’immagine. La scacchiera attorno alla foglia indica lo sfondo trasparente. Può comparire un breve avviso sull’ammorbidimento dei bordi SVG; si chiude da solo.

    Menu File con Apri cerchiato
    Carica la grafica che vuoi trasformare in icona.

  2. Scegli File › Esporta › ICO…

    Scegli File poi Esporta poi ICO… Si apre la finestra Esporta come ICO con un’anteprima della grafica.

    Menu File e sottomenu Esporta con ICO cerchiato
    Apri la finestra di esportazione ICO.

  3. Scegli il nome del file e le dimensioni

    Nel campo Nome file scrivi favicon.ico. In Dimensioni delle icone lascia selezionate 16, 32, 48, 64, 128 e 256. Sono le sei dimensioni disponibili.

    Campo Nome file dell’ICO impostato su favicon.ico, cerchiato
    Dai un nome al file dell’icona scaricato.
    Opzioni di esportazione ICO con 16, 32, 48, 64, 128 e 256 selezionati e il gruppo Dimensioni delle icone cerchiato
    Ogni numero indica sia la larghezza sia l’altezza di un’icona quadrata, in pixel.

  4. Esporta l’ICO

    Controlla che in fondo alla finestra compaia 6 dimensioni icona, poi fai clic su Esporta. Il browser salva favicon.ico secondo le sue impostazioni di download o di percorso di salvataggio.

    Fondo della finestra ICO con 6 dimensioni icona, Annulla e il pulsante Esporta cerchiato
    Controlla il numero di dimensioni selezionate prima di esportare.

Usare l’icona sul tuo sito web

Carica favicon.ico nella cartella principale del sito, così si apre all’indirizzo /favicon.ico. Puoi anche indicarla nel <head> della pagina con <link rel="icon" href="/favicon.ico"> (vedi il riferimento di MDN sulle icone).

I browser memorizzano le favicon nella cache, quindi un’icona aggiornata può richiedere un ricaricamento o un po’ di tempo per comparire.

Se l’icona da 16 px si legge male

Semplifica la grafica: meno dettagli, forme più grandi e tratti più spessi. La figura in cima a questa pagina mostra cosa resta leggibile a 16 px: le due ampie aree di colore della foglia e la sua unica venatura spessa.

Controlla che la forma risalti sia sulle barre delle schede chiare sia su quelle scure. Nella figura, la metà verde scuro della foglia quasi scompare sullo sfondo scuro, ed è la metà verde chiaro a rendere riconoscibile la forma. Una grafica in un solo colore scuro lì si vedrebbe a fatica.

Cosa fare dopo

File favicon ICO: domande e risposte

Posso trasformare un PNG o un JPG in ICO?

Sì. In Lil Cactus puoi aprire entrambi i formati ed esportarli con i controlli ICO. La grafica visibile diventa l’icona.

Un ICO può avere lo sfondo trasparente?

Sì. In Lil Cactus l’ICO mantiene la trasparenza già presente nella grafica. Se vuoi che lo spazio attorno all’icona sia libero, rimuovi prima uno sfondo uniforme.

Cosa succede a un’immagine rettangolare in un ICO?

In Lil Cactus l’immagine viene adattata dentro ogni quadrato selezionato senza deformarla. Lo spazio in più viene riempito con un margine trasparente.

Posso esportare un ICO con una sola dimensione?

Sì. In Lil Cactus lascia selezionata solo la dimensione che ti serve in “Dimensioni delle icone”. L’ICO conterrà solo quella dimensione.

Posso creare un ICO di 512 × 512 px?

No. In Lil Cactus la dimensione ICO più grande è 256 × 256 px. Usa il PNG quando ti servono dimensioni in pixel maggiori.

La mia immagine viene caricata quando creo un ICO?

No. Lil Cactus crea l’ICO nel browser e lo scarica sul tuo dispositivo; l’immagine non viene inviata a un server. Le statistiche di utilizzo facoltative sono descritte nella pagina sulla privacy.

Pubblicato il  · Verificato il