Leonardo.it

I say blog!

  • 03
  • gen

Come creare facilmente una Favicon con Photoshop

Pubblicato da Daniele Semeraro (D@di)in Blog, Browser, Grafica, Guide, Icone | 3 gennaio, 2008 | 9:00 am
Favicon

Negli ultimi tempi vi abbiamo proposto degli ottimi generatori di Favicon.ico, l’iconcina 16x16px 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="http://cdn.geekissimo.com/favicon.ico"></link>
E il gioco è fatto!


Termini legati all'articolo: , , , .
Altri articoli:

Articoli correlati a "Come creare facilmente una Favicon con Photoshop"



Commenti:

Sono stati scritti 11 commenti su "Come creare facilmente una Favicon con Photoshop"

  1. e per Gimp? Il niente & il nulla?

  2. Micheluzzo

    Molto molto interessante!! Ce provo.

  3. mah guarda… gimp le fa già tutte queste cose, salva in ico, fa il resize ecc

  4. [...] → D@di per Geekissimo.com [...]

  5. nikkio

    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!!

  6. Tokite » Blog Archive » Come creare e modificare icone

    [...] 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 [...]

  7. Lo uso spesso questo plug!

  8. angelo

    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

  9. angelo

    Grazie della risposta (che non ho avuto). Ho risolto comunque

  10. Darth Master

    @ nikkio:

    basta scaricarlo -.-

  11. Nikopolidis

    Grazie per il post, mi è stato utile nell’inserire la Favicon per il mio sito :)




Il network di ISayBlog!


Diventa fan di Geekissimo su Facebook!

Gallery

Windows 8


Consigliaci su Google!

Archivi

Categorie