Indstil "apple-touch-icon.png" til at tilpasse en websteds iPhone bogmærke FavIcon

Indholdsfortegnelse:

Anonim

Hvis du har et eget websted eller udvikler et for en anden, bør du tilpasse det gemte bogmærkeikon, der vises på en brugers iOS-startskærm. På skærmbilledet ovenfor kan du se det brugerdefinerede OSXDaily favicon på skærmen på en iPhone.

Det er en god idé at indstille Apple Touch-ikonet, fordi iOS som standard kun gemmer et lille miniaturebillede af webstedet. De små thumbnails er ofte svære at identificere og ser generelt ikke så gode ud, så lad os i stedet sætte dit eget favicon-billede.

Sådan tilpasser og indstiller du et Apple Touch-ikon til et websted

  • Opret ikonet, sørg for at det er en firkant, den her på OSXDaily.com er 512×512 pixels, men du kan vælge andre firkantede størrelser, hvis du virkelig vil – bemærk, at større er passende for nethinden viser
  • Gem startskærmikonet som en PNG-fil, og mærk det: apple-touch-icon.png
  • Drop apple-touch-icon.png i rodwebserverbiblioteket, så det kan tilgås på domain.com/apple-touch-icon.png
  • Test bogmærkeikonet for dit websteds startskærm ved at besøge webstedet fra Safari i iOS og derefter trykke på "Føj til startskærm"
  • Se på iOS-enhedens startskærm, og du vil se bogmærket gemt der med dit nye brugerdefinerede ikon, som skærmbilledet ovenfor

Så længe filen er korrekt navngivet og i webserverens rodmappe, ved Mobile Safari, hvad den skal gøre med den, så der er ingen yderligere justering nødvendig for at få det iOS-specifikke favicon til at dukke op.

Til reference, her er vores brugerdefinerede 'apple-touch-icon.png'-billede, som vi bruger til OSXDaily.com, dette eksempel på bogmærkeikon er oprettet og tilpasset til nethindeskærme ():

Du vil bemærke, at den faktiske ikonfil ikke har lysbrydningen gemt på ikonet, iOS håndterer dette på egen hånd. Du kan bruge et hvilket som helst billede, du vil, men jeg vil anbefale at oprette et, der fanger den velkendte brugergrænseflade af eksisterende iOS-ikoner.

Dette er naturligvis ikke det samme som at have en dedikeret iOS-app, men en anstændig mobil brugeroplevelse fra nettet er en god idé, og det undgår, hvad der kan være den høje pris ved at udvikle en iOS-app.

Og hey, hvis du er bekymret over ting som dette, bruger du sandsynligvis Photoshop til i det mindste at designe ikonerne rigtigt? Så tjek nogle, mens du er i gang.

Indstil "apple-touch-icon.png" til at tilpasse en websteds iPhone bogmærke FavIcon