Il mondo del web cambia rapidamente, ed il proliferare dei dispositivi mobile ne ha influenzato ulteriormente la direzione verso una integrazione sempre maggiore tra device desktop e mobile.
Chi usa uno smart phone o un i-pad per navigare, sa bene che se vuole raggiungere un determinato sito deve digitarne l'url sulla barra degli indirizzi, operazione quanto meno fastidiosa con una tastiera touch se è un sito che visitiamo spesso.
I bravi web master possono venire incontro ai navigatori mobile consentendo di creare un'icona da mostrare sul desktop del dispositivo mobile come se fosse una vera e propria app, basterà pertanto un singolo tocco per aprire il sito.
Come si realizza ciò? Con le apple-touch-icon. Cosa sono? E come si realizzano? Davvero molto semplice, andiamo a scoprire come fare.
Le apple-touch-icon vengono realizzate per iOS il sistema operativo mobile dei dispositivi Apple, crearle è semplicissimo, non sono altro che dei semplici file grafici in formato png, ovviamente tenderemo ad usare il logo e/o il marchio del nostro sito web.
Ma come far capire ad iOS qual è l'apple-touch-icon? Basterà mettere un riferimento al suddetto file tra i metadati del nostro sito, con un tag link nella sezione head, così come facciamo per la favicon del nostro sito, soltanto che in questo caso l'attributo rel del link sarà diverso, andremo a scrivere in questo modo:
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
Le dimensioni standard di una apple-touch-icon sono di 57x57px, ovviamente queste però variano a seconda del dispositivo mobile utilizzato, un iOS4 ha uno schermo più grande di un normale smart phone ed ancor di più se ci riferiamo all'iPad.
Pertanto è possibile specificare dimensioni ed apple-touch-icon diverse a seconda del dispositivo mobile utilizzato, questo attraverso l'attributo sizes, per ogni immagine e dimensione dobbiamo pertanto specificarne il path tramite link, e le altre dimensioni utilizzate sono solitamente 72x72 e 114x114px, in totale allora andremo a scrivere i seguenti riferimenti nell'head:
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png" />
E con questo il gioco è fatto, adesso il nostro sito web sarà in grado di mostrare ai dispositivi apple dotati di iOS le apple-touch-icon corrispondente, consentendo al suo utilizzatore di raggiungerci in futuro con un touch.