Ställ in "apple-touch-icon.png" för att anpassa en webbplatsens iPhone bokmärke FavIcon
Innehållsförteckning:
Om du har en egen webbplats eller utvecklar en åt någon annan, bör du anpassa den sparade bokmärkesikonen som visas på användarens iOS-startskärm. I skärmdumpen ovan ser du den anpassade OSXDaily-favikonen på skärmen på en iPhone.
Det är en bra idé att ställa in Apple Touch-ikonen eftersom iOS som standard bara sparar en liten miniatyrbild av webbplatsen. De små miniatyrerna är ofta svåra att identifiera och ser i allmänhet inte så bra ut, så låt oss ställa in din egen favoritbild istället.
Hur man anpassar och ställer in en Apple Touch-ikon för en webbplats
- Skapa ikonen, se till att den är en kvadrat, den här på OSXDaily.com är 512×512 pixlar, men du kan välja andra kvadratstorlekar om du verkligen vill – notera att större är lämpligt för retina displays
- Spara hemskärmsikonen som en PNG-fil och märk den: apple-touch-icon.png
- Släpp apple-touch-icon.png i rotwebbserverkatalogen så att den kan nås på domain.com/apple-touch-icon.png …
- Titta på iOS-enhetens startskärm så ser du bokmärket sparat där med din nya anpassade ikon, som skärmdumpen ovan
Så länge filen är korrekt namngiven och finns i webbserverns rotkatalog, kommer Mobile Safari att veta vad den ska göra med den så det behövs ingen ytterligare justering för att få den iOS-specifika faviconen att dyka upp.
För referens, här är vår anpassade 'apple-touch-icon.png'-bild som vi använder för OSXDaily.com, den här exemplet på bokmärkesikonen skapas och har en lämplig storlek för näthinnaskärmar ():
Du kommer att märka att den faktiska ikonfilen inte har ljusbrytningen sparad på ikonen, iOS hanterar detta på egen hand. Du kan använda vilken bild du vill, men jag rekommenderar att du skapar en som fångar det välbekanta användargränssnittet för befintliga iOS-ikoner.
Detta är uppenbarligen inte detsamma som att ha en dedikerad iOS-app, men en anständig mobil användarupplevelse från webben är en bra idé och det undviker det som kan vara det höga priset för att utveckla en iOS-app.
Och hej, om du är orolig för sådant här använder du förmodligen Photoshop för att åtminstone designa ikonerna eller hur? Så kolla in lite medan du håller på.