Кількість пристроїв працює на операційній системі iOS з кожним роком зростає. Це стаття для web-майстрів, які оптимізують свої сайти для переглядів з iPhone і iPad. Для того, щоб при додаванні в закладки браузера Safari або при додаванні на робочий стіл iPhone показувалася потрібна іконка сайту, необхідно спеціально створити зображень. Іконка favicon в даному випадку не працює.

Для сайтів, де немає такої іконки, в закладках Safari показується сіра заглушка, а на робочому столі створюється іконка на основі скриншота першої сторінки. Це не дуже красиво. Але досить витратити всього кілька хвилин, щоб зробити свою іконку сайту для iPhone ...

Як створити іконку сайту для iPhone

1. Потрібно створити зображення у форматі PNG розміром 152x152px в будь-якому графічному редакторі. Якщо ви працюєте в Photoshop, то це формат PNG 24. Можна навіть задати прозорість.
2. Зберегти файл під назвою "apple-touch-icon.png".
3. Завантажити файл, по FTP на сервер, в кореневу папку сайту. наприклад /assets/pictures/9842/content_apple-touch-icon.png .

Тепер при додаванні закладки на ваш сайт, в Safari з'явиться створена вами іконка. А якщо ви оберете "Додати в Додому", то і на робочому столі.

Відразу відповім на можливі запитання

Чи потрібно щось прописувати в самому HTML документі?

Ні, нічого спеціально прописувати в mete не потрібно. Браузери мобільних пристроїв самі шукають цей файл на вашому сайті. Більш того, якщо такого файлу там немає, то сервер видає у відповідь 404 помилку. Подивіться в логи на сервері, там багато таких запитів. Крім того - ці файли "шукаються" не тільки в момент додавання сайту на домашній екран, а при кожному відвідуванні!

І, ви напевно здивуєтеся, але Android пристрою теж використовують значки apple-touch-icon.png при додаванні закладки сайту на робочий стіл :).

А як же Retina, потрібно робити кілька зображень під різний дозвіл?

Раніше потрібно було робити кілька картинок, зараз досить однієї великої (152x152px). В принципі, в Apple регулярно змінюють дозволу екранів і стандарти для розробників. Цілком ймовірно, що коли ви будете читати цю статтю, щось вже зміниться. Але, найактуальніший розмір завжди можна дізнатися за посиланням /assets/pictures/9844/content_apple-touch-icon.png . Це найправильніший формат іконки :).