Indstil "apple-touch-icon.png" for at tilpasse en hjemmeside iPhone Bookmark FavIcon

Hvis du har en egen hjemmeside eller udvikler en til en anden, skal du tilpasse det gemte bogmærkeikon, der vises på en brugers iOS-startskærm. I skærmbilledet ovenfor ser du den brugerdefinerede OSXDaily favicon, der sidder på skærmen på en iPhone.

Indstilling af Apple Touch-ikonet er en god ide, fordi iOS vil som standard bare gemme en lille miniaturebillede af webstedet. De små miniaturebilleder er ofte svære at identificere og ser generelt ikke så godt ud, så lad os sætte dit eget faviconbillede i stedet.

Sådan tilpasses og indstilles 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 pixel, men du kunne vælge andre firkantede størrelser, hvis du virkelig vil - Bemærk, at større er passende til nethinden
• Gem hjemmeskærmikonet som en PNG-fil og mærket det: apple-touch-icon.png
• Sæt apple-touch-icon.png i rodwebserverkataloget, så det er tilgængeligt på domain.com/apple-touch-icon.png
• Test dit websitere startskærmbogmærkeikon ved at besøge webstedet fra Safari i iOS og derefter trykke på "Tilføj til startskærm"
• Se på iOS-enhedens hjemmeskærm, og du vil se det bogmærke, der er gemt der, med dit nye brugerdefinerede ikon, ligesom skærmbilledet ovenfor

Så længe filen er korrekt navngivet og i webservers rodmappe, vil Mobile Safari vide, hvad man skal gøre med det, så der er ikke behov for yderligere justering 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 bogmærkeikon er oprettet og dimensioneret passende til nethinden (læs mere om nethinden bogmærke ikon oprettelse her):

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

Dette er selvfølgelig ikke det samme som at have en dedikeret iOS-app, men en anstændig mobilbrugeroplevelse fra internettet er en god ide, og det undgår, hvad der kan være den høje pris for at udvikle en iOS-app.

Og hej, hvis du er bekymret for ting som dette, bruger du sikkert Photoshop til at designe ikonerne i det mindste? Så tjek nogle tips til at fremskynde Photoshop, mens du er ved det.