Come personalizzare le Apple Touch Icons

Scritto da Fabio Quarantini
in HTML e CSS, Tutorials
il 16 Dicembre 2011
Commenti

Web Clip è una funzione di Safari per iOS grazie alla quale è possibile aggiungere un’icona – la Apple Touch Icon – alla SpringBoard dei dispositivi touch della casa ed avere così un collegamento alla pagina web desiderata (come i segnalibri del browser).

L’icona assegnata di default è lo screenshot della pagina e si crea automaticamente cliccando il simbolo “+” o, nei dispositivi piu recenti, l’icona a forma di freccia presente nel browser e selezionando “Aggiungi a Home”. È possibile inoltre scegliere il titolo che identifica l’icona.

Questa funzione è nata per le web app: hanno l’aspetto delle applicazioni in realtà sono collegamenti personalizzabili ad una pagina web.

Aggiungere le icone personalizzate

Il funzionamento è molto simile all’utilizzo di una favicon ma specifico per i dispositivi Apple.
Di default il sistema cerca nella root del sito il file chiamato “apple-touch-icon.png” e, se presente, verrà utilizzato per creare l’icona. In alternativa lo si può richiamare direttamente all’interno dell’head nel codice html.
Per farlo si utilizza il tag <link /> specificando nell’attributo rel “apple-touch-icon” e nel href il percorso “nome-icona.png".

Codice generale

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

All’icona “apple-touch-icon.png” verrà applicato in automatico un effetto lucido.
Affinché Safari iOS non assegni alcun effetto è sufficiente sostituire il nome “apple-touch-icon.png” con “apple-touch-icon-precomposed.png”.

Di norma la dimensione dell’icona è di 57x 57 pixel, ma è possibile ridimensionarla in base alla differente risoluzione dei dispositivi aggiungendo l’attributo sizes:

Codice con attributo sizes

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

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

La funzione Web Clip è disponibile dalla versione iOS 1.1.3 in poi mentre la possibilità di escludere tutti gli effetti acquisiti di default è possibile dalla versione iOS 2.0. Infine, l’adattamento delle dimensioni dell’icona alle differenti risoluzioni è disponibile dalla versione iOS 4.2.

Per facilitare la creazione delle Apple Touch Icons esistono siti web – come Flavorstudios – che permettono di generare icone da un’immagine.

Con piccoli accorgimenti è possibile utilizzare queste icone anche per i dispositivi dotati del sistema operativo Android.

Potete scaricare il pacchetto che abbiamo creato e usarlo come base di partenza per creare le vostre Apple Touch Icons.

Download Apple touch icon

Commenta