Esempi, buone pratiche e tecniche di Favicon

Presti mai attenzione a quelle piccole icone in cima alle schede del browser? Che ne dici di quando salvi un collegamento a un sito Web o una pagina online? Quelle piccole immagini, o favicon, sono progettate appositamente per quello scopo.

C'è una differenza abbastanza netta tra ciò che rende un'icona minuscola buona o cattiva. Saresti perdonato per aver pensato che le decisioni di progettazione su piccola scala contano meno. Ma una favicon mal progettata può riflettere male sul tuo marchio.

Oggi esaminiamo quali sono queste icone, le tecniche di progettazione di base per esse e le specifiche che dovrai seguire.

Esplora Envato Elements

Che cos'è un Favicon?

Semplicemente, una favicon è una piccola icona trasparente utilizzata per rappresentare un sito Web, un marchio o un'azienda. Favicons aiuta a migliorare l'esperienza dell'utente fornendo un marcatore coerente che informa i visitatori del sito Web che si trovano sullo stesso sito mentre navigano grazie a una grafica coerente.

Il termine favicon deriva da "icona preferita". Questa terminologia risale ai giorni di Internet Explorer in cui le pagine con segnalibro venivano chiamate "Preferiti". La favicon è stata adottata per la prima volta dal World Wide Web Consortium (W3C) per HTML 4.0, circa 2000, e ha iniziato ad apparire in modo più coerente nelle finestre del browser l'anno successivo.

Usa le favicon per spostarti rapidamente tra le schede del browser, identificare un segnalibro o trovare un'app salvata o un collegamento sul telefono. L'identificatore visivo è ciò che la maggior parte delle persone usa per associare questi collegamenti e pagine al pulsante destro per accedervi.

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

Considerazioni tecniche

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

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

Dimensioni e utilizzo delle favicon moderne:

• 32 × 32: standard per la maggior parte dei browser desktop (sostituisce 16 × 16)
• 128 × 128: Chrome store e piccola icona dello schermo a stella di Windows 8
• 152 × 152: icona touch iPad
• 167 × 167: icona touch Retina per iPad
• 180 × 180: icona Retina per iPhone
• 192 × 192: raccomandazione app Web per sviluppatori Google
• 196 × 196: icona schermata iniziale Android

Migliori pratiche

Anche se sembra un'icona che potrebbe essere insignificante in termini di design complessivo, è tutt'altro che vero.

Una favicon dice molto sul tuo marchio e sul tuo sito web. Gli utenti si aspettano che non possano identificarli per nome. Questi piccoli elementi contribuiscono all'esperienza utente complessiva e al marchio.

Quindi, come puoi ottenere il massimo da una favicon?

Tieni a mente queste best practice:

• Una favicon dovrebbe connettersi all'identità del tuo marchio, 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 segno che usi insieme al marchio.
• Pensa alla forma. Lo spazio per una favicon, per impostazione predefinita, è 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 dimensione preferita che verrà visualizzata correttamente sulla maggior parte dei dispositivi, ma non impantanerà l'intero sito Web.
• Evita parole o elementi complessi nel design favicon.
• Attenersi a una semplice tavolozza di colori semplificata per la favicon. È troppo piccolo per impazzire con il colore. Ecco perché la maggior parte di queste piccole icone usa poco più di uno sfondo e un colore di primo piano con un sacco di contrasto tra i due.

Tecniche di progettazione

Poiché una favicon è piccola, potresti essere incline a progettarla per un capriccio in Photoshop. Questo non è il percorso raccomandato per la longevità.

La migliore regola di progettazione visiva per le favicon è quella di mantenere il design semplice. Non esagerare con elementi di colore o testo o marchio.

Costruisci la tua favicon in uno strumento vettoriale come Illustrator o Sketch, quindi esporta il disegno nelle dimensioni necessarie. Questo assicurerà che quando le risoluzioni dello schermo cambiano, avrai una favicon che resiste alla prova del tempo. (Tutto quello che dovrai fare è riesportare a una nuova dimensione.)

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

Evita trucchi come l'animazione; si intromettono solo qui.

Consideralo una sfida progettuale. Può essere piuttosto difficile creare qualcosa di così piccolo da essere facile da leggere.

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

Usa i principi del buon design. Non si sa mai quando la favicon potrebbe essere usata per qualcosa di una dimensione più grande e più visibile. Il salvataggio di un sito Web preferito, ad esempio, può utilizzare una versione grande di una favicon. Lo stesso vale per l'attracco e anche nelle anteprime dei risultati dei motori di ricerca.

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

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

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

• File indice HTML:
• WordPress:

Esempi

Gli esempi seguenti includono alcuni elementi del marchio con favicon associati. (Assicurati di fare clic e mostrare ai designer un po 'di amore sulle loro pagine Dribbble.)

Logotipo reattivo Prodigi.team

Sistema di logo proposto da Butterscotch

Logo Favicon Display

Modello Favicon

Opzione logo TEC 2

Conclusione

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

Come regola generale, una favicon è un rapido identificatore visivo che collega l'utente alla tua presenza digitale. Prenditi cura di esso per assicurarti che sia la migliore e più accurata rappresentazione del tuo marchio.