Come Creare Una Favicon Con Photoshop

Oggi vediamo quanto è semplice creare una favicon con photoshop.

La favicon è l’icona 16x16px che indentifica graficamente il tuo sito e la puoi vedere se vai nella barra degli indirizzi o tra i bookmark. È un’icona molto utile che personalizza il tuo sito e gli dà quel tocco di professionalità in più. Di solito coincide con un dettaglio o un simbolo del logo del sito.

Ma come crearla?

Esistono diversi metodi per fare questa operazione, ma ora ti dirò il metodo in assoluto più veloce per farlo.

Quello che farò è facile: creo la favicon con photoshop in formato .png e poi grazie a un semplice programma online la converto in formato .ico.

Creare favicon in .png con photoshop

Per prima cosa apri il tuo logo con Photoshop —> Per farlo vai sulla barra delle applicazioni (che si trova in alto) e clicca su File – Apri, qui puoi selezionare il tuo logo (in formato .eps, .pdf, .jpg o .png) e lo apri.

creare favicon

Ora crea il file 16x16px à Vai sulla barra delle applicazioni (si trova sempre in alto) e clicca File – Nuovo. Inserisci 16 nelle caselle di testo larghezza e altezza. Di lato c’è un menu a tendina con tutte le unità di misura che puoi utilizzare. A noi interessano i pixel, quindi clicca su pixel.
Come risoluzione inserisci 72 pixel/pollice, visto che stiamo lavorando sul web non ci serve una
risoluzione molto alta. Metodo colore: inserisci RGB. Contenuto sfondo: trasparente. Impostato questo puoi cliccare su ok e hai pronto il tuo file 16x16px. Ora basta solo inserire il logo e ci siamo 🙂

creare-favicon-1

 

Inserire il logo —> Ok, ora hai due file aperti sul tuo pannello di photoshop. Uno è il tuo logo e l’altro è il file per creare la tua favicon. Vai sulla barra degli strumenti (si trova a sinistra) e clicca sul secondo pulsante partendo dall’alto, si chiama “strumento selezione rettangolare”. Ora seleziona l’icona che diventerà la tua favicon e la racchiudi all’interno di questo spazio.

creare favicon

Oracopia e incolla l’immagine sul file già pronto 16x16px. Per farlo, quando hai selezionato la tua iconcina clicca command+C (o se hai un mac: mela+C), torna sulla finestra della favicon e incolla con command+V (se hai un mac: mela+V).

Posiziona la favicon —> Verifica che la tua favicon sia posizionata in posizione centrale rispetto al riquadro. Per farlo vai a sinistra nella barra degli strumenti e clicca sul primo, partendo dall’alto “strumento sposta”. Con questo strumento puoi spostare e centrare la tua favicon all’interno del riquadro. Inalternativa puoi anche aiutarti con le frecce della tastiera per muoverti di pochi px. O se hai bisogno di rimpicciolire la tua iconcina, vai su Modifica – Trasforma – Scala e ridimensiona del tanto che ti serve per centrarla all’interno dello spazio di lavoro.

creare-favicon-4

Salva la favicon —> Per salvare vai su File – Salva per web e imposta in alto a destra, nel menu a tendina, png24. Ora clicca su salva. Nominala come preferisci, io di solito inserisco un nome completo tipo questo per tenere tutto in ordine: Nomeprogetto_favicon_16x16.

creare-favicon-5

Convertire un file .ico

Per convertire il file appena creato da .png a .ico puoi utilizzare uno di questi siti online:
Favicon.cc
ProDraw
HTMLKit
Gimp

Quello più semplice è Favicon.cc e ti dà la possibilità di convertire un file .png, gif o jpg in formato .ico. Cliccando semplicemente su Import image, selezioni in file .png, lo carichi e clicchi su download.

favicon cc

E il gioco è fatto 😉

Silvia Pinna

Silvia Pinna

Graphic Designer Freelance at Silvia Pinna
Communication designer specializzata in persuasione visiva. Dopo aver lavorato come Graphic Designer per diverse agenzie di comunicazione decide di cambiare il suo modo di lavorare. Negli ultimi anni si specializza nella persuasione visiva, quindi realizza lavori non più solo belli visivamente ma anche che inducano alla vendita. Da nove anni collabora con agenzie di comunicazione, multinazionali, aziende, piccole e medie imprese, designer, liberi professionisti, commercianti.
Silvia Pinna

Latest posts by Silvia Pinna (see all)