Webbutvecklare och webbplatsägare uppmärksamma: du måste ställa in en näthinna-klar iOS-bokmärkesikon. Bokmärkesikonerna kallas för en Apple Touch Icon, och dessa anpassade bilder blir ikonen som visas på användarens hemskärm när de bokmärker en webbplats på en iPad, iPhone eller iPod touch i iOS, eller bokmärkespanelen i Safari för OS X.Utan en anpassad apple-touch-ikon-filuppsättning kommer användare att få en tråkig och ofta ful miniatyrbild av själva webbsidan, och utan att använda en näthinna-klar ikon kommer bokmärkesikonen att se pixlad och allmänt hemsk ut på den nya iPad-skärmen.

Här är vad du behöver göra för att skapa en näthinna perfekt Apple Touch Icon för vilken webbplats som helst med några enkla steg.

1) Skapa ikonen för Retina-Ready iOS-webbplats

Använd en mall eller designa din egen. Jag använde det enkla DIY retina icon kit som nämndes i ett tidigare inlägg, det är en PSD-fil som gör det enkelt att designa snygga iOS-ikoner som ett klick eller två. Klistra in en webbplats eller företagslogotyp och du är ganska bra att gå. Om du inte har något att redigera PSD-filer är Photoshop CS6 beta utmärkt och gratis att ladda ner och använda tills den slutliga versionen kommer ut senare under året.

2) Spara som PNG och namnge Retina-webbplatsens bokmärkesikon

Ikonen måste vara en PNG och den måste heta en av två saker. Varje filnamn har ett lite annorlunda utseende på ikonen som visas på användarens hemskärm:

• “apple-touch-icon.png” kommer att lägga till höjdpunktsbubblan på ikonen
• “apple-touch-icon-precomposed.png” visar ikonen som den ursprungligen skapades, utan markeringen

Använd det sistnämnda -förkomponerade alternativet om du skapade din egen höjdpunkt, eller om du vill att ikonen ska se plattare ut utan en allestädes närvarande bubbla som visas på de flesta av Apples standardikoner.

3) Ladda upp webbplatsens bokmärkespekikon till baswebbkatalogen

Använd en SFTP-klient (OS X inkluderar FTP i Finder, och CyberDuck eller Filezilla är gratis) för att kopiera filen apple-touch-icon.png till rotwebbkatalogen. Detta är vanligtvis samma plats som webbplatsens huvudindexfil finns. När du har laddat upp, bekräfta att den är på rätt plats genom att öppna en webbläsare och gå till "http://SITEURL.com/apple-touch-icon.png" och se till att den laddas.

Här är ett exempel på en 512×512 näthinna-klar bokmärkesikon från OSXDaily.com:

Lägg märke till att utan den -förkomponerade flaggan visar ikonen ovan markeringsbubblan. Du kan se skillnaden mellan de två genom att jämföra den faktiska ikonen med den som visas i skärmdumpar som bokmärke.

4) Använd en iOS-enhet och bokmärk webbplatsen

Detta är den enklaste delen, ta en iOS-enhet (helst en iPad 3 för att bekräfta näthinnan) och öppna Safari.Uppdatera webbplatsen du laddade upp ikonen till och tryck sedan på pilikonen och välj "Lägg till på startskärmen" ge bokmärket ett namn och återgå sedan till startskärmen för att bekräfta att det finns där.

… Om du verkligen vill kan du använda CSS och HTML för att visa ikoner i olika storlekar på olika enheter, men det är verkligen inte nödvändigt.

Nu om någon bokmärker din webbplats på en iPad med en retina-skärm, kommer den att se mycket bättre ut på deras hemskärm. Det är verkligen allt som finns. Och ja, vi har skrivit om Apple Touch-ikonen förut, men den förtjänar ytterligare ett omnämnande nu när iPad 3 kräver betydligt högre upplösning av ikoner och grafik.