Apple Touch icon явно надає зображення, яке використовується, коли відвідувач додає ваш сайт на головний екран iPhone. Він залишається відокремленим від значка вкладки веб-переглядача та піктограм, оголошених у маніфесті вебзастосунку.
Тільки один розмір: 180×180
180×180 пікселів зазвичай використовується як джерело високої роздільної здатності. iOS може зменшити це зображення для менших місць розміщення, дозволяючи більшості проєктів зберігати єдину декларацію.
У попередніх рекомендаціях містилося вісім файлів, від 57×57 до 152×152, кожен із власним атрибутом розміру. Ці варіанти більше не служать меті: вони роздувають ваш HTML і викликають додаткові запити для ідентичного результату.
Файл має бути PNG. iOS не читає ані SVG, ані WebP для цієї піктограми, а JPEG руйнує чіткі краї плоских ілюстрацій.
Віддавайте перевагу непрозорому фону
Прозорий фон може призвести до неочікуваних результатів залежно від версії та контексту відображення. Щоб контролювати зовнішній вигляд головного екрана, створіть зображення на непрозорому фоні, який ви вибрали.
Виправлення полягає в тому, щоб перед експортом звести піктограму на непрозорий фон. Виберіть фірмовий колір або звичайний білий, якщо ваш символ кольоровий, і залиште приблизно 10% відступу навколо ілюстрації, щоб вона дихала.
Однак не закруглюйте кути самостійно: iOS застосовує власну округлену маску зверху. Вже округлений напилок дає вам подвійний радіус із потворними кутами.
Тег для вставлення
Достатньо одного рядка в head ваших сторінок: link rel="apple-touch-icon" href="/apple-touch-icon.png". Атрибут sizes необов’язковий, якщо ви використовуєте один файл.
За бажанням додайте meta name="apple-mobile-web-app-title" content="Your brand", щоб задати підпис під іконкою. Без цього тега iOS використовує заголовок сторінки, який зазвичай задовгий і обрізається.
Також скиньте копію файлу в корені як apple-touch-icon.png: подібно до favicon.ico, iOS шукає його за цією адресою, якщо тег не знайдено.
Чому ваш значок відмовляється оновлюватися
iOS агресивно кешує піктограму, і ярлик, який уже знаходиться на головному екрані, ніколи не змінюється сам по собі. Щоб протестувати нову версію, видаліть ярлик, очистіть дані Safari, а потім знову додайте сайт.
Якщо піктограма залишається відсутньою, перевірте три речі: файл відповідає 200, а не 404, він подається з типом вмісту image/png і він не заблокований правилом robots.txt або автентифікацією.
Засіб перевірки LFFavicon перевіряє саме ці випадки на будь-який публічний URL і показує значок, який він фактично отримав.
Першоджерела
Поширені запитання
Вам потрібні кілька розмірів apple-touch-icon?
Для більшості проєктів один файл 180×180 з високою роздільною здатністю дозволяє iOS створювати зображення меншого розміру. Перевірте пристрої, включені у вашу матрицю підтримки.
Чи використовує Android apple-touch-icon?
Chrome на Android може повернутися до нього, але він спочатку читає значки вебманіфесту. Завжди декларуйте свої значки 192×192 і 512×512 у маніфесті, це офіційний шлях.
Чи можете ви використовувати SVG як Apple Touch icon?
Ні, iOS очікує растр PNG для цього тегу. Збережіть SVG для веб-переглядача на робочому столі, де він забезпечує чіткість і підтримку темного режиму.