Существует множество документов по этому поводу в Google.
Просто используйте:
<!-- **normal** (iPhone/iPod **non retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<!-- **normal** (iPhone/iPod **retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon-72.png" sizes="72x72"/>
<!-- and **iPad** version -->
<link rel="apple-touch-icon" href="apple-touch-icon-114.png" sizes="114x114"/>
В качестве дополнительной информации , вы можете иметь значокбез эффекта глянца, если вы используете apple-touch-icon-precomposed
вместо apple-touch-icon
.
и есть несколько тегов, которые можно использовать, чтобы иметь все функции Safari Mobile, такие как заставка и т. д.
Кроме того, прочитайте эту статью «Мобильные статьи» , и вы узнаете почти все, что вам нужно, чтобы иметь блестящее веб-приложение