Sett "apple-touch-icon.png" for å tilpasse et nettsted iPhone Bookmark FavIcon

Hvis du har en egen nettside eller utvikler en til noen andre, bør du tilpasse det lagrede bokmerkeikonet som vises på en brukers iOS-startskjerm. I skjermbildet ovenfor ser du den egendefinerte OSXDaily favicon sitter på skjermen på en iPhone.

Innstilling av Apple Touch-ikonet er en god ide, for iOS vil som standard bare lagre en liten miniatyrbilde av nettstedet. De små miniatyrbildene er ofte vanskelig å identifisere og ser vanligvis ikke så bra ut, så la oss sette ditt eget favikonbilde i stedet.

Slik tilpasser du og angir et Apple Touch-ikon for et nettsted

  • Opprett ikonet, pass på at det er en firkant, den her på OSXDaily.com er 512 × 512 piksler, men du kan velge andre firkantede størrelser hvis du virkelig vil - merk større er passende for netthinnen
  • Lagre startskjermikonet som en PNG-fil og merk det: apple-touch-icon.png
  • Slip apple-touch-icon.png inn i webserverens webserver, slik at den kan nås på domain.com/apple-touch-icon.png
  • Test hjemmesiden din hjemmeskjerm bokmerkeikon ved å besøke nettstedet fra Safari i IOS, og deretter trykke på "Legg til i startskjermbildet"
  • Se på iOS-enhetens hjemmeskjerm, og du vil se bokmerket lagret der med det nye egendefinerte ikonet, som skjermbildet over

Så lenge filen er riktig oppkalt og i webserverens rotkatalogen, vil Mobile Safari vite hva de skal gjøre med det, slik at det ikke er nødvendig med ytterligere justering for å få iOS-spesifikke favicon til å dukke opp.

Som referanse er dette vårt egendefinerte "apple-touch-icon.png" -bilde som vi bruker til OSXDaily.com, dette eksempelbokmerkikonet er opprettet og formet riktig for retina-skjermer (les mer om retina-bokmerkeikonoppretting her):

Du vil legge merke til at den faktiske ikonfilen ikke har lysbrekningen lagret på ikonet, iOS håndterer dette på egen hånd. Du kan bruke et hvilket som helst bilde du vil ha, men jeg anbefaler å lage en som fanger det kjente brukergrensesnittet til eksisterende iOS-ikoner.

Dette er åpenbart ikke det samme som å ha en dedikert iOS-app, men en anstendig mobilbrukeropplevelse fra nettet er en god ide, og det unngår hva som kan være den høye prisen for å utvikle en iOS-app.

Og hei, hvis du er bekymret for ting som dette, bruker du sannsynligvis Photoshop til å utforme ikonene i det minste? Så sjekk ut noen tips for å få fart på Photoshop mens du er på den.