Ange "apple-touch-icon.png" för att anpassa en hemsida iPhone Bookmark FavIcon
Om du har en egen webbplats eller utvecklar en för någon annan, bör du anpassa den sparade bokmärkesikonen som visas på en användares iOS-startsida. I skärmdumpen ovan ser du det anpassade OSXDaily favicon sitter på skärmen på en iPhone.
Att ställa in Apple Touch Icon är en bra idé eftersom iOS bara kommer att spara en liten miniatyr av webbplatsen. De små miniatyrerna är ofta svåra att identifiera och ser i allmänhet inte så bra ut, så låt oss sätta din egen favikonbild istället.
Så här anpassar du och ställer in en Apple Touch-ikon för en webbplats
- Skapa ikonen, se till att den är en fyrkant, 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ämplig för näthinnan
- Spara hemskärmsikonen som en PNG-fil och märka den: apple-touch-icon.png
- Släpp apple-touch-icon.png i mappen root webserver, så den kan nås på domain.com/apple-touch-icon.png
- Testa din hemsida hemskärm bokmärkeikon genom att besöka sajten från Safari i iOS och sedan knacka på "Lägg till på startskärmen"
- Titta på iOS-enhetens startsida och du kommer se bokmärket som sparas där med din nya anpassade ikon, som skärmdumpen ovan
Så länge filen är korrekt namngiven och i webbläsarens rotkatalogen, kommer Mobile Safari att veta vad man ska göra med det, så det behövs ingen ytterligare justering för att få det iOS-specifika favikonet 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, det här exemplet bokmärkeikon är skapat och anpassat på lämpligt sätt för näthinnan (läs mer om retina bokmärkesikon-skapelse här):
Du kommer 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 mobilanvändarupplevelse från webben är en bra idé och det undviker vad som kan vara det höga priset för att utveckla en iOS-app.
Och hej, om du är oroad över saker som detta, använder du förmodligen Photoshop för att åtminstone utforma ikonerna rätt? Så kolla in några tips för att påskynda Photoshop medan du är på den.
