Come creare una favicon da qualsiasi immagine (gratis, nel tuo browser)

Quella piccola immagine accanto al titolo di una pagina nella scheda del tuo browser ha un nome: la favicon. Compare anche nei segnalibri, negli elenchi della cronologia e sulla schermata principale quando qualcuno salva il tuo sito. Un sito senza favicon sembra incompleto, contrassegnato da un’icona generica di documento vuoto invece che dal tuo marchio. La buona notizia è che crearne una richiede un minuto e puoi farlo interamente nel tuo browser. Questa guida illustra cos’è una favicon, cosa la rende efficace e come trasformare qualsiasi immagine in una favicon adeguata con il Generatore di Favicon gratuito.

Cos’è davvero una favicon

Una favicon è la piccola icona che un browser mostra per rappresentare il tuo sito. La vedi nella scheda, nella barra dei segnalibri, nella cronologia delle ricerche e nell’elenco delle scorciatoie salvate su un telefono. È uno dei pezzi più piccoli di un sito web, eppure svolge un lavoro reale: aiuta le persone a riconoscere la tua scheda in una fila di venti e rende un segnalibro immediatamente riconoscibile.

Tecnicamente una favicon è solo una piccola immagine quadrata che il browser carica insieme alla pagina. Le dimensioni sono minuscole, spesso 16 per 16 o 32 per 32 pixel per la scheda, con versioni più grandi usate per i segnalibri e le scorciatoie della schermata principale. Poiché viene mostrata così piccola, le regole per progettarla sono diverse da quelle per progettare un logo completo.

Cosa rende efficace una favicon

L’errore più grande è usare un logo dettagliato che sta benissimo su un biglietto da visita e si trasforma in una macchia a 16 pixel. Una favicon deve leggersi a colpo d’occhio, a una dimensione più piccola di un’unghia. Tieni a mente questi principi:

• Mantienila semplice. Una forma, una lettera o un simbolo deciso. Le linee sottili e il testo piccolo scompaiono alle dimensioni di una favicon.
• Rendila riconoscibile. Deve collegarsi al tuo marchio, spesso una singola iniziale o l’elemento centrale del tuo logo.
• Parti da un quadrato. Le favicon sono quadrate, quindi un’immagine sorgente quadrata evita ritagli e allungamenti goffi.
• Usa un contrasto forte. Deve risaltare sia sui temi chiari sia su quelli scuri del browser.

Se il tuo marchio è un logotipo testuale, estrai solo la prima lettera o la parte dell’icona. Cercare di far stare un nome intero in 16 pixel non funziona mai.

Prepara prima la tua immagine sorgente

Una favicon pulita parte da una sorgente pulita. Se la tua immagine è rettangolare o il soggetto è spostato verso un lato, ritagliala prima in un quadrato stretto con il Ritagliatore di Immagini in modo che la parte importante sia centrata. Se il file è enorme, un rapido passaggio attraverso il Ridimensionatore di Immagini lo riduce a una dimensione ragionevole prima della conversione. E se la tua immagine è in un formato che il generatore non accetta, il Convertitore di Formato Immagine la trasformerà in un PNG standard in pochi secondi.

Dedicare un momento alla sorgente ripaga. Un’immagine centrata, quadrata e ad alto contrasto diventa una favicon nitida, mentre una sbilanciata o sfocata resta sbilanciata e sfocata, qualunque cosa tu faccia dopo.

Come creare la favicon

Una volta che la tua sorgente ha l’aspetto giusto, il Generatore di Favicon fa il resto. Funziona interamente nel tuo browser, quindi l’immagine che scegli non lascia mai il tuo dispositivo e non viene mai caricata su un server.

1. Apri lo strumento e seleziona l’immagine quadrata che hai preparato.
2. Lascia che generi la favicon dalla tua immagine.
3. Scarica il risultato e aggiungilo al tuo sito.

Questo è tutto il lavoro. Non c’è alcun account da creare né alcuna filigrana sul risultato.

Inserirla nel tuo sito

Dopo il download, posiziona il file della favicon nella cartella radice o delle risorse del tuo sito e fai riferimento ad esso nell’intestazione della pagina. La maggior parte dei costruttori di siti e dei framework ha un punto dedicato a una favicon, quindi potrebbe bastarti inserire il file e indirizzarvi un’impostazione. Una volta online, un ricaricamento forzato mostra la nuova icona nella tua scheda. I browser memorizzano le favicon nella cache in modo aggressivo, quindi se non vedi subito il cambiamento, svuota la cache o apri la pagina in una finestra privata.

La versione breve

Una favicon è la piccola icona quadrata che rappresenta il tuo sito nelle schede e nei segnalibri, e ogni sito trae vantaggio dall’averne una. Progetta per dimensioni minuscole: semplice, riconoscibile, quadrata e ad alto contrasto. Pulisci prima la tua sorgente con un ritaglio o un ridimensionamento, poi trasformala in un’icona finita con il Generatore di Favicon gratuito, tutto nel tuo browser e tutto in privato.