Zet "apple-touch-icon.png" om een website aan te passen iPhone Bookmark FavIcon
Als u een eigen website heeft of een website voor iemand anders ontwikkelt, moet u het opgeslagen bladwijzerpictogram aanpassen dat op het startscherm van een iOS-gebruiker wordt weergegeven. In de bovenstaande schermafbeelding ziet u de aangepaste OSXDaily-favicon op het scherm van een iPhone.
Het instellen van het Apple Touch-pictogram is een goed idee, omdat iOS standaard een kleine miniatuur van de site opslaat. De kleine miniaturen zijn vaak moeilijk te identificeren en zien er in het algemeen niet zo goed uit, dus laten we in plaats daarvan je eigen favicon-afbeelding instellen.
Hoe een Apple Touch-pictogram voor een website aan te passen en in te stellen
- Maak het pictogram, zorg ervoor dat het een vierkant is, dat hier op OSXDaily.com 512 × 512 pixels is, maar je zou andere vierkante formaten kunnen kiezen als je het echt wilt - let op groter geschikt voor retina-beeldschermen
- Sla het startschermpictogram op als een PNG-bestand en label het: apple-touch-icon.png
- Zet apple-touch-icon.png neer in de hoofdmap van de webserver, zodat deze kan worden geopend op domain.com/apple-touch-icon.png
- Test het startpagina-bladwijzerpictogram van uw websites door de site vanuit Safari in iOS te bezoeken en tik vervolgens op "Toevoegen aan startscherm"
- Kijk naar het startscherm van het iOS-apparaat en je ziet de bladwijzer daar worden opgeslagen met je nieuwe aangepaste pictogram, zoals de bovenstaande schermafbeelding
Zolang het bestand correct wordt genoemd en in de hoofdmap van de webservers, weet Mobile Safari wat ermee te 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 voorbeeldbladwijzerpictogram is gemaakt en geschikt gemaakt voor retina-beeldschermen (hier vindt u meer informatie over het maken van retinabladwijzerpictogrammen):
U zult merken dat het eigenlijke pictogrambestand de lichtbreking niet op het pictogram heeft opgeslagen, iOS verwerkt dit zelf. U kunt elke gewenste afbeelding gebruiken, maar ik raad u aan een afbeelding te maken die de vertrouwde gebruikersinterface van bestaande iOS-pictogrammen vastlegt.
Dit is natuurlijk 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 de hoge prijs van het ontwikkelen van een iOS-app.
En hey, als je je zorgen maakt over dit soort dingen, gebruik je waarschijnlijk Photoshop om de iconen toch op de juiste manier te ontwerpen? Bekijk enkele tips om Photoshop te versnellen terwijl je bezig bent.
