Hai mai prestato attenzione a quelle piccole icone in cima alle schede del browser? E quando salvi un collegamento a un sito web o a una pagina online? Quelle piccole immagini, o favicon, sono progettate appositamente per questo scopo.

C’è una differenza piuttosto netta tra ciò che rende una piccola icona buona o cattiva. Sareste perdonati se pensaste che le decisioni di design in scala ridotta contano meno. Ma una favicon progettata male può riflettersi negativamente sul tuo marchio.

Oggi vedremo cosa sono queste icone, le tecniche di base di design per loro, e le specifiche che dovrai seguire.

Che cos’è una favicon?

Semplicemente, una favicon è una piccola icona trasparente usata per rappresentare un sito web, un marchio o un business. Le favicon aiutano a migliorare l’esperienza dell’utente fornendo un marcatore coerente che dice ai visitatori del sito web che sono sullo stesso sito mentre navigano grazie ad un visual coerente.

Il termine favicon deriva da “icona preferita”. Questa terminologia risale ai tempi di Internet Explorer, quando le pagine con segnalibri erano chiamate “preferiti”. La favicon è stata adottata per la prima volta dal World Wide Web Consortium (W3C) per HTML 4.0, intorno al 2000, e ha iniziato ad apparire in modo più coerente nelle finestre del browser l’anno successivo.

Utilizzare le favicon per passare rapidamente da una scheda all’altra del browser, identificare un segnalibro o trovare un’applicazione salvata o un collegamento sul tuo telefono. L’identificatore visivo è quello che la maggior parte delle persone usa per associare questi link e pagine con il pulsante giusto per accedervi.

Tradizionalmente, le favicon usavano un formato di file .ico, ma questo è meno di un problema ora. Qualsiasi tipo di file trasparente funzionerà nella maggior parte dei casi; .png è spesso il formato di scelta.

Considerazioni tecniche

Un tempo tutte le favicon erano quadrati super piccoli da 16 pixel. Questo non è più il caso con più schermi retina ad alta definizione e icone di collegamento da considerare.

HTML 5 include standard per le favicon con dimensioni multiple per tutti i tipi di uso, dalle piccole icone del browser alle icone della docking station del computer alle icone della schermata iniziale. Non avete nemmeno più bisogno di quel quadrato di 16 pixel.

Moderne dimensioni e uso delle favicon:

• 32×32: Standard per la maggior parte dei browser desktop (sostituisce il 16×16)
• 128×128: Chrome store e piccola icona dello schermo a stella di Windows 8
• 152×152: Icona iPad touch
• 167×167: Icona iPad Retina touch
• 180×180: Icona iPhone Retina
• 192×192: Google Developer web app recommendation
• 196×196: Icona della schermata iniziale di Android

Pratiche migliori

Anche se sembra che un’icona che è così potrebbe essere insignificante in termini di design generale, questo è tutt’altro che vero.

Una favicon dice molto sul tuo marchio e sito web. Gli utenti sono arrivati ad aspettarsele se non possono identificarle per nome. Questi piccoli elementi contribuiscono all’esperienza complessiva dell’utente e al marchio.

Come puoi sfruttare al meglio una favicon?

Tieni a mente queste best practice:

• Una favicon dovrebbe collegarsi alla tua identità di marca, ma spesso è troppo piccola per includere un intero logo. Usa un elemento identificabile come la prima lettera del nome del tuo marchio o un piccolo marchio che usi insieme al marchio.
• Pensa alla forma. Lo spazio per una favicon, di default, è quadrato. Se vuoi qualcos’altro, è necessario uno sfondo trasparente. Alcuni sistemi possono anche arrotondare i bordi, facendo un’altra considerazione da tenere a mente.
• Assicurati che il file sia piccolo, ma non troppo piccolo. Carica una favicon di dimensioni tali da renderla correttamente sulla maggior parte dei dispositivi, ma che non impantani il sito web nel suo complesso.
• Evita parole o elementi complessi nel design della favicon.
• Assicurati una palette di colori semplice e lineare per la favicon. È troppo piccola per impazzire con i colori. Ecco perché la maggior parte di queste piccole icone usano poco più di un colore di sfondo e di primo piano con molto contrasto tra i due.

Tecniche di design

Siccome una favicon è piccola, potresti essere incline a disegnarla per capriccio in Photoshop. Questa non è la strada raccomandata per la longevità.

Costruisci la tua favicon in uno strumento vettoriale come Illustrator o Sketch, poi esporta il design nelle dimensioni necessarie. Questo assicurerà che con il cambiare delle risoluzioni dello schermo, avrai una favicon che resiste alla prova del tempo. (Tutto quello che dovrai fare è ri-esportare in una nuova dimensione.)

La regola principale del design visivo per le favicon è di mantenere il design semplice. Non esagerare con il colore, il testo o gli elementi del marchio. Guardando gli esempi in questo post, vedrai che quasi tutti questi piccoli elementi sono leggibili a 16 per 16 pixel.

Evitare trucchi come l’animazione; sono solo d’intralcio in questo caso.

Considerala una sfida di design. Può essere piuttosto difficile creare qualcosa di così piccolo che sia facile da leggere.

Salva il file come png trasparente. È una buona abitudine che ti assicura che non ti ritroverai con bordi strani o bordi sulla favicon. (Niente sembra peggio di un bordo bianco frastagliato che circonda l’icona.)

Usa i principi del buon design. Non sai mai quando la favicon potrebbe essere usata per qualcosa di più grande e visibile. Salvare il segnalibro di un sito web, per esempio, può usare una versione grande di una favicon. Lo stesso vale per il docking e anche nelle anteprime dei risultati dei motori di ricerca.

Anche se è piccola, questa icona rappresenta il tuo marchio. Progettala bene.

Una volta che hai il file pronto, puoi aggiungerlo al tuo sito web con solo un paio di righe di codice. (Molti temi WordPress e costruttori di siti web hanno già un elemento favicon incluso, quindi non devi nemmeno pensare a questo passo.)

Dopo aver caricato il file immagine, inserisci il seguente codice nell’intestazione del tuo sito web, notando che “iconpath” e “iconname” si riferiscono al tuo specifico elemento file:

Esempi

Gli esempi qui sotto includono alcuni elementi del marchio con favicons associate. (Assicurati di cliccare e mostrare ai designer un po’ di amore sulle loro pagine Dribbble.)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

Favicon Template

TEC Logo Opzione 2

Conclusione

Quello che le favicon mancano in dimensioni, compensano con l’esperienza dell’utente. Queste icone servono come strumenti di navigazione per i visitatori del tuo sito e per quelli che tendono a lasciare troppe schede del browser aperte.

Come regola generale, una favicon è un rapido identificatore visivo che collega l’utente alla tua presenza digitale. Prestate attenzione ad essa per assicurarvi che sia la migliore e più accurata rappresentazione del vostro marchio.

Si tratta di una favicon che è stata creata con il vostro sito.