Se hai un tuo sito web o ne stai sviluppando uno per qualcun altro, dovresti personalizzare l'icona del segnalibro salvato che appare sulla schermata iniziale di un utente iOS. Nello screenshot qui sopra vedrai la favicon OSXDaily personalizzata sullo schermo di un iPhone.

L'impostazione dell'icona Apple Touch è una buona idea perché per impostazione predefinita iOS salverà solo una piccola miniatura del sito. Le miniature piccole sono spesso difficili da identificare e generalmente non hanno un bell'aspetto, quindi impostiamo invece la tua immagine favicon.

Come personalizzare e impostare un'icona Apple Touch per un sito web

• Crea l'icona, assicurati che sia un quadrato, quello qui su OSXDaily.com è 512×512 pixel, ma puoi scegliere altre dimensioni quadrate se lo desideri – nota più grande è appropriato per display retina
• Salva l'icona della schermata iniziale come file PNG ed etichettala: apple-touch-icon.png
• Trascina apple-touch-icon.png nella directory principale del server web, in modo che sia possibile accedervi all'indirizzo domain.com/apple-touch-icon.png
• Verifica l'icona del segnalibro della schermata iniziale del tuo sito Web visitando il sito da Safari in iOS, quindi toccando "Aggiungi alla schermata iniziale"
• Guarda la schermata iniziale del dispositivo iOS e vedrai il segnalibro salvato lì con la tua nuova icona personalizzata, come lo screenshot qui sopra

Fintanto che il file è denominato correttamente e si trova nella directory principale del server Web, Mobile Safari saprà cosa farne, quindi non sono necessarie ulteriori modifiche per visualizzare la favicon specifica di iOS.

Per riferimento, ecco la nostra immagine personalizzata 'apple-touch-icon.png' che utilizziamo per OSXDaily.com, questa icona segnalibro di esempio è creata e dimensionata in modo appropriato per i display retina ():

Noterai che il file icona effettivo non ha la rifrazione della luce salvata sull'icona, iOS lo gestisce da solo. Puoi utilizzare qualsiasi immagine desideri, ma ti consiglio di crearne una che catturi l'interfaccia utente familiare delle icone iOS esistenti.

Questo ovviamente non è lo stesso che avere un'app iOS dedicata, ma un'esperienza utente mobile decente dal Web è una buona idea ed evita quello che può essere il prezzo elevato dello sviluppo di un'app iOS.

E hey, se sei preoccupato per cose come questa, probabilmente usi Photoshop almeno per disegnare le icone, giusto? Quindi dai un'occhiata mentre ci sei.