Geekissimo

Come creare facilmente una Favicon con Photoshop

 
Daniele Semeraro (D@di)
3 Gennaio 2008
9 commenti
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="/favicon.ico"></link>
E il gioco è fatto!
Potrebbe interessarti anche
Articoli Correlati
Come utilizzare lo stile capolettera in blog e siti web

Come utilizzare lo stile capolettera in blog e siti web

Come è noto (e non bisogna certo essere dei geek per saperlo), così come nel resto della nostra società, anche nel mondo del web l’occhio vuole la sua parte. Di […]

Video tutorial: come trasformare le foto in quadri pop art

Video tutorial: come trasformare le foto in quadri pop art

Vi dilettate di tanto in tanto con il vostro programma di fotoritocco preferito e, pur non essendo professionisti del settore, amate divertirvi modificando le foto digitali? Ecco allora un nuovo […]

Video Tutorial in HD: Come trasformare le foto in vecchi fumetti con Photoshop

Video Tutorial in HD: Come trasformare le foto in vecchi fumetti con Photoshop

Ebbene sì, carissimi amici geek, anche questa settimana è arrivato il momento di sfoderare tutta la nostra fantasia e tutta la nostra abilità nel fotoritocco. Anche se, come il sottoscritto, […]

San Valentino: icone, sfondi, cartoline, temi e tanto altro gratis per festeggiare con i nostri amati!

San Valentino: icone, sfondi, cartoline, temi e tanto altro gratis per festeggiare con i nostri amati!

Ormai manca davvero poco all’arrivo di San Valentino, la festa degli innamorati, e noi non possiamo che festeggiarla in modo geek! Eccovi quindi una mega collezione di icone, sfondi, temi […]

Le 8 regole per disegnare un logo perfetto

Le 8 regole per disegnare un logo perfetto

Come già ribadito in diverse occasioni, uno dei principali mezzi per far colpo sui lettori di un sito/blog è quello di adottare una grafica semplice ma allo stesso tempo bella […]

Lista Commenti
Aggiungi il tuo commento

Fai Login oppure Iscriviti: è gratis e bastano pochi secondi.

Nome*
E-mail**
Sito Web
* richiesto
** richiesta, ma non sarà pubblicata
Commento

  • #1GH

    e per Gimp? Il niente & il nulla?

    3 Gen 2008, 10:01 am Rispondi|Quota
  • #2Micheluzzo

    Molto molto interessante!! Ce provo.

    3 Gen 2008, 2:11 pm Rispondi|Quota
  • #3flux

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

    3 Gen 2008, 2:13 pm Rispondi|Quota
  • #4nikkio

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

    3 Gen 2008, 6:46 pm Rispondi|Quota
  • #5huejuice

    Lo uso spesso questo plug!

    24 Giu 2008, 8:14 pm Rispondi|Quota
  • #6angelo

    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

    16 Ott 2008, 9:02 pm Rispondi|Quota
  • #7angelo

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

    18 Ott 2008, 9:54 pm Rispondi|Quota
  • #8Darth Master

    @ nikkio:

    basta scaricarlo -.-

    15 Mar 2009, 11:48 am Rispondi|Quota
  • #9Nikopolidis

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

    13 Mag 2009, 2:42 am Rispondi|Quota
Trackbacks & Pingback
  1. Come creare facilmente una Favicon con Photoshop