Impostare "apple-touch-icon.png" per personalizzare un sito Web Segnalibro iPhone FavIcon
Se si dispone di un sito Web personale o se ne sta sviluppando uno per qualcun altro, è necessario personalizzare l'icona del segnalibro salvato che viene visualizzata sulla schermata iniziale di iOS. Nello screenshot in alto vedrai la favicon personalizzata di OSXDaily che si trova sullo schermo di un iPhone.
Impostare l'icona Apple Touch è una buona idea perché per impostazione predefinita iOS salverà solo una piccola anteprima del sito. Le piccole miniature sono spesso difficili da identificare e generalmente non sembrano così grandi, quindi impostiamo la tua immagine preferita.
Come personalizzare e impostare un'icona Apple Touch per un sito Web
- Crea l'icona, assicurati che sia un quadrato, quella qui su OSXDaily.com è 512 × 512 pixel, ma puoi scegliere altre dimensioni quadrate se lo vuoi davvero: nota più grande è appropriato per i display retina
- Salva l'icona di homescreen come file PNG ed etichettala: apple-touch-icon.png
- Rilasciare apple-touch-icon.png nella directory del server Web principale, quindi è possibile accedervi all'indirizzo domain.com/apple-touch-icon.png
- Metti alla prova la tua icona del segnalibro homescreen dei siti Web visitando il sito da Safari in iOS, quindi toccando "Aggiungi alla schermata principale"
- Guarda il homescreen del dispositivo iOS e vedrai il segnalibro salvato lì con la tua nuova icona personalizzata, come lo screenshot qui sopra
Finché il file viene chiamato correttamente e nella directory root dei server web, Mobile Safari saprà cosa fare in modo che non ci siano ulteriori modifiche necessarie per visualizzare la favicon specifica di iOS.
Per riferimento, ecco la nostra immagine personalizzata 'apple-touch-icon.png' che usiamo per OSXDaily.com, questa icona di segnalibro di esempio è creata e dimensionata in modo appropriato per i display retina (per ulteriori informazioni sulla creazione dell'icona del segnalibro retina qui):
Noterai che il file dell'icona reale non ha la rifrazione della luce salvata sull'icona, iOS lo gestisce da solo. Puoi utilizzare qualsiasi immagine desiderata, ma ti consigliamo di crearne una che catturi l'interfaccia utente familiare delle icone iOS esistenti.
Questo ovviamente non è lo stesso di avere un'app per iOS dedicata, ma una buona esperienza di utente mobile 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 del genere, probabilmente utilizzi Photoshop per progettare almeno le icone giusto? Quindi dai un'occhiata ad alcuni suggerimenti per velocizzare Photoshop mentre ci sei.
