Als u zelf een website heeft of er een voor iemand anders aan het ontwikkelen bent, moet u het opgeslagen bladwijzerpictogram aanpassen dat op het iOS-startscherm van een gebruiker verschijnt. In de bovenstaande schermafbeelding ziet u het aangepaste OSXDaily-favicon op het scherm van een iPhone.

Het instellen van het Apple Touch-pictogram is een goed idee, omdat iOS standaard slechts een kleine miniatuur van de site opslaat. De kleine miniaturen zijn vaak moeilijk te herkennen en zien er over het algemeen niet zo goed uit, dus laten we in plaats daarvan uw eigen favicon-afbeelding instellen.

Een Apple Touch-pictogram voor een website aanpassen en instellen

• Maak het pictogram, zorg ervoor dat het een vierkant is, het pictogram hier op OSXDaily.com is 512×512 pixels, maar je kunt andere vierkante formaten kiezen als je dat echt wilt – let op: groter is geschikt voor netvliesweergave
• Sla het pictogram van het startscherm op als een PNG-bestand en label het: apple-touch-icon.png
• Plaats apple-touch-icon.png in de hoofdmap van de webserver, zodat het toegankelijk is via domain.com/apple-touch-icon.png
• Test het bladwijzerpictogram op het startscherm van uw website door de site te bezoeken vanuit Safari in iOS en vervolgens op "Toevoegen aan startscherm" te tikken
• Kijk naar het startscherm van het iOS-apparaat en je ziet de bladwijzer die daar is opgeslagen met je nieuwe aangepaste pictogram, zoals de schermafbeelding hierboven

Zolang het bestand de juiste naam heeft en zich in de hoofdmap van de webserver bevindt, weet Mobile Safari wat het ermee moet doen, zodat er geen verdere aanpassingen nodig zijn om het iOS-specifieke favicon te laten verschijnen.

Ter referentie: hier is onze aangepaste 'apple-touch-icon.png'-afbeelding die we gebruiken voor OSXDaily.com. Dit voorbeeld van een bladwijzerpictogram is gemaakt en heeft de juiste afmetingen voor retina-displays ():

Je zult merken dat het eigenlijke pictogrambestand niet de lichtbreking op het pictogram heeft opgeslagen, iOS doet dit zelf. Je kunt elke gewenste afbeelding gebruiken, maar ik raad je aan er een te maken die de vertrouwde gebruikersinterface van bestaande iOS-pictogrammen weergeeft.

Dit is duidelijk niet hetzelfde als het hebben van een speciale iOS-app, maar een fatsoenlijke mobiele gebruikerservaring van het web is een goed idee en het vermijdt wat de hoge prijs kan zijn van het ontwikkelen van een iOS-app.

En hey, als je je zorgen maakt over dit soort dingen, gebruik je waarschijnlijk Photoshop om op zijn minst de pictogrammen te ontwerpen, toch? Dus bekijk er een paar als je toch bezig bent.