Hvis du nogensinde har prøvet at tilføje en webside i Safari til din Home-skærm, på din iOS enhed, ved du at man bare ender op med et miniature screenshot af selve websiden, dog med afrundede hjørner som alle andre iOS ikoner. Men hvis du ligesom jeg godt kan lide at designe alle aspekter af en webside, og gøre den tilgængelig på alle enheder, kan man tilføje sine egne ikoner, som jeg har gjort på min nyligt designede portfolie madskonradsen.dk (ikke tilgængelig endnu, men apple-touch ikonerne virker). 
Og den gode nyhed er at det kan klares helt uden at skrive en eneste linje kode, man skal bare have en serie billed filer in sin “root” mappe på serveren(hvis du har et subdomæne eller lign. er du nødt til at bruge et par linjer kode, men mere om det om et sekund) eftersom at Safari selv scanner efter 5 forskellige ikoner(alt afhængig af din iOS enheds opløsning).
Filerne Safari søger efter er:
apple-touch-icon.png
apple-touch-icon-precomposed.png
apple-touch-icon-57×57-precomposed.png
apple-touch-icon-72×72-precomposed.png
apple-touch-icon-114×114-precomposed.png
Safari tager sig selv af de afrundede hjørner, så dem skal du ikke tænke på, bare du sørger for at indholdet af dit billed ikke går helt ud til kanterne, så det ikke bliver skåret væk!
Jeg har lavet en zip-fil med ikon filerne fra mit projekt, med de rigtige dimensioner, så du nemt kan rette dem og kaste dem i din “root” mappe. Og de kan downloades lige >her<
Hvis du ikke benytter dig af din “root” mappe er du nødt til at includere følgende linjer kode i headeren i din HTML, så Safari ved hvor den skal lede: