Apple Touch Icon. Избавляемся от лишних ошибок 404

Многие блогеры и веб-мастера, которые просматривают логи сервера (или журналы, создаваемые некоторыми плагинами) могли заметить, что часто ошибку с кодом 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 будет отображаться не красивенькая иконка, а миниатюра (скриншот) страницы. В общем, выглядит это примерно так:

Home Screen на iPadИ если о том, как отображается сайт на хоум скрине iOS-устройств, можно было бы особо себя не озадачивать (хотя, мы же создаем favicon, например, да и посетителей своих уважаем), то о нагрузках на сервер нужно помнить всегда. И по возможности их снижать и избегать.

Вот, для примера, скриншот журнала плагина iThemes Security на одном моем сайте:

Журнал ошибок плагина BWS

Как видно из скриншота, на 19 августа в журнале зафиксировано 190 ошибок 404, связанных с apple-touch-icon. И это не очень уж посещаемый блог. Да и сам журнал я регулярно "чищу".

А вот еще один скриншот, из Google Analytics (эту статистику на указанный сайт я установил недавно, поэтому картина происходящего не совсем целостная):

Статистика из 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".

До встречи на страницах блога или в соцсетях!

67 Комментариев Apple Touch Icon. Избавляемся от лишних ошибок 404

  1. Web-Кошка

    Саша! Ты не поверишь, но у меня эта статья, точнее, на эту же тему лежит в черновиках уже несколько дней)))
    А вообще-то, вот про андроид-устройства в этой связи я не знала...

  2. дмитрий

    Спасибо, Саш.
    Я изучал журнал и тоже удивлялся огромному кол ву записей с этой ошибкой.
    Запилю сегодня лемура 57*57 )

    1. Александр Майер

      Давай, посмотрим на иконку. А то у меня твой блог "некрасиво" на хоумскрине расположен, без иконки :)

  3. Webliberty

    Проверил сейчас логи и не обнаружил у себя такой ошибки, видимо пользователи "яблочных" устройство редко посещают мой блог :)

    1. Александр Майер

      Денис, странно =) Даже мой, малопосещаемый блог, и то регулярно посещают с ios-устройств. Иконки у тебя нет, значит ошибки должны логироваться.

      1. Webliberty

        Я логи за сутки смотрел, никого не было... Не знаю радоваться этому или печалиться :)

        1. Александр Майер

          :) не нужно ни радоваться, ни печалиться. А нужно просто закинуть иконку в корень сайта, да забыть об этом =)

  4. Дмитрий

    Закинул, Саш.
    Глянь, пож-та, как иконка смотрится. Или скрин брось.
    Если не трудно, конечно.
    Спасибо.

    1. Александр Майер

      Дима, нету пока иконки. Скорее всего нужно тебе кэш обнулить на сайте. Ну или дождаться, когда сам обнулится, по графику.

      Скрин сделаю, конечно :)

  5. Дмитрий

    Ок, завтра обнулится)
    Сейчас не трогаю, так как кеширование делается по расписанию ночью, когда нагрузка минимальна

    1. Александр Майер

      Понимаю, поэтому и уточнил =) Завтречко первым делом к тебе загляну с утра :)

  6. Александр

    Саш, а файлы "apple-touch-icon.png" и "apple-touch-icon-precomposed.png" закидывать надо в корень сайта?

  7. Илья

    А я то думаю, почему эти ошибки возникают, оказывается вон оно что, кто-то с мобильных девайсов ко мне заходит, надо будет подправит это дело.
    Полезная информация, благодарю!

  8. Web-Кошка

    Саш, тебе здесь чуток поофтоплю. Помнишь, вчера я тебе говорила про санкции гугла за спам по комментам? Все-таки с ноуфоллоу. У Димка последний пост, вот где я вычитала.

    1. Александр Майер

      Ларис, дай ссылку, пожалуйста. Можно прям здесь. Я думаю, многим это интересно будет.

        1. Александр Майер

          Лариса, я видео не смотрел, и не силен в английском, но автор же пишет: "А в целом беспокоиться не о чем."

          Да и фраза, типа "огромное количество нофоллоу ссылок", очень туманна. Огромное количество, это сколько? Так что, с автором блога я согласен: беспокоиться не о чем.

          К тому же, как я тебе вчера и говорил, в Гугл сидят не дураки, и прекрасно понимают бешеную популярность WP-блогов (и не только WP). Так что, я не думаю, что за комментарии Гугл будет применять какие-то санкции.

          И фраза "Гугл вас досмотрит с пристрастием" наверное тоже не с проста. То есть, даже если будет зафиксировано "огромное" кол-во nofollow-ссылок на блог, автоматические санкции применяться не будут. Вероятно имеется еще и более тщательная, полуавтоматическая проверка.

          В общем, как всегда. Точных алгоритмов никто не знает, кроме самих разработчиков ПС =) Одни лишь мысли, догадки и эксперименты.

  9. Web-Кошка

    Я тоже видео не смотрела, с моим интернетом это нереально. Однако фразу "в целом..." со своей склонностью везде искать второе дно восприняла как "а в остальном..." из песенки про маркизу). Думаю, ты прав, конечно, но информация лишней не бывает.

    1. Александр Майер

      Насчет информации, полностью поддерживаю. Тем более, дыма без огня не бывает. Значит что-то такое все равно есть. Просто не так прямолинейно.

  10. Дмитрий

    Слушай, количество блокировок по ошибке 404 снизилось в разы. Если не в десятки раз, так как похоже банились пользователи IOS :)

    1. Александр Майер

      Ну они, наверное, не банились в прямом смысле слова. Но ошибки однозначно вызывали.

      Только сейчас наверное все чуточку переигралось. В iOS 7 теперь нет "фирменных" эффектов, типа глянца. Значит смысла заливать файлы precomposed нет, и соответственно, прописывать ссылку на них. Теперь реально достаточно apple-touch-icon.png в корень залить и все в шоколаде =)

      Надо будет прочесть официальную документацию обновленную.

      p.s. Так и есть. Теперь у них новые правила. Формат precomposed упразднили, размеры поменялись. Блин, это что, каждый раз под них подстраиваться?

  11. Александр Викторович

    Я правильно понимаю, что если у меня установлен фавикон размером 16*16, то его нужно дополнять рекомендуемым файлом и увеличенным до 57*57 изображением?

    1. Александр Майер

      Да. Но это может быть совсем другая картинка. Не обязательно та же, что и фавикон.

    1. Александр Майер

      Android также использует apple-touch-icon.png, как и iOS, так что под него каких-то специфических иконок нету. А вот для мобильных ОС от Майкрософт нужна какая-то своя иконка. Я не помню, к сожалению, ни ее названия, ни размеров.

  12. Anatoly

    Маленькое уточнение для меня.
    Пропись кода в header нужна только для 2-х файлов - 144х144 и 114х114? А если вставлять 4-е файла в корень, то никакой код не прописывается. Я правильно понял?

    1. Александр Майер

      Вообще, по обновленной документации Apple, сейчас следует делать так:

      <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"/>

      То есть, если делать все по рекомендациям, то следует создать 4 иконки с разными размерами: 60x60 (дефолтный), 76х76, 120x120, 152x152. Сами файлы можно называть как угодно, главное правильно потом прописать ссылку к ним. Но лучше называть их так, как и рекомендует Apple, чтобы знать какой файлик для каких девайсов. А ссылки в head лучше все-таки прописывать.

      Не прописывать ссылки можно только в том случае, если лень заморачиваться с созданием нескольких иконок с разными размерами, и тупо закинуть файл с названием apple-touch-icon.png в корень. Тогда этот файл будет подхватываться для всех девайсов. Так не совсем правильно, но вполне себе работает

      1. Alex

        При этом у самих яблочников на сайте просто 1 картинка в корне без мета-тегов в коде страницы :)
        _www.apple.com/apple-touch-icon.png

        1. Александр Майер

          Да-да =) Пошли самым простым путем. Хотя после выхода iOS 7 этого еще более, чем достаточно, нежели раньше. То есть достаточно одной единственной пикчи 152x152 в корне сайта.

          1. Надежда

            Александр, извини, я правильно поняла, что на сей день заморачиваться с размерами и кодами в хедере не имеет смысла? И достаточно одной картинки 152х152 в корне? А как ее обозвать - apple-touch-icon.png или touch-icon-iphone.png, как ты ваше писал?
            У меня по логам запрашивают apple-touch-icon-precomposed.png и apple-touch-icon.png разных размеров - от 72 до 152 :)

          2. Надежда

            И еще сюда вопросик: если без кода, то получается, что Android-девайсы не смогут использовать иконку? (так в статье написано)

          3. Александр Майер

            В целом да. Можно просто бросить в корень apple-touch-icon.png и ..precomposed (скоро и этот файл будет не нужен, когда все перейдут на последние версии iOS). Устройства будут искать файл с префиксом apple-touch-icon... в названии

            Но лучше все-таки делать по правильному, как указано в документации (ссылка есть в статье). Документация эта периодически меняется, поэтому желательно с ней свериться перед созданием иконок.

            И да, если в head их не прописать, то Android-девайсы не подхватывают эти иконки. По крайней мере на момент написания статьи было так.

          4. Надежда

            Закинула вчера apple-touch-icon.png и apple-touch-icon-precomposed.png размером 144 (152 сервис на дал, а самой рисовать времени не было) и отдельно еще apple-touch-icon-72x72.png и на 114. Однако за сегодня опять в логах вылезло на 120 - 404 :(((
            Беда прям с этими "огрызками"! - не угодишь :)
            От кода в хедере останавливает... лишний код в хедере. Я и так еле добилась чтоб Пейжд Спид перестал ругаться на слишком объемный код. А можно это все в футере прописать, как думаешь?

          5. Александр Майер

            В футере нет. В head нужно. Я не думаю, что Page Speed будет ругаться на подобного рода ссылки - это же статика, изображение. Не скрипты какие.

  13. Cheshir

    Данный метод не сработал, хотя думал чего может быть проще чем закинуть картинку в корень сайта. Оказалось если стоит плагин WPtouch Pro (для мобильных устройств),то там дополнительно нужно залить файлы картинок на андроид и apple.

    1. Александр Майер

      Вот по WPtouch Pro ничего не скажу.
      Если не срабатывает простое добавление картинки в корень сайта, то добавление ссылок на нее/них в элемент head должно работать на любом сайте.

      1. Cheshir

        Всё дело в плагине WPtouch Pro - он делает мобильную версию сайта и потому ни head ни просто картинка в корне сайта не срабатывают.
        В общем твой метод работает без плагина, если стоит плагин то нужно в нём и добавлять иконки.

        1. Александр Майер

          А, ну так если в WPtouch есть такая опция, то ей и нужно воспользоваться =)

  14. Александр Викторович

    Александр приветствую. А можно такой вопрос: в отчетах было много 404 ошибок, но все они вызывались поиском не существующих статей, типа "Привет мир!". Они давно удалены. Простая иконка, фавикон у меня есть, а с этой что то не ладится. Я поступил проще - в файл ошибки 404 вставил небольшой код с редиректом на главную (нашел такую рекомендацию). Ошибка 404 исчезла полностью, так как любой не правильный запрос попадает на главную, а тут уже дело хозяйское. Интересно насколько допустимы мои действия?

    1. Александр Майер

      Привет! По-моему весьма интересное решение.
      Но идеальный вариант - это вообще не допускать наличия таких ошибок, чистить базу от несуществующих внутр.ссылок, статей, картинок и т.д.

      1. Александр Викторович

        Эту идею и код подкинула Жана-Лира, у нее тоже так работает. На сайте магазина такая система заложена изначально.
        Со ссылками у меня порядок, контролируется плагином. С картинками, вроде тоже порядок. А вот как удалять из базы данных удаленные статьи - я не знаю. Тут от подсказки не откажусь.

        1. Александр Майер

          Если конкретно по статьям, то нужно зайти в таблицу wp_posts и удалить ненужные записи (если они там присутствуют), также в этой же таблице хранятся ревизии постов, аттачменты (закрепление изображений за конкретными постами), да и вообще весь контент блога. Ну это так, кратко. Лучше погуглить что-нибудь типа "оптимизация БД WP" или "структура БД WP", чтобы понятней было

  15. Александр Викторович

    Александр! С наступающим Новым 2015 годом. Добрался я до таблиц. В общем лишнего там не нашел. У меня установлен плагин оптимизации и я его частенько использую. Ссылки тоже контролирует плагин. Может где то в сети болтаются старые адреса или роботы их хранят. Наверное это не смертельно. В Агаве кстати есть php Myadmin. Так что я с ним познакомился. Там и нашел таблицы.

    1. Александр Майер

      С новым годом!
      Да, скорее всего какие-то "хвосты" болтаются. Это не страшно.

  16. Любитель холодного оружия

    Спасибо за статью, а то в логах всё больше и больше этих запросов иконок вижу, а ответ узнал только от вас :)

  17. Татьяна

    Здравствуйте, Александр! Спасибо Вам огромное за очень полезную информацию. У меня правда тоже стоит плагин WP Touch, но я думаю дальше сама разберусь. Главное суть понятна!

    1. Александр Майер

      Добрый день. Спасибо за ваш отзыв.
      Разобраться с этими touch-картинками действительно не сложно.

  18. Максим

    У тебя в коде ошибки. В sizes разные размеры, а в href один и тот же адрес.
    Ещё вопрос у меня: в других статьях почему-то приводятся следующие размеры: 60, 76, 120, 152. Что за? Я пока не разобрался - сделал себе все 8 размеров ))

    1. Александр Майер

      Это не совсем ошибка =) Это типа упрощенного варианта, чтобы не создавать несколько картинок разного размера. Вот, я давал этому пояснение:

      Как видите, при второй схеме используются только два файла, а размеры задаются значением атрибута sizes (используется только в HTML5).

      Но правильней, все же, создавать отдельные изображения нужного размера + прописывать в ссылке атрибут size.
      Вот как сама Apple рекомендует делать:

      <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"/>
      

      Что касается размеров, то объяснение этому такое - после написания данной статьи девайсы от Apple уже неоднократно обновлялись, появились бОльшие экраны, большее разрешение экранов. Просто статью нужно привести в актуальность. Надеюсь когда-нибудь займусь этим =)

      60, 76, 120, 152 - это актуальные на данный момент размеры иконок. В статье я преднамеренно оставил ссылку на официальную эппловскую документацию. Вот, дублирую - клац

  19. Лена

    Спасибо большое за полезную статью! Сделала с размерами как в статье, дошла до комментариев, и увидела новые актуальные размеры :) Сейчас переделаю... Огромное спасибо!

    1. Александр Майер

      Здравствуйте, Елена!
      Да уж, нужно в срочном порядке актуализировать статью =)

  20. Елена Маая

    Я немного в шоке, до сегодня и не подозревала об этой проблеме, пока случайно не рассмотрела лог моего сайта... Уже подумала вирус какой, но сканирование ничего не дало.

    Айпловцы прямо Наполеоны с манией величия - под каждый их девайс (!!!) извольно прописать строку в заголовке сайта. Круть...

    Спасибо за статью, искренне. Пойду вставлять строки...

  21. bodomic

    Не очень понял, почему 404 ошибки создают запись на диск. Что имеется в виду?

  22. Марриэтта

    Здравствуйте. Помогите мне пожалуйста. Все сделала..., но снова вылезло до тысячи ошибок за ночь. Ничего не получается, и картинки загрузила, и код вставила. Не поможете разобраться?

    1. Александр Майер

      Марриэтта, здравствуйте. И с Новым годом! Вы мне напомните через денек-другой (можно через обратную связь или здесь же, в комментариях) - постараемся разобраться.

      Приятных вам праздников!

  23. Александр Викторович

    С Новым 2016 годом. Желаю здоровья, счастья, удачи и мешок денег в придачу. Александр а не проще сделать редирект с 404 страницы, например на главную? Я себе, по совету Жанны-Лиры уже давно так сделал. У нее на сайте такой же редирект. У меня на сайте 404 ошибок нет, всех отправляет на главную.

    1. Александр Майер

      Александр, приветствую! С наступившим 2016-м! Всех благ в новом году.
      Насчет редиректа - можно и так сделать. Но в данном конкретном случае (про apple-touch-icon) не будет красивой картинки при сохранении на домашний экран. Можно, конечно, и картинки залить, и ссылки на них проставить, и плюсом еще редирект на главную сделать. Тогда все должно быть нормально.

      PS: лично я не делаю редирект, потому что часто мониторю логи на предмет ошибок.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *