Come creare l’icona del vostro sito per Iphone e Ipod

Tutti sanno che ogni sito ha una sua icona predefinita, che è poi quella che vi appare nella barra degli indirizzi, che si chiama favicon.ico.
Con l’avvento dell’iphone e dell’ipod nuova generazione c’è la possibilità che il vostro sito possa essere inserito nei bookmark del melafonino e aggiunto come pulsante nella home del cellulare/ipod.

Per creare un’icona stile osX che stia a pennello nel dispositivo ecco alcune piccole istruzioni e un file PSD con i livelli per creare senza difficoltà la vostra icona compatibile con ipod.

L’icona deve essere in formato PNG e deve avere dimensioni pari a 57 x 57 pixel
Potrete costruire icone anche di dimensioni maggiori ma sarebbe inutile, visto che comunque l’iphone/ipod le scalerà sempre a quella dimensione.
Create la vostra icona (usando il template predefinito da scaricare se volete) e mettete il file PNG nella root del vostro sito
Inserite ora prima del tag </HEAD> il seguente codice

<link rel="apple-touch-icon" href="/Nome-della-vostra-icona.png">

Ora dovreste testare il tutto con un iphone oppure con un simulatore offline.

Per comodità vi allego il PSD con i livelli.
Basterà inserire il vostro logo negli appositi spazi e salvare il tutto in PNG facendo attenzione a DISABILITARE i livelli ‘overlay‘ e ‘griglia‘ che servono solo a farvi capire come verrà visualizzata l’icona e come posizionarla.
Sarà compito dell’iphone/ipod aggiungere l’effetto stondato e glossy sulla vostra icona

Per farvi vedere come appare ecco quella che c’è su mambro.it

:: SCARICA IL TEMPLATE PSD ::