Come creare un'icona iPhone personalizzata con logo per il tuo sito web
L'iPhone rappresenta la maggior parte del traffico web mobile per la maggior parte dei webmaster. Vorrai quindi rendere più facile per i visitatori iPhone aggiungere il tuo sito ai preferiti con un'icona iPhone personalizzata. Se non crei un'icona personalizzata, l'iPhone creerà un piccolo screenshot della tua home page, quindi una grafica leggibile sarà migliore se vuoi che gli utenti riconoscano il tuo sito.
Facciamo un passo indietro per chi non ha iPhone e non sa perché questo è importante. L'iPhone permette ai visitatori di aggiungere una pagina ai preferiti sia aggiungendola ai segnalibri nel browser Safari, sia posizionando un'icona sulla schermata Home che fungerà da scorciatoia per il tuo sito. Quando qualcuno clicca il segno + in basso al centro del browser Safari dell'iPhone per aggiungere una pagina ai preferiti, vedrà la tua icona personalizzata invece dello screenshot in miniatura della pagina.
Ecco una guida in tre passaggi per creare e pubblicare un segnalibro specifico per iPhone che apparirà sulla schermata Home quando i visitatori aggiungono il tuo sito ai preferiti e scelgono "Aggiungi a Home" dalle opzioni presentate dall'iPhone.
Cosa ti serve
- Il tuo logo in formato quadrato
- Software grafico
- Programma FTP per caricare l'icona
- Competenze HTML di base
Istruzioni
-
Ecco come appariva l'icona del segnalibro WebSite101 quando l'ho lasciata creare al mio iPhone. Non è visivamente accattivante e non aiuta nessuno a ricordare cosa hanno segnalato. Se hai un logo esistente adattabile a un'icona quadrata 45x45 pixel, ridimensionalo semplicemente per adattarlo al piccolo formato quadrato usando il tuo programma grafico preferito. L'ho fatto io prendendo un'icona Twitter esistente creata per WebSite101 e riducendo la dimensione da 73 pixel quadrati ai 45 pixel richiesti.
-
Ecco il mio logo adattato al formato quadrato richiesto dalle icone iPhone. (Ho aggiunto un contorno per vedere i bordi sullo sfondo bianco qui.) Salva la grafica in formato PNG e chiamala "apple-touch-icon.png" e carica quella grafica nella root del tuo sito usando un programma FTP. Il logo personalizzato a sinistra è molto più probabile che aiuti i visitatori a ricordare il sito e cosa hanno segnalato.
-
Ora che hai caricato l'icona grafica che rappresenta il tuo sito, come fai a farla riconoscere all'iPhone e usare la tua nuova versione invece di quello screenshot minuscolo? Aggiungi la seguente riga di codice alla sezione <head> delle tue pagine.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />