Hur man gör och ställer in en näthinnoklar ikon för ikon för en webbplats

Webbutvecklare och webbägare är uppmärksamma: du måste ställa in en näthinnan klar iOS-bokmärkesikon. Bokmärkesikonen kallas en Apple Touch Icon, och dessa anpassade bilder blir ikonen som visas på användarens startsida 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 fil uppsättning kommer användarna att få en tråkig och ofta ful thumbnail av webbsidan själv och utan att använda en näthinnan klar ikon kommer att se pixelated och generellt hemskt på den nya iPad skärm.

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

1) Skapa Retina-Ready IOS Website Icon

Använd en mall eller skapa din egen. Jag använde det enkla DIY retina ikonet kit som nämns i ett tidigare inlägg, det är en PSD-fil som gör att utforma snygga iOS-ikoner lika enkelt som ett klick eller två. Klistra in på 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 på året.

2) Spara som PNG & Namn Retina Website Bookmark Icon

Ikonen måste vara en PNG, och den måste namnges som en av två saker. Varje filnamn ger ett lite annorlunda utseende av ikonen som visas på användarens startsida:

  • " Apple-touch-icon.png " lägger till bubbelöverlägget till höjdpunkten på ikonen
  • " Apple-touch-icon-precomposed.png " kommer att visa ikonen som ursprungligen skapades, utan högpunktsöverläggningen

Använd det senare komprimerade alternativet om du skapade din egen höjdpunkt eller om du vill att ikonen ska visas mer platt utan allestädes närvarande bubbla som visas på de flesta Apples standardikoner.

3) Ladda upp webbplatsbokmärket, tryck ikonen till baswebbkatalogen

Använd en SFTP-klient (OS X innehåller FTP i Finder och CyberDuck eller Filezilla är gratis) för att kopiera filen Apple-touch-icon.png till rotwebbkatalogen. Det här är vanligtvis samma plats som huvudindexindexen är lokaliserad. När du är uppladdad, 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äthinnan-färdig bokmärkesikon från OSXDaily.com:

Observera att den ikon som visas ovan kommer att visa höjdbubblan utan den -förhandlade flaggan. Du kan se skillnaden mellan de två genom att jämföra den aktuella ikonen med den som visas i skärmdumpar som bokmärke.

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

Det här är den enklaste delen, ta en iOS-enhet (helst en iPad 3 för att bekräfta retina aspekten) och öppna Safari. Uppdatera webbplatsen du ladde upp ikonen till, och tryck sedan på pilikonen och välj "Lägg till hemskärm", namnge bokmärket och återvänd sedan till Hemskärmen för att bekräfta att det finns där.

Trots att det är 512 x 512 pixlar, kommer näthinnans ikon att skala ner fint på äldre iPhones och icke-näthinnanordningar. Om du verkligen vill kan du använda CSS och HTML för att visa olika ikoner för olika enheter, men det är verkligen inte nödvändigt.

Nu om någon bokmärker din webbplats på en iPad med en näthinneskärm, kommer den att se mycket bättre ut på deras hemskärm. Det är verkligen allt som finns där. Och ja, vi har skrivit om Apple touch-ikonen förut, men det förtjänar ett annat omnämnande nu när iPad 3 kräver signifikant högre upplösningsikoner och grafik.