html-favicon-thumbnail

Ehi gente del web con questo tutorial andiamo a vedere come modificare una immagine per creare una favicon ed aggiungerla nelle pagine web. 

Che cos’è la Favicon

La favicon è un piccola immagine, solitamente 16 px per 16 px che, grazie ad una riga di codice HTML, possiamo aggiungere di fianco al titolo nella barra dei dei titoli del browser. La favicon è importante per il branding del sito, è un marchio che fa distinguere dagli altri. D’altro canto se non inseriamo la favicon avremo di default quell’icona grigia che rappresenta un server che ahimè oggigiorno ancora si vede.

Logo e favicon possono avere la stessa immagine oppure la favicon può anche essere la versione stilizzata o ridotta del logo. La favicon deve avere alcune caratteristiche affinchè spicchi e si faccia notare sullo schermo, deve essere semplice, avere linee marcate e un buon contrasto di colore.

Alcune fra le Favicon più famose

Nell’immagine puoi vedere le caratteristiche di alcune favicon usate dalle big companies; sono semplici, pulite e dai colori marcati. Possono essere composte solo da immagine, o anche da lettere, ma nel caso in cui si usino lettere è meglio non usarne più di due, altrimenti la favicon, essendo piccola, sarebbe difficile da capire.

Come Creare la Favicon

Come detto le dimensioni consigliate per la favicon sono 16px per 16 px, non importa di quale misura sia l’immagine, utilizzando appositi programmi possiamo ridurre le dimensioni di qualsiasi immagine.

In questo tutorial utilizziamo GIMP, un software gratuito simile a Photoshop, se te invece utilizzi Photoshop credo che il processo per creare la favicon sia simile. Nel caso in cui ti servisse, puoi scaricare GIMP cliccando questo link.

Per iniziare la modifica dobbiamo aprire l’immagine con GIMP o trascinarla nell’area di lavoro. Una volta che l’immagine è pronta eseguiamo alcuni semplici passaggi per scalarla:

  • Andiamo col puntatore del mouse su Tools > Transform Tools > Scale
Gimp - Creare una Favicon - Step 1
  • Ci apparirà la seguente finestra dove andremo ad inserire le dimensioni della favicon. Se l’immagine è quadrata possiamo usare la misura standard 16px per 16px, se l’immagine dovesse essere rettangolare basta prendere il lato più lungo e ridurlo a 16 px, quello più corto verrà meno di 16 px ma non è un problema. L’unica cosa importante è che l’immagine rimanga sempre proporzionata, lasciando l’icona che rappresenta una catena di fianco ai campi di inserimento unita GIMP scalerà l’immagine perfettamente proporzionata. Clicca su Scale.
Gimp - Creare una Favicon - Step 2
  • Ora ho il canvas, il canovaccio, che è rimasto alle dimensioni originali dell’immagine. Per ridurre anche questo a 16px basta andare su Image e selezionare Fit Canvas to Layers.
GIMP - Scalare una immagine - step 3
  • Il prossimo step consiste nell’esportare l’immgine cliccando su File e succesivamente Export As…
GIMP - Scalare un'immagine - step 4
  • A questo punto rinominiamo il file e assicuariamoci che l’immagine sia in formato .png.
GIMP - Scalare un'immagine - step 5
  • Nel caso in sui la tua immagine non fosse .png vai sulla parte bassa della finestra e seleziona Select File Type (By Extension), e qui cerca l’estensione .png.
GIMP - Scalare un'immagine - step 6
  • Infine esportiamo l’immagine e la mettiamo nella cartella delle immagini del sito che stiamo costruendo.

Come aggiungere la Favicon nel documento HTML

Per inserire la favicon ci basta inserire un link tag nella head della pagina.

<!DOCTYPE html>
<head>  
    <link rel="icon" href="img/favicon.png" type="image/png">   
    <title>HTML5 - Come Inserire una Favicon</title> 
</head>
<body>
   
</body>
</html>

L’attributo href indica al browser che percorso deve seguire per trovare l’immagine, funziona come l’attributo src nelle immagini, se ti sevono più chiarimenti a rigurado puoi leggere l’articolo Nozioni Base di HTML5 dove spiego come funziona.

La favicon personalizza il sito e aiuta il branding, creare e inserire la Favicon nei siti web è una operazione semplice che richiede poco tempo. Infatti c’è da chiedersi perchè oggigiorno ci siano ancora siti web che non ce l’hanno. Mha…


Guarda il video:

Articoli simili