Apple Touch Icon HTML

Hai appena creato le tue prime pagine web e vorresti aggiungere le Apple Touch Icon HTML al tuo nuovo sito? Per sapere di cosa stiamo parlando abbiamo spiegato cosa sono e come funzionano le Apple Touch Icon.

Inserire le Apple Touch Icon Html

All’inizio del web venne inventata la favorites icon o favicon, una semplice immagine chiamata appunto favicon.ico che veniva piazzato nella cartella principale del sito web e permetteva di far riconoscere il proprio sito tramite questa piccola icona che era spesso, molto semplicemente, il logo del sito.

Questo logo era usato dai browser all’interno dei favoriti o segnalibri, favorites e bookmarks rispettivamente in inglese, in modo da rendere subito riconoscibile il proprio sito in mezzo ai moltissimi link salvati!

Apple ovviamente sempre attenta alla semplicità d’uso ha pensato che qualcuno potesse voler salvare sulla HOME del proprio iPhone o iPad un link ad un sito o ad una WebApp in modo da poter usarla proprio come se fosse una App nativa.

Questo risultato si ottiene in maniera semplice aggiungendo nel head della pagina i tag link con il giusto rel e fornendo il corretto attributo href che punta ad un file png con l’icona che vogliamo usare.

Per una versione di base e senza tener conto dei diversi dispositivi Apple si può usare questo snippet di codice:

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

sostituendo nell’attributo href il percorso verso la propria icona.

Se invece volete fornire un’icona per ogni dispositivo anche in considerazione del display Retina potete usare lo snippet qui sotto:

<link rel="apple-touch-icon" href="/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">

in questo caso abbiamo aggiunto l’attributo sizes che fornisce indicazioni circa le dimensioni dell’icona e permette al dispositivo di scegliere l’icona con la dimensione più opportuna.

Inoltre senza aggiungere alcun codice html potete creare delle immagini in formato png e chiamarle “apple-touch-icon-76×76.png” e “apple-touch-icon.png” etc. Il dispositivo cercherà da solo l’icona più adatta per dimensioni e tipo di display.

Inoltre se volete evitare che il dispositivo aggiunga degli effetti all’immagine dovete aggiungere al nome file precomposed per cui avremo ad esempio:

<link rel="apple-touch-icon" href="/iphone.png">
<link rel="apple-touch-icon" href="/iphone-precomposed.png">
<link rel="apple-touch-icon" sizes="76x76" href="/ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="/iphone-retina-precomposed.png">
<link rel="apple-touch-icon" sizes="120x120" href="/iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="/ipad-retina.png">

Se volete approfondire l’argomento potete leggere la Guida alla Configurazione delle Applicazioni Web in inglese.