![Информационный блог [Bloginfo]](https://bloginfo.biz/wp-content/uploads/bloginfo.png)
Многие блогеры и веб-мастера, которые просматривают логи сервера (или журналы, создаваемые некоторыми плагинами) могли заметить, что часто ошибку с кодом 404 вызывают некоторые весьма интересные файлы с названиями вроде: apple-touch-icon.png и apple-touch-icon-precomposed.png
Что это за файлы такие и как устранить ошибки 404 из-за их отсутствия? Об этом мы и поговорим в данной статье.
Если в отчетах (логах) своего сервера или в журналах плагинов (например, iThemes Security ведет такой журнал) вы обнаруживаете ошибки 404, которые связаны с тем, что не найдены файлы "apple-touch-icon.png" и "apple-touch-icon-precomposed.png" (с префиксом "apple-touch-icon..."), то это означает, что ваш блог посещают с iPhone, iPad или iPod Touch. Эти устройства ищут на сайте данные файлы для того, чтобы посетитель смог сохранить "закладку" сайта на рабочем столе (называется он Home Screen) своего iГаджета. Официально они называются Web Clip Icons.
То есть, эти файлы – это и есть те иконки, которые будут отображаться на Home Screen iДевайса. Что самое любопытное - эти файлы "ищутся" не только в момент добавления сайта на домашний экран, а при каждом посещении. И, если файлов apple-touch-icon.png или apple-touch-icon-precomposed.png не существует, то сервер фиксирует ошибку 404 (не найден файл, к которому было обращение), а это уже отдельная операция, которая требует определенного действия (запись на жесткий диск). И, как следствие – это дополнительная нагрузка на сервер.
Кроме того, если этих файлов нет, то на "рабочем столе" iPhone или iPad будет отображаться не красивенькая иконка, а миниатюра (скриншот) страницы. В общем, выглядит это примерно так:
И если о том, как отображается сайт на хоум скрине iOS-устройств, можно было бы особо себя не озадачивать (хотя, мы же создаем favicon, например, да и посетителей своих уважаем), то о нагрузках на сервер нужно помнить всегда. И по возможности их снижать и избегать.
Вот, для примера, скриншот журнала плагина iThemes Security на одном моем сайте:
Как видно из скриншота, на 19 августа в журнале зафиксировано 190 ошибок 404, связанных с apple-touch-icon. И это не очень уж посещаемый блог. Да и сам журнал я регулярно "чищу".
А вот еще один скриншот, из Google Analytics (эту статистику на указанный сайт я установил недавно, поэтому картина происходящего не совсем целостная):
Я специально оставил на нем данные не только об iOS-девайсах, но и обо всех мобильных устройствах, чтобы наглядно показать, что доля мобильного трафика высока (и она постоянно растет). И уже сейчас составляет примерно 7%, от общего числа посетителей (в моем случае). Это значит, что из ста человек, приблизительно семеро посещают сайт с мобильных платформ. А на долю apple-гаджетов приходится целая треть из них.
Почему я завел речь обо всех мобильных устройствах, а не только об Apple`овских? Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png. Да-да! Несмотря на наличие в названии оных слова "apple". Поэтому негодования многих блогеров, по типу "И чО? Мы теперь должны под "огрызок" подстраиваться? Специальные файлы для них создавать?", выглядят смешно.
Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на "рабочий стол". А следовательно, при простом посещении с Android, при отсутствии данных файлов, ошибки 404 не будут появляться (в отличие от посещений с iOS).
И, как итог всего вышесказанного, можно сделать вывод, что нужно по максимуму адаптировать свои сайты к мобильным устройствам. В особенности, если такие недочеты вызывают ошибки (в нашем примере 404) и лишние нагрузки на сервер.
Так что, давайте исправлять ситуацию.
Первым делом нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно в хорошем разрешении.
Теперь нужно понять: какой размер в пикселях необходим для иконки, и куда ее помещать?
Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти "картинки" под разные устройства. На данный момент, в официальной эппловской документации приняты следующие размеры:
- 60 x 60 px - для iPhone
- 76 x 76 px - для iPad
- 120 x 120 px - для iPhone c экранами высокого разрешения (Retina)
- 152 x 152 px - для iPad с экранами высокого разрешения (Retina)
Так вот, самым простейшим способом будет создать иконку, размером 57x57 px 60x60 px, назвать ее apple-touch-icon.png и поместить в корень сайта. При добавлении сайта на домашний экран, iOS сама скруглит ей края и наложит глянцевые эффекты. Если же, вы не хотите наложения этих эффектов (тем более, сейчас "плоский дизайн" в тренде), то следует создать еще и файл apple-touch-icon-precomposed.png. На него будет наложено только скругление.
Размеры иконок сверены и актуализированы на дату 02.11.2015. Буду ли я и дальше корректировать и обновлять статью - не знаю. Поэтому, прежде чем создавать эти иконки, обязательно сверьтесь с официальной документацией Apple, ссылку на которую я давал чуть выше. Также хочу отметить, что информация о формате precomposed актуальна только для операционных систем iOS ниже 7-й версии.
Но вышеописанный метод не совсем правильный, по нескольким причинам:
- мы понимаем, что устройства у всех разные;
- при таком способе, Android-девайсы не смогут поместить на домашний экран данную иконку.
Так что, мы пойдем правильным путем, а именно - вставкой простого html-кода.
Для начала нам нужно будет создать либо четыре файла с вышеуказанными размерами (этот вариант правильней), либо два файла: 144x144 px и 114x114 px 152x152 px и 120x120 px. После чего, их нужно поместить в корень сайта (или в любую удобную для вас директорию), а в head сайта - код:
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
В случае, если вам не нужны специфические эппловские эффекты, то:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-144-precomposed.png "> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png">
Как видите, при второй схеме используются только два файла, а размеры задаются значением атрибута sizes (используется только в HTML5) /напоминаю, это устаревшая схема/
Итог всех этих несложных манипуляций:
- те, кто посещают ваш сайт с мобильных устройств и добавляют его на домашний экран для быстрого доступа, будут видеть симпатичную иконку, а не простую миниатюру-скриншот ;
- никаких лишних ошибок с кодом 404 и дополнительной, пусть и не очень большой, нагрузки на хостинг.
На этом все, друзья. В заключение, еще раз повторюсь: если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то хотя бы закиньте в корень сайта картинку (размером 57 на 57 60 на 60 пикселей) с названием "apple-touch-icon.png".
До встречи на страницах блога или в соцсетях!
Саша! Ты не поверишь, но у меня эта статья, точнее, на эту же тему лежит в черновиках уже несколько дней)))
А вообще-то, вот про андроид-устройства в этой связи я не знала...
У нас такое уже далеко не в первый раз =)
Спасибо, Саш.
Я изучал журнал и тоже удивлялся огромному кол ву записей с этой ошибкой.
Запилю сегодня лемура 57*57 )
Давай, посмотрим на иконку. А то у меня твой блог "некрасиво" на хоумскрине расположен, без иконки :)
Проверил сейчас логи и не обнаружил у себя такой ошибки, видимо пользователи "яблочных" устройство редко посещают мой блог :)
Денис, странно =) Даже мой, малопосещаемый блог, и то регулярно посещают с ios-устройств. Иконки у тебя нет, значит ошибки должны логироваться.
Я логи за сутки смотрел, никого не было... Не знаю радоваться этому или печалиться :)
:) не нужно ни радоваться, ни печалиться. А нужно просто закинуть иконку в корень сайта, да забыть об этом =)
Закинул, Саш.
Глянь, пож-та, как иконка смотрится. Или скрин брось.
Если не трудно, конечно.
Спасибо.
Дима, нету пока иконки. Скорее всего нужно тебе кэш обнулить на сайте. Ну или дождаться, когда сам обнулится, по графику.
Скрин сделаю, конечно :)
Дима, лови скриншот на почте.
Ок, завтра обнулится)
Сейчас не трогаю, так как кеширование делается по расписанию ночью, когда нагрузка минимальна
Понимаю, поэтому и уточнил =) Завтречко первым делом к тебе загляну с утра :)
красота:) Спасибо большое)
Информация интересная пойду у себя ее применять, Спасибо
Саш, а файлы "apple-touch-icon.png" и "apple-touch-icon-precomposed.png" закидывать надо в корень сайта?
Да, в корень сайта.
А я то думаю, почему эти ошибки возникают, оказывается вон оно что, кто-то с мобильных девайсов ко мне заходит, надо будет подправит это дело.
Полезная информация, благодарю!
Всегда пожалуйста, Илья
Саш, тебе здесь чуток поофтоплю. Помнишь, вчера я тебе говорила про санкции гугла за спам по комментам? Все-таки с ноуфоллоу. У Димка последний пост, вот где я вычитала.
Ларис, дай ссылку, пожалуйста. Можно прям здесь. Я думаю, многим это интересно будет.
blog.dimok.ru/met-kats-o-vozmozhnyx-problemax-iz-za-nofollow - вот тут.
Лариса, я видео не смотрел, и не силен в английском, но автор же пишет: "А в целом беспокоиться не о чем."
Да и фраза, типа "огромное количество нофоллоу ссылок", очень туманна. Огромное количество, это сколько? Так что, с автором блога я согласен: беспокоиться не о чем.
К тому же, как я тебе вчера и говорил, в Гугл сидят не дураки, и прекрасно понимают бешеную популярность WP-блогов (и не только WP). Так что, я не думаю, что за комментарии Гугл будет применять какие-то санкции.
И фраза "Гугл вас досмотрит с пристрастием" наверное тоже не с проста. То есть, даже если будет зафиксировано "огромное" кол-во nofollow-ссылок на блог, автоматические санкции применяться не будут. Вероятно имеется еще и более тщательная, полуавтоматическая проверка.
В общем, как всегда. Точных алгоритмов никто не знает, кроме самих разработчиков ПС =) Одни лишь мысли, догадки и эксперименты.
Я тоже видео не смотрела, с моим интернетом это нереально. Однако фразу "в целом..." со своей склонностью везде искать второе дно восприняла как "а в остальном..." из песенки про маркизу). Думаю, ты прав, конечно, но информация лишней не бывает.
Насчет информации, полностью поддерживаю. Тем более, дыма без огня не бывает. Значит что-то такое все равно есть. Просто не так прямолинейно.
Слушай, количество блокировок по ошибке 404 снизилось в разы. Если не в десятки раз, так как похоже банились пользователи IOS :)
Ну они, наверное, не банились в прямом смысле слова. Но ошибки однозначно вызывали.
Только сейчас наверное все чуточку переигралось. В iOS 7 теперь нет "фирменных" эффектов, типа глянца. Значит смысла заливать файлы precomposed нет, и соответственно, прописывать ссылку на них. Теперь реально достаточно apple-touch-icon.png в корень залить и все в шоколаде =)
Надо будет прочесть официальную документацию обновленную.
p.s. Так и есть. Теперь у них новые правила. Формат precomposed упразднили, размеры поменялись. Блин, это что, каждый раз под них подстраиваться?
Я правильно понимаю, что если у меня установлен фавикон размером 16*16, то его нужно дополнять рекомендуемым файлом и увеличенным до 57*57 изображением?
Да. Но это может быть совсем другая картинка. Не обязательно та же, что и фавикон.
С эпалами все понятно, а остальные мобильники можно победить?
Android также использует apple-touch-icon.png, как и iOS, так что под него каких-то специфических иконок нету. А вот для мобильных ОС от Майкрософт нужна какая-то своя иконка. Я не помню, к сожалению, ни ее названия, ни размеров.
Маленькое уточнение для меня.
Пропись кода в header нужна только для 2-х файлов - 144х144 и 114х114? А если вставлять 4-е файла в корень, то никакой код не прописывается. Я правильно понял?
Вообще, по обновленной документации Apple, сейчас следует делать так:
То есть, если делать все по рекомендациям, то следует создать 4 иконки с разными размерами: 60x60 (дефолтный), 76х76, 120x120, 152x152. Сами файлы можно называть как угодно, главное правильно потом прописать ссылку к ним. Но лучше называть их так, как и рекомендует Apple, чтобы знать какой файлик для каких девайсов. А ссылки в head лучше все-таки прописывать.
Не прописывать ссылки можно только в том случае, если лень заморачиваться с созданием нескольких иконок с разными размерами, и тупо закинуть файл с названием apple-touch-icon.png в корень. Тогда этот файл будет подхватываться для всех девайсов. Так не совсем правильно, но вполне себе работает
При этом у самих яблочников на сайте просто 1 картинка в корне без мета-тегов в коде страницы :)
_www.apple.com/apple-touch-icon.png
Да-да =) Пошли самым простым путем. Хотя после выхода iOS 7 этого еще более, чем достаточно, нежели раньше. То есть достаточно одной единственной пикчи 152x152 в корне сайта.
Александр, извини, я правильно поняла, что на сей день заморачиваться с размерами и кодами в хедере не имеет смысла? И достаточно одной картинки 152х152 в корне? А как ее обозвать - apple-touch-icon.png или touch-icon-iphone.png, как ты ваше писал?
У меня по логам запрашивают apple-touch-icon-precomposed.png и apple-touch-icon.png разных размеров - от 72 до 152 :)
И еще сюда вопросик: если без кода, то получается, что Android-девайсы не смогут использовать иконку? (так в статье написано)
В целом да. Можно просто бросить в корень apple-touch-icon.png и ..precomposed (скоро и этот файл будет не нужен, когда все перейдут на последние версии iOS). Устройства будут искать файл с префиксом apple-touch-icon... в названии
Но лучше все-таки делать по правильному, как указано в документации (ссылка есть в статье). Документация эта периодически меняется, поэтому желательно с ней свериться перед созданием иконок.
И да, если в head их не прописать, то Android-девайсы не подхватывают эти иконки. По крайней мере на момент написания статьи было так.
Закинула вчера apple-touch-icon.png и apple-touch-icon-precomposed.png размером 144 (152 сервис на дал, а самой рисовать времени не было) и отдельно еще apple-touch-icon-72x72.png и на 114. Однако за сегодня опять в логах вылезло на 120 - 404 :(((
Беда прям с этими "огрызками"! - не угодишь :)
От кода в хедере останавливает... лишний код в хедере. Я и так еле добилась чтоб Пейжд Спид перестал ругаться на слишком объемный код. А можно это все в футере прописать, как думаешь?
В футере нет. В head нужно. Я не думаю, что Page Speed будет ругаться на подобного рода ссылки - это же статика, изображение. Не скрипты какие.
Данный метод не сработал, хотя думал чего может быть проще чем закинуть картинку в корень сайта. Оказалось если стоит плагин WPtouch Pro (для мобильных устройств),то там дополнительно нужно залить файлы картинок на андроид и apple.
Вот по WPtouch Pro ничего не скажу.
Если не срабатывает простое добавление картинки в корень сайта, то добавление ссылок на нее/них в элемент head должно работать на любом сайте.
Всё дело в плагине WPtouch Pro - он делает мобильную версию сайта и потому ни head ни просто картинка в корне сайта не срабатывают.
В общем твой метод работает без плагина, если стоит плагин то нужно в нём и добавлять иконки.
А, ну так если в WPtouch есть такая опция, то ей и нужно воспользоваться =)
Александр приветствую. А можно такой вопрос: в отчетах было много 404 ошибок, но все они вызывались поиском не существующих статей, типа "Привет мир!". Они давно удалены. Простая иконка, фавикон у меня есть, а с этой что то не ладится. Я поступил проще - в файл ошибки 404 вставил небольшой код с редиректом на главную (нашел такую рекомендацию). Ошибка 404 исчезла полностью, так как любой не правильный запрос попадает на главную, а тут уже дело хозяйское. Интересно насколько допустимы мои действия?
Привет! По-моему весьма интересное решение.
Но идеальный вариант - это вообще не допускать наличия таких ошибок, чистить базу от несуществующих внутр.ссылок, статей, картинок и т.д.
Эту идею и код подкинула Жана-Лира, у нее тоже так работает. На сайте магазина такая система заложена изначально.
Со ссылками у меня порядок, контролируется плагином. С картинками, вроде тоже порядок. А вот как удалять из базы данных удаленные статьи - я не знаю. Тут от подсказки не откажусь.
Если конкретно по статьям, то нужно зайти в таблицу wp_posts и удалить ненужные записи (если они там присутствуют), также в этой же таблице хранятся ревизии постов, аттачменты (закрепление изображений за конкретными постами), да и вообще весь контент блога. Ну это так, кратко. Лучше погуглить что-нибудь типа "оптимизация БД WP" или "структура БД WP", чтобы понятней было
Александр! С наступающим Новым 2015 годом. Добрался я до таблиц. В общем лишнего там не нашел. У меня установлен плагин оптимизации и я его частенько использую. Ссылки тоже контролирует плагин. Может где то в сети болтаются старые адреса или роботы их хранят. Наверное это не смертельно. В Агаве кстати есть php Myadmin. Так что я с ним познакомился. Там и нашел таблицы.
С новым годом!
Да, скорее всего какие-то "хвосты" болтаются. Это не страшно.
Спасибо за статью, а то в логах всё больше и больше этих запросов иконок вижу, а ответ узнал только от вас :)
Рад, что смог помочь
Здравствуйте, Александр! Спасибо Вам огромное за очень полезную информацию. У меня правда тоже стоит плагин WP Touch, но я думаю дальше сама разберусь. Главное суть понятна!
Добрый день. Спасибо за ваш отзыв.
Разобраться с этими touch-картинками действительно не сложно.
У тебя в коде ошибки. В sizes разные размеры, а в href один и тот же адрес.
Ещё вопрос у меня: в других статьях почему-то приводятся следующие размеры: 60, 76, 120, 152. Что за? Я пока не разобрался - сделал себе все 8 размеров ))
Это не совсем ошибка =) Это типа упрощенного варианта, чтобы не создавать несколько картинок разного размера. Вот, я давал этому пояснение:
Но правильней, все же, создавать отдельные изображения нужного размера + прописывать в ссылке атрибут size.
Вот как сама Apple рекомендует делать:
Что касается размеров, то объяснение этому такое - после написания данной статьи девайсы от Apple уже неоднократно обновлялись, появились бОльшие экраны, большее разрешение экранов. Просто статью нужно привести в актуальность. Надеюсь когда-нибудь займусь этим =)
60, 76, 120, 152 - это актуальные на данный момент размеры иконок. В статье я преднамеренно оставил ссылку на официальную эппловскую документацию. Вот, дублирую - клац
Спасибо большое за полезную статью! Сделала с размерами как в статье, дошла до комментариев, и увидела новые актуальные размеры :) Сейчас переделаю... Огромное спасибо!
Здравствуйте, Елена!
Да уж, нужно в срочном порядке актуализировать статью =)
Я немного в шоке, до сегодня и не подозревала об этой проблеме, пока случайно не рассмотрела лог моего сайта... Уже подумала вирус какой, но сканирование ничего не дало.
Айпловцы прямо Наполеоны с манией величия - под каждый их девайс (!!!) извольно прописать строку в заголовке сайта. Круть...
Спасибо за статью, искренне. Пойду вставлять строки...
Да уж, Эпловцы они такие.
Не очень понял, почему 404 ошибки создают запись на диск. Что имеется в виду?
Все просто - идет запись ошибок в лог-файл
Здравствуйте. Помогите мне пожалуйста. Все сделала..., но снова вылезло до тысячи ошибок за ночь. Ничего не получается, и картинки загрузила, и код вставила. Не поможете разобраться?
Марриэтта, здравствуйте. И с Новым годом! Вы мне напомните через денек-другой (можно через обратную связь или здесь же, в комментариях) - постараемся разобраться.
Приятных вам праздников!
С Новым 2016 годом. Желаю здоровья, счастья, удачи и мешок денег в придачу. Александр а не проще сделать редирект с 404 страницы, например на главную? Я себе, по совету Жанны-Лиры уже давно так сделал. У нее на сайте такой же редирект. У меня на сайте 404 ошибок нет, всех отправляет на главную.
Александр, приветствую! С наступившим 2016-м! Всех благ в новом году.
Насчет редиректа - можно и так сделать. Но в данном конкретном случае (про apple-touch-icon) не будет красивой картинки при сохранении на домашний экран. Можно, конечно, и картинки залить, и ссылки на них проставить, и плюсом еще редирект на главную сделать. Тогда все должно быть нормально.
PS: лично я не делаю редирект, потому что часто мониторю логи на предмет ошибок.
RewriteRule ^apple-touch-icon(.*).png$ favicon.png [L]Нагрузка от 404-х?! Бред! Отдаче файла предшествует вызов stat(), проверяющий наличие файла по указаному пути и если файл найден - вебсервер запустит механизм его отдачи и запишет в лог, в случае же с 404-й будет просто stat() и запись в лог. Так что не несите чушь, сударь, отдача ваших файликов вебсерверу обойдется тяжелее, чем 404-я.