Apple Touch Icon – Cos’è e Come Funziona

Grazie all’ottimizzazione dei suoi sistemi operativi lanciati nel tempo, l’efficienza che viene offerta all’utente rispetto ad altri SO, l’intuitività offerta nell’uso del touchscreen nei dispositivi mobile e lo spettacolare seppur minimalista design dei prodotti, hanno reso Apple un’azienda ancora più popolare di quanto non lo fosse precedentemente.

È soprattutto con l’arrivo di altri device come i tablet, noti come iPad, e degli smartphone, i famosissimi iPhone, che anche quello che era il core business di Apple ovvero la vendita del computer desktop Mac ha ricevuto nuova linfa vitale.
Ad oggi Apple è senza dubbio uno dei brand top a livello mondiali, ed uno dei marchi più riconosciuti e rispettati del mondo.

In questo ultimo decennio l’utilizzo di dispositivi mobili capaci di quelle azioni che precedentemente erano possibili esclusivamente dai nostri pc dekstop o portatili, è davvero fiorito.
Soprattutto il mercato degli smartphone è quello che ha visto una rapidissima crescita ne giro di poco tempo.
Se si pensa alla moltitudine di smartphone che sono sul mercato oggi ed anche al fatto che il primo iPhone è stato commercializzato nel 2007, relativamente pochi anni fa.

Questo successo ha fatto sì che anche gli sviluppatori di servizi e siti web si siano dovuti adattare.
Sempre più domini fra quelli che visitiamo sono ben ottimizzati per esser visitati da mobile, oppure dispongono di una applicazione apposita.
È per questo semplice motivo che programmatori e sviluppatori si tengono costantemente aggiornati per essere al passo coi tempi.

La necessità di aggiungere delle Apple Touch Icon per il proprio sito è dovuta proprio a questo.
Ma che cosa è una Apple Touch Icon? Si tratta dell’equivalente della ‘mela’ di quelle che vengono chiamate favicon.
Le favicon sono quelle icone che vengono associate ad un sito, e le potete vedere prima dell’effettivo URL nella barra indirizzi del vostro browser, oppure quando aggiungete una determinata pagina web ai preferiti.

Con le Apple Touch Icon potremo dare modo all’utente iOS di avere una comoda scorciatoia direttamente sullo schermo del proprio iPhone o iPad che lo faccia accedere al nostro sito nel modo più breve possibile, proprio come se avessimo sviluppato un’app.

Ma come si realizza una Apple Touch Icon?
È abbastanza semplice, basterà creare dei file immagini in formato .png di diverse dimensioni.
Di solito le dimensioni standard di una Apple Touch Icon sono di 57×57 pixel, ma queste variano a seconda del dispositivo che si sta usando, ed è quindi consigliabile avere anche delle icone da 72×72 pixel e 114×114 pixel.
Utilizzate il programma di grafica che preferite ed utilizzate il logo del vostro sito!

Ma come farà iOS a riconoscere la nostra Apple Touch Icon?
Anche in questo caso il procedimento da seguire sarà molto facile.
Dovrete inserire un tag link nei metadati del vostro sito, e dovrete farlo inserendo nella sezione head qualcosa del genere:

<link rel=”apple-touch-icon” href=”/images/apple-touch-icon.png” />

Starà a voi scegliere se creare le icone a priori, oppure utilizzare l’attributo ‘sizes‘ da frapporre fra il rel e l’href.

Che differenza c’è fra una normale Apple Touch Icon ed una precomposed?
Il ‘precomposed’ è quel particolare effetto lucido tipo vetro che Apple applica sulle proprie icone, tipico di default delle più vecchie versioni di iOS.
Se non volete che le versioni di iOS precedenti alla 7 applichino automaticamente quell’effetto ‘glossy’ alle icone, allora dovrete aggiungere il suffisso “-precomposed.png” al href del link tag.

Se non siete bravi nell’utilizzo di software di grafica come Photoshop potrete sempre utilizzare questo comodo tool trovato online che funge da generatore di Apple Touch Icons.
Lo potete trovare recandovi sul sito ManyTools.org.
In caso contrario, quindi se volete cimentarvi nell’impresa del fai-da-te pur non essendo dei grafici provetti, potete consultare la ottima guida di ComodoLab.