Обнаружил в логах посещений сайта многочисленные обращения к файлам apple-touch-icon.png и apple-touch-icon-precomposed.png. Их я до этого периодически видел в логах, но тут из было как то совсем неприлично много, поэтому легонько спараноил и решил, что меня ломают.
Файлов таких у меня не оказалось и посетителям, как следствие, отдавалась 404 ошибка. Поэтому полез смотреть, что же это за зверюга.
Оказалось что устройства iOS при попытке сохранить линк на страницу или сайт, ставят иконкой изображение, которое как раз пытаются подтянуть из этих двух файлов: apple-touch-icon.png и apple-touch-icon-precomposed.png Если же изображения не оказалось, но в иконке будет снимок страницы. И что самое не приятное – при каждом посещении сайта, операционка будет обращаться к этому файлу на всякий случай, даже если пользователь не собирается ничего сохранять. То есть обращения к этим файлам, как минимум, показывают, что к вам на сайт лазают яблочники с iPhone и iPad.
Зовутся эти шоткаты как Web Clip Icons и, что самое интересное, не смотря на присутствие слова apple в названии файла, к этим же файлам обращаются и ведроиды. Но только при попытке зафиксировать ссылку на рабочей поверхности стола – просто так Android запрашивать данные файлы не будет.
Поэтому, для уменьшения 404 апшыпок, можно сгенерить иконку, которую и отдавать iOS и Android посетителям. Основная иконка apple-touch-icon.png и в принципе её достаточно кинуть в корень сайта в формате 60х60, чтобы удовлетворить большую часть потребностей посетителей.
Если iOS стащил иконку apple-touch-icon.png, то система iOS её рендерит, скругляя края в соответствии со своими представлениями о прекрасном. Но можно отдать уже готовый вариант из файла apple-touch-icon-precomposed.png, который система iOS изначально и запрашивает, и только если его не обнаруживает, ищет apple-touch-icon.png.
Также можно наклепать иконок под все ходовые разрешения экрана, если не хотите, чтобы их рандерила удаленная система. И опять же, картинки в корне сайта это кошмар перфикциониста.
Поэтому с помощью этой онлайн тулзы генерим иконки для своего сайта, после чего называем их в соответствии с размерами, кидаем в папку icons и далее прописываем в хедере пути для корректного обращения гостевых систем к нашим картинкам.
<link rel=”apple-touch-icon” href=”/icons/apple-touch-icon.png”>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”/icons/apple-touch-icon-72×72.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”/icons/apple-touch-icon-120×120.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”/icons/apple-touch-icon-152×152.png”>
и попутно кидаем туда же готовые скругленные картинки -precomposed
После чего 404 ошибки перестают генериться для данных изображений.
2 Комментариев
-
Серж сказал:
Надоела куча 404 /apple-touch-icon-*x*-precomposed.png, добавил правило в .htaccess
RewriteRule ^apple-touch-icon-[0-9].*-precomposed\.png apple-touch-icon-precomposed.png [L]
apple-touch-icon-precomposed.png кинуть в корень
[Reply]
anchous Reply:
November 10th, 2016 at 00:28
кстати, вариант!
спасибо за дополнение
[Reply]