La favicon è l’icona visualizzata alla sinistra del testo sulla barra del titolo del browser. Rappresenta il logo in miniatura del sito web. E’ particolarmente utile per far identificare meglio il proprio sito web. Avete presente la F bianca su sfondo blu che identifica Facebook o l’uccellino di Twitter o ancora la busta da lettera che spesso indica il servizio di posta elettronica? Tutte queste sono favicon.
Ci sono vari modi per creare una favicon, in questa guida vediamo come farlo con Photoshop.
Se la versione di Photoshop non supporta il formato ico è necessario scaricare un plugin (disponibile per Mac e Windows in varie versioni) da trasferire nell’omonima cartella del programma.
A questo punto aprire Photoshop, creare un nuovo file con dimensioni 48×48 e risoluzione da 72 px. Realizzare una nuova immagine oppure caricare il proprio logo. Non rimane altro da fare che salvare come file ICO.
Modificare il file index del proprio sito web aggiungendo tra i tag <head> ed </head> il seguente codice:
<link rel=”shortcut icon” href=” favicon.ico”>
Caricare via ftp la nuova pagina index e la favicon.
Svuotare la cache del browser e verificare la presenza della nuova favicon.
Approfondimenti:
Creare Medaglietta Codice QR Dinamico per Cane e Gatto
Photoshop (L12): Come Creare Immagine GIF
Photoshop (L15): Come Creare Fototessera
Photoshop (L13): Come Unire Immagini
Photoshop (L14): Come Inserire Forma Personale
Arduino (L11): controllare da remoto con Ethernet Shield
Photoshop (L11): Come Sfumare Immagine
WordPress e usabilità su dispositivi mobili:…