Lezione 9 - Corso Avanzato Html

Favicon Piccola Icona in Html


Favicon

La favicon è una piccola immaginetta che è posizionata sù in alto a sinistra della tab del browser.
Questa immaginetta è consigliabile crearla con un programma di grafica, ma per chi non vuole perdere tempo, può cercare su internet favicon generator e salvarsela.

L'immagine deve essere quadrata, e possibilmente che non sia molto grande, cosigliabile la dimensione di 16x16 pixel oppure 32x32 pixel, l'estensione del file dell'immaginetta può essere: .ico .gif .png .jpg

Ora vediamo come si collega la piccola icona alla nostra pagina web.

Il tag va inserito nel <head> la sintassi è:
<link rel="icon" type="images/jpg" href="percorso.jpg">


Analizziamone il contenuto: abbiamo messo nel nostro codice il tag
link (collegamento), link è il tag che consente di attaccare, collegare, lo stile di un file esterno al documento html

con all'interno l'attributo
rel rel è un'attributo per indicare la relazione tra il file collegato ed il documento html, a cui abbiamo dato il valore icon,

dopo abbiamo specificato con
type il tipo di file, e abbiamo detto che è un'immagine con estensione .jpg,

e dopo ancora con
href abbiamo specificato il percorso da fare per raggiungere la nostra piccola icona.

Il codice è:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Favicon Piccola Icona</title>
  <meta charset="utf-8">
  <link rel="icon" type="images/jpg" href="../Corso_Avanzato_html/Immagini/Casetta_32x32px.jpg">
 </head>
 <body>			    
   <h3>Favicon Piccola Icona</h3>
   <p>In questa pagina é stata inserita una immagine come icona predefinita</p>
 </body>                
</html>