Angi "apple-touch-icon.png" for å tilpasse et nettsteds iPhone-bokmerke FavIcon

Innholdsfortegnelse:

Anonim

Hvis du har et eget nettsted eller utvikler et for noen andre, bør du tilpasse det lagrede bokmerkeikonet som vises på brukerens iOS-startskjerm. I skjermbildet ovenfor ser du det tilpassede OSXDaily-favikonet på skjermen til en iPhone.

Det er en god idé å angi Apple Touch-ikonet fordi iOS som standard bare lagrer et lite miniatyrbilde av nettstedet. De små miniatyrbildene er ofte vanskelige å identifisere og ser generelt sett ikke så flotte ut, så la oss velge ditt eget favorittbilde i stedet.

Hvordan tilpasse og angi et Apple Touch-ikon for et nettsted

  • Lag ikonet, sørg for at det er en firkant, den her på OSXDaily.com er 512×512 piksler, men du kan velge andre firkantstørrelser hvis du virkelig vil – merk at større er passende for netthinneskjermer
  • Lagre startskjermikonet som en PNG-fil og merk det: apple-touch-icon.png
  • Slipp apple-touch-icon.png i rotnettserverkatalogen, slik at den kan nås på domain.com/apple-touch-icon.png
  • Se på iOS-enhetens startskjerm, og du vil se bokmerket lagret der med det nye tilpassede ikonet ditt, som skjermbildet ovenfor

Så lenge filen er riktig navngitt og i webserverens rotkatalog, vil Mobile Safari vite hva den skal gjøre med den, så det er ingen ytterligere justering nødvendig for å få det iOS-spesifikke favorittikonet til å vises.

For referanse, her er vårt tilpassede 'apple-touch-icon.png'-bilde som vi bruker for OSXDaily.com, dette eksempelbokmerkeikonet er opprettet og tilpasset størrelsen for netthinneskjermer ():

Du vil legge merke til at selve ikonfilen ikke har lysbrytningen lagret på ikonet, iOS håndterer dette på egen hånd. Du kan bruke hvilket som helst bilde du vil, men jeg vil anbefale å lage et som fanger det velkjente 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 idé, og det unngår det 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 i det minste å designe ikonene ikke sant? Så sjekk ut noen mens du holder på.

Angi "apple-touch-icon.png" for å tilpasse et nettsteds iPhone-bokmerke FavIcon