Come creare facilmente una Favicon con Photoshop
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
E il gioco è fatto!
<head> e </head> inseriamo la stringa:<link rel="Shortcut Icon" href="/favicon.ico"></link>E il gioco è fatto!
9 Commenti
Scritto da Daniele Semeraro (D@di)
Calciopro
CineTivu
Dissacration
Finanzalive
Geekissimo
GingerAndTomato
GuadagnoRisparmiando
IoChiamo
IoVideogioco
Medicinalive
Politicalive
Starlettime
TheAppleLounge
UltimoGiro
Ecologiae
Lussuosissimo
MondoReality
IlCinemaniaco
e per Gimp? Il niente & il nulla?
Molto molto interessante!! Ce provo.
mah guarda… gimp le fa già tutte queste cose, salva in ico, fa il resize ecc
[...] → D@di per Geekissimo.com [...]
bello! spendere 1000 euri per un programma e fare le emoticon…. qualcosa di più economico no?
chessò il paint.net, il gimp… cene sono decine e gratis!!
[...] essere adeguato utilizzando due plugin di cui ci abbiamo già parlato in precedenza, Icon Plugin e SW , entrambi gratuiti e perfettamente funzionanti. Altre alternative sono rappresentate da software [...]
Lo uso spesso questo plug!
Scusate l’ignoranza, ma qualcuno può dirmi qual è il percorso per trovare la ‘cartella dove c’è il file principale (solitamente “index.htm” o “index.html” o “index.php”)’
Io ho firefox, ma nella cartella del programma (C/programmi/mozilla firefox) non vedo nessuna cartella ‘index’. Dove sbaglio?
Grazie
Grazie della risposta (che non ho avuto). Ho risolto comunque