Qual è il punto delle favicon?

Quando comincio a dire alla gente dell'importanza di una favicon nella loro strategia globale di branding online, di solito dicono la stessa cosa: "Non stai portando questo marchio su un po 'troppo lontano?"

Di solito la mia risposta è: "Non se sei serio sui tuoi sforzi di branding!"

È vero, i favicon sono pochissime cose, probabilmente la parte meno importante di un sito, ma è l'attenzione ai dettagli che fa risaltare un sito; e anche se sembra pazzesco, le favicon sono molto importanti da un punto di vista del marchio.

Considerando che WDD è un sito web orientato ad un pubblico di designer, la mia ipotesi è che molti di voi già sanno quali sono le favicon e come crearle; ma questo articolo potrebbe comunque aiutarti a comprendere il motivo per cui dovresti realizzarli e anche fungere da pagina di buona risorsa.

Sto condividendo una grande lista con le risorse relative a favicon qui sotto, quindi considera l'aggiunta di segnalibri a questa pagina per riferimenti futuri. Oh, e se lo fai, nota la favicon di WDD direttamente nella tua lista dei segnalibri;)

Nel caso in cui non sei un designer, o una sorta di cintura nera in favicon-arts, questo articolo copre probabilmente tutto ciò che avrai bisogno di sapere su questi piccoli quadrati sfuggenti di 16 × 16 pixel, e anche alcune faviconosità interessanti . Quindi divertiti!

Cos'è una favicon?

Le favicon sono piccole immagini quadrate di solito 16 × 16 pixel che vengono utilizzate dai browser Web per mostrare una rappresentazione grafica del sito visitato sul lato sinistro della barra degli indirizzi del browser. Probabilmente hai già visto molte favicon, anche se non sai cosa sono. Se c'è qualche dubbio, l'immagine qui sotto aiuterà.

Due esempi di favicon su un browser con schede di Google Chrome.

Se sei interessato a capire un pezzo di storia di Internet, ecco un dato interessante:

La parola favicon è un portamentau fatto con le parole "preferito" e "icona", ed è stato chiamato come tale perché è stato prima supportato da Internet Explorer 5 di Microsoft e nel caso in cui non si utilizza IE, questa funzione di bookmarking del browser è chiamato preferiti.

Qual è lo scopo di una favicon?

Nei primi giorni di Internet, strumenti come Google Analytics erano semplici sogni nella mente di alcuni web-nerd, quindi per quanto strano possa sembrare, in quel momento le favicon erano usate come un modo per stimare il traffico del sito web da contando il numero di visitatori che hanno contrassegnato la pagina. (Questo è un altro frammento interessante nella storia di Internet!)

Ma a parte i fatti interessanti, la ragione principale per avere favicon oggi è migliorare l'esperienza dell'utente. Le favicon vengono utilizzate in tutti i browser moderni nella barra degli indirizzi, nella barra dei collegamenti, nell'area dei segnalibri e nelle schede di navigazione. Oltre a questo, alcuni browser mostrano anche le favicon ogni volta che crei un link di scelta rapida per il sito web corrispondente sul tuo desktop e sul tuo dispositivo mobile.

Sicuramente il motivo principale per avere una favicon è l'evidente miglioramento nell'esperienza utente. Un sito web senza uno mostrerà un generico simbolo del browser su tutti i punti di interazione che ho menzionato sopra, e se ti interessa la tua esperienza utente, devi preoccuparti delle favicon.

Ma non posso evitare di vedere le cose attraverso la lente del branding, la mia area di competenza, quindi penso che le favicon siano ancora più rilevanti dal punto di vista del branding. Ancora una volta, con così tanti punti di interazione, non usarli per aumentare la consapevolezza del marchio è un crimine. La verità è che trovare modi creativi per migliorare il tuo marchio online è sempre un compito impegnativo, e avere una favicon è un modo facile e semplice per farlo. Quindi prenditi un mio amico!

Come creare una favicon?

Creare una favicon per un sito Web è facile come una torta. In effetti, non hai nemmeno bisogno di essere un designer per farlo. Sicuramente aiuta se lo sei, dato che puoi mettere le tue abilità al lavoro e creare qualcosa che spicchi davvero, ma anche il meno esperto di tecnologia di noi può farlo in circa 5 minuti o meno, usando gli strumenti giusti.

I siti web nella lista qui sotto ti permettono di creare una favicon semplicemente caricando un'immagine preesistente. Quindi, se vuoi creare una favicon per il tuo brand, tutto ciò che devi fare è caricare il tuo logo su uno dei seguenti siti e scaricare il file favicon. Facile pisello, spremuta al limone.

Ecco la lista dei generatori Favicon che stai cercando:

I siti web qui sopra variano molto in termini di file che ottieni; soprattutto in termini di dimensioni e estensione del file. Se stai cercando di ottenere il file più compatibile possibile, ti consiglio vivamente di scaricare un'immagine di 16 × 16 pixel con il formato "ico".

Se hai bisogno di ispirazione, prova a consultare le gallerie di favicon qui sotto:

Come usare la tua favicon?

Una volta che la favicon è stata progettata con cura, l'installazione sul server non dovrebbe richiedere più di un paio di minuti in due semplici passaggi. Per questo avrai bisogno di accedere alla cartella principale del tuo sito Web e uno strumento di modifica del testo per modificare il codice HTML del tuo sito web.

Passo 1

Dovrai caricare il file "favicon.ico" sul tuo server. Per fare ciò, punta la barra degli indirizzi del browser sul tuo server FTP; il tuo URL dovrebbe essere simile a questo:

ftp://[email protected]

Premi invio e il browser ti chiederà un nome utente e una password prima di concedere l'accesso al file server. Una volta entrato, carica il file "favicon.ico" nella cartella principale e il gioco è fatto.

Passo 2

Ora dovrai modificare la pagina HTML del tuo sito web per aiutare i browser a trovare l'immagine preferita. Tieni aperta la tua finestra FTP, trova e scarica il file "index.html" o "header.php" dal tuo server e segui i passaggi seguenti in base al file che ottieni:

Se il tuo sito Web è realizzato in un semplice codice HTML, inserisci il codice riportato di seguito nell'area HEAD del file "index.html" e non dimenticare di modificare "yoursite.com" come indirizzo del tuo sito web.

Se usi WordPress, inserisci il codice qui sotto nell'area HEAD del tuo file "header.php".

Fatto ciò, carica di nuovo il file nel punto da cui lo hai ottenuto. Hai finito!

In effetti, la maggior parte dei browser moderni sono abbastanza intelligenti da trovare il tuo file favicon anche senza alcun pezzo di codice, ma solo fino a quando l'immagine favicon ha 16 × 16 pixel, è stata nominata come "favicon.ico" ed è salvato nella cartella principale della cartella del tuo sito web.

Come creare una favicon in Photoshop

Con così tanti strumenti disponibili per aiutarti a creare la tua favicon, perché dovresti prendere la strada difficile e crearla in Photoshop? Beh, se sei un designer e vuoi ottenere il meglio dalla tua favicon, questo è sicuramente il modo professionale per farlo. Il trucco è che Photoshop non supporta nativamente i file "ico", quindi è necessario scarica questo plugin da Telegraphics .

Assicurati di installarlo prima di seguire il tutorial qui sotto. Photoshop non funzionerà senza di esso.

Cerca l'opzione "ICO" nella casella "Salva con nome" di Photoshop per verificare che il plug-in sia installato.

Crea un nuovo documento in Photoshop selezionando la voce di menu "File" e la seguente opzione "Nuovo", quindi imposta il tuo quadro su 64 × 64 pixel. Perché? Dal momento che la dimensione favicon 16 × 16 finale è così piccola, avere una tela più grande su cui lavorare ti aiuterà a far fluire il tuo succo creativo. Quindi incolla il tuo logo nel documento e libera il tuo magico potere creativo di unicorno.

Una volta terminato, seleziona semplicemente il menu "Immagine" e la seguente opzione "Dimensione immagine" e riduci l'immagine a 16 × 16 pixel. Ricorda di fare clic su "Ricampiona immagine" e scegli "Bicubic Sharper", per assicurarsi che l'immagine non si offuschi quando ridimensionata. Se non ti piace il risultato finale, semplicemente annulla le tue modifiche di latest con "AltCtrl / AltCmd + Z" e continua a lavorare sul design finché non sei soddisfatto.

Per finire la tua favicon tutto quello che devi fare è cliccare sul menu "File" e la seguente opzione "Salva come", lì ti ricordi di nominare il tuo file come "favicon.ico". Ancora una volta, lavoro fatto!

Conclusione

Le favicon sono una di quelle piccole cose a cui di solito non prestiamo molta attenzione, ma la verità è che, lungi dall'essere insignificanti, sono una parte molto importante del web, sia dal punto di vista dell'interfaccia utente che da un punto di branding- di-view.

Alcuni dicono che grandi cose arrivano in piccole dimensioni, e penso che valga anche per le favicon, perché ogni web designer e / o specialista del branding che prende sempre il tempo per aggiungere una favicon ai siti dei propri clienti, anche quando il cliente non ha l'idea di cosa sia una favicon, dimostra una grande dose di professionalità e attenzione ai dettagli; il tipo di qualità che ogni cliente apprezza.

Crei le favicon per i tuoi clienti? Sono troppi problemi per troppa poca ricompensa? Fateci sapere che ne pensate nei commenti.

Immagine in primo piano / miniatura, immagine confusa via Shutterstock

web design il branding come favicon suggerimenti e trucchi

Qual è il punto di Favicons?