Come creare facilmente una Favicon con Photoshop

→ D@di per Geekissimo.com

Negli ultimi tempi vi abbiamo proposto degli ottimi generatori di Favicon.ico, l’iconcina 16×16px che identifica graficamente un sito (si trova, solitamente, nella barra degli indirizzi o tra i bookmark), utilissima e indispensabile per personalizzare al meglio il proprio sito o blog. Generatori che, solitamente, convertono testo o immagini Jpeg nel classico formato Ico. Ma, avendo un po’ di tempo, perché non provare a creare da zero la propria Favicon, con Photoshop?

Vi premetto che è davvero un’operazione semplice, e con pochi accorgimenti potrete creare delle bellissime iconcine personalizzate, per aggiungere un tocco di classe in più al vostro sito. Prima di iniziare abbiamo bisogno di un accorgimento: dobbiamo, infatti, scaricare il plugin di Photoshop che supporta i file .ico. L’operazione è gratuita, e da ora in poi, dopo aver installato il plugin, potremo sia aprire che salvare file in questo formato. Una volta installato il tutto, possiamo iniziare con la creazione dell’icona vera e propria.

16×16 pixel è probabilmente una grandezza troppo piccola per iniziare a lavorare. Per questo, vi consigliamo di iniziare un nuovo file di grandezza 64×64 pixel con 72 di risoluzione. In questo quadrato appena creato (per ingrandirlo ovviamente usiamo la lente d’ingrandimento) possiamo iniziare a incollare il nostro logo, oppure a creare una piccola scritta o – ancora – a inserire un simbolo. Una volta contenti del nostro disegno, andiamo a “Immagine > Dimensione immagine” (”Image > Image Size”) e cambiamo la dimensione a 16×16 pixel. Prima di confermare, andiamo dove dice “Resample image” e scegliamo “Bicubic sharper” (se disponibile nella vostra versione di Photoshop).

A questo punto, una volta ridotta l’iconcina, salviamo con nome e come formato, ovviamente, scegliamo Windows Icon (ICO). Una volta pronta l’immagine, non ci resta altro che metterla online nel nostro sito. Innanzitutto, rinominiamola “favicon.ico”, dopodiché facciamo un upload e posizioniamola nella stessa cartella dove c’è il file principale (solitamente “index.htm” o “index.html” o “index.php”). Dopodiché apriamo il file principale, e all’interno del tag
(head) e (/head)
inseriamo la stringa:
(link rel="Shortcut Icon" href="/favicon.ico")(/link)
E il gioco è fatto!

PS: I caratteri ( e ), ovviamente, vanno sostituiti con < e >

Lascia un commento