Что такое apple-touch-icon.png?

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

Кроме стандартных файлов robots.txt, favicon.ico и sitemap.xml (которые я на тот момент не сделал) ошибку 404 вызывали совсем странные файлы apple-touch-icon.png и apple-touch-icon-precomposed.png. Заподозрив неладное, пришлось нагуглить вот такой документ. Оказывается, что если на сайт заходят с Apple iPhone или iPad, в общем с iOS, то браузер запрашивает из корня сайта специальные картинки (типа favicon.ico) с указанными именами. Используются они для создания красивой иконки сайта для домашнего экрана (Home screen).

Причём, сначала запрашивается файл apple-touch-icon-precomposed.png, который должен быть оформлен по всем требованиям (скруглённые уголки, глянец), а если он не найден, то запрашивается apple-touch-icon.png, который может представлять из себя просто картинку и все эффекты наложатся на него автоматически. Так же можно указывать отдельные картинки для отдельных страниц с помощью специальных тегов. По некоторым данным, если таких картинок нет, то будет использоваться скриншот сайта.

Что характерно, Apple рекомендует размер 57х57 точек, а сама использует 129х129 о_О. А вот из Яндекса, Контакта, Гугла и Фейсбука apple-touch-icon.png нашлась только у последнего.

Что такое apple-touch-icon.png?: 16 комментариев

  1. Сержо

    Во жесть. У меня эррор лог забит тупо такими сточками

  2. Васьвась

    Т.е. суко, можно было сделать так: смотреть на link, если указано где искать apple-touch-icon, то тащить его. Но так долго ждать, что программисты впилят этот кусок в свои сайты. А, я не побоюсь этого слова, ЗАХУЯРИТЬ вызов ПНГэшки, не проверяя есть она или нет — это в еррор логах быстро найдут и в гуголе прочтут что мы мол такие пиздатые, что аж придумали как ссылку на ваш сайт замостить на экраны наших чудо девайсиков!

  3. Rezon

    Большое спасибо! Вы очень мне помогли!
    Единственное – precomposed-файлы не обязаны иметь скруглённые уголки :) Уголки iOS обрезает сама.

  4. Зоя

    Статья и правда полезная, только не понятно, как с этим жить дальше и что надо сделать

  5. Slavyan

    Как по мне, так это какой то дебилизм. С чего в Apple решили что все сайты должны держать для их девайсов иконки? Только представьте сколько web-мастеров и слыхать не слыхивали об таком нововведении и в результате сколько лишних запросов происходит с творений ‘яблочников’.

  6. Артём

    Чёртов уродливый огрызок, вот это уже начинает выводить по-тихоньку, стараешься о них не слышать так они тебе и тут знать дают, вот мне делать нечего чтоб под их убогие монотонные девайсы делать специальные иконки, позже может мне ещё и сайт под них делать? уголки им закруглённый подавай, а от иконки кусок по пути отгрызть не надо? ну а то вдруг по другому не примут…

  7. Василий

    Не понимаю, чего народ слюной брызжет. Фавайконы же запихивают на сайты, без вопросов.
    Ну пусть счастливым обладателям яблочных девайсов будет немного удобнее. Вам же профит.

  8. Светлана

    Поняла, что надо создать подобный файл, но где его взять или как создать самой, не поняла. Объясните?

  9. Алексей

    Вот так вот взяли и ввели стандарт стандарт, свой, личный, который никто кроме них не поддерживает. Прям вот так сейчас кинулся делать для них картинку, с глянцем и закругленными краями.

  10. Ivan

    А почему бы не положить эти картинки, написав на них что-то типа “привет яблодрочеру” ;)

  11. Artemsp

    А запретить яблочникам вход нас сайт можно? Чтоб не вызывали у меня ошибки при поиске говно файлов?

  12. Сергей

    Создаете рисунок и кидаете в корень сайта, а айфон уже сам округлит края…..

  13. Риванол

    Вконтакте тоже уже поддерживает такую фичу). Artemsp, запретить то можно, но ты лучше им вместо сайта сообщение выдавай, мол, извините, бананов для вас нет).

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>