Иконата Apple Touch изрично задава изображението, използвано когато посетител добави сайта ви към началния екран на своя iPhone. Тя е отделна от favicon в раздела и от иконите, декларирани в уеб манифеста.
Само един размер: 180×180
180×180 пиксела е обичайният размер за източник с висока резолюция. iOS може да намалява това изображение за по-малки места, така че в повечето проекти е достатъчна една декларация.
Старите препоръки изброяваха осем файла, от 57×57 до 152×152, с атрибут sizes за всеки. Тези варианти вече не са нужни: утежняват 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="Votre marque", за да контролирате надписа под иконата. Без този таг iOS използва заглавието на страницата, което често е твърде дълго, и го съкращава.
Поставете и копие на файла в основната директория под името apple-touch-icon.png: както при favicon.ico, iOS го търси на този адрес, когато не намери таг.
Защо иконата ви не се обновява
iOS кешира иконата агресивно и вече добавен пряк път на началния екран не се променя сам. За да тествате нова версия, изтрийте прекия път, изчистете данните на Safari и добавете сайта отново.
Ако иконата все още липсва, проверете три неща: файлът връща 200, а не 404, предоставя се с тип image/png и не е блокиран от правило в robots.txt или удостоверяване.
Проверката на favicon в LFFavicon тества точно тези случаи за всеки публичен URL и показва реално получената икона.
Първоизточници
Често задавани въпроси
Нужни ли са няколко размера apple-touch-icon?
В повечето проекти файл с висока резолюция 180×180 позволява на iOS да създаде по-малки варианти. Тествайте устройствата, които поддържате.
Android използва ли apple-touch-icon?
Chrome на Android може да я използва като последен резервен вариант, но първо чете иконите от уеб манифеста. Винаги декларирайте иконите 192×192 и 512×512 в манифеста — това е официалният начин.
Може ли SVG да бъде икона Apple Touch?
Не, iOS очаква растерен PNG за този таг. Запазете SVG за favicon в настолните браузъри, където осигурява яснота и поддръжка на тъмен режим.