I dispositivi Apple, tramite Safari Mobile, danno la possibilità all’utente di salvare un indirizzo web sulla home del proprio iPhone, iPad o iPod generando in automatico un’icona con uno screenshot della pagina e un nome scelto dall’utente.

Tuttavia possiamo creare e definire un’icona personalizzata adatta a tale scopo includendo un’immagine in formato PNG di 57×57 pixel con il nome apple-touch-icon.png nella root del sito.

Il discorso è un pochino differente nel caso in cui si voglia specificare un’icona per una singola pagina o sostituire l’icona di default del sito. In questo caso oltre ad avere un’immagine dedicata bisognerà specificare il link dell’icona nel tag head della pagina in questione:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

Tramite il parametro rel abbiamo 2 alternative:

• apple-touch-icon: all’icona verrà applicato il classico effetto lucido e con bordo smussato delle icone Apple.
• apple-touch-icon-precomposed: l’icona verrà visualizzata esattamente come noi l’abbiamo creata, senza alcun effetto preimpostato.

Icone diverse per periferiche diverse

Non tutti sanno però che si possono specificare diverse icone per differenti risoluzioni, per esempio iPhone e iPad, aggiungendo semplicemente l’attributo sizes:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

L’esempio sopra implica la creazione di 3 immagini in formato PNG di tre dimensioni differenti:

• 57×57 (iPhone 3)
• 72×72 (iPad)
• 114×114 (iPhone 4)

Nulla di difficile, quindi, ma in poco tempo è possibile definire un dettaglio che fa decisamente la differenza e fa sembrare il nostro sito una vera e propria applicazione in pieno “Apple style”.