Apple touch icon png 404

УДАЛЁНКА.РУ

Компьютерная помощь на расстоянии!

Что за apple-touch-icon-precomposed.png и зачем apple-touch-icon.png ?

Зачем apple-touch-icon.png ?

Как и все – нашел кучу сообщений в логах сайта о том что нет такого файла: apple-touch-icon-precomposed.png и apple-touch-icon.png Оказалось это iOS хочет показать иконку для сайта и пытается ее найти в корневом директории на хостинге в разных вариантах имени файла:

• apple-touch-icon-57×57-precomposed.png
• apple-touch-icon-57×57.png
• apple-touch-icon-precomposed . png
• apple-touch-icon.png

Что же, сделаем ее самостоятельно.

У вас должен получиться целый архив со всевозможными форматами иконок. Итак создаем значок. Чтобы указать значок для всего веб-сайта, нужно поместить созданный файл значка в формате png в корень сайта под названием apple-touch-icon.png. Я подстраховался и положил копии значка в корень сайта с названиями apple-touch-icon-precomposed.png и apple-touch-icon.png

• Значок в формате PNG с именем apple-touch-icon.png нужно разместить в корневой папке сайта
• Если вы хотите указать значок для одной веб-страницы или заменить значок веб-сайта с веб-страницы конкретной иконкой, добавьте элемент ссылки на веб-страницу:
• В приведенном выше примере, замените custom_icon.png файлом иконки.
• Чтобы указать несколько значков для устройств с разным разрешением, например, для поддержки устройств iPhone и iPad, нужно добавить атрибут sizes к каждому элементу link следующим образом:
• Наиболее подходящим для устройства, если не указан sizes, является размер элемента до 60 х 60.

Если на сайте нет значка, размер которого бы соответствовал рекомендуемому для устройства, будет использован самый маленький значок из тех, что больше рекомендуемого размера. Если размер значков не превышает рекомендуемый, будет использоваться самый большой значок.

В случае если иконка должна лежать в другом месте (например в специальной папке) то необходимо добавить тег следующего вида, например:

Желающим подробнее вникнуть в тему, могу предложить статью на английском языке: https://mathiasbynens.be/notes/touch-icons

Пример тегов в странице сайта )какой то сайт попался под руку 🙂 ):

Источник

apple-touch-icon.png и apple-touch-icon-precomposed.png: иконки и 404-я ошибка

Заметил что на хостинге, в логах сервера часто встречается 404-я ошибка при попытке получить файлы apple-touch-icon.png или apple-touch-icon-precomposed.png из корня сайта.

Виноватыми оказались apple-устройства, при посещении какого-либо сайта они обращаются к этим файлам. Возникает закономерный вопрос «Что это за файлы и зачем они нужны?»

Что такое apple-touch-icon или Web Clips

Пользователи IOS и android могут на свой рабочий стол добавлять ярлыки-иконки для сайтов, они называются Web Clips. Файлы apple-touch-icon.png и apple-touch-icon-precomposed.png как раз и предназначены для этих иконок. То есть если вы у себя на телефоне захотите добавить на главный ярлык для моего сайта, то иконка этого ярлыка будет браться из этих файлов. Если же файла нет, то android возьмет иконку из файла favicon.ico, а IOS просто сделает иконку в виде скриншота видимой на данный момент части сайта.

На android устройствах такие ярлыки добавляются так: в браузере открываете нужный сайт — кнопка меню — Добавить закладку — в поле «Добавить в» выбираем «Главный экран» и жмем ОК. Попробуйте добавить мой сайт =)

У меня apple-touch-icon выглядит вот так:

А на телефоне вот так:

Android обращается к файлу apple-touch-icon только в тот, момент, когда Вы пытаетесь добавить сайт в закладки на главный экран. А вот apple-устройства пытаются обратиться при каждом посещении страницы. При отсутствии файлов apple-touch-icon.png это влечет генерацию 404-й ошибки. Если ваш сайт более-менее посещаем, то такая ошибка будет генерироваться достаточно часто, чтобы увидеть это в отчетах о нагрузке сервера. Ведь генерация 404-й страницы создает большую нагрузку для сервера хостинга, чем просто процесс отдачи изображения.

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

Как сгенерировать apple-touch-icon

Мобильные устройства могут иметь разные размеры экранов, а значит и сами иконки могут быть разных размеров. Вот например тут в ряду «Web clip icon (recommended for web apps and websites)» можно посмотреть какие иконки нужны для ios-устройств:

Я попытался выяснить какие именно размеры иконок стоит сгенерировать, но увидел что мнения различных блогеров слишком сильно разбегаются. Потому проанализировал логи и остановился на размерах 57×57, 76×76, 114х114, 120×120, 152×152. Если же в логах замечу что будут запрашиваться еще какие-то разрешения, то и для них создам иконку.

Для генерации иконок можно использовать один из множества сервисов «apple-touch-icon generator». Мне понравился вот этот: gieson.com/Library/projects/utilities/icon_slayer :

• Находим подходящую иконку в хорошем качестве
• Загружаем на сайт через кнопку Load Image
• Указываем эффекты (градиент, блики)
• Указываем (по желанию) дополнительные разрешения: ставим галочку возле custom и через пробел печатаем необходимые разрешения
• Жмем кнопку Export Icons

На моем примере у меня имена файлов должны быть следующие:

• apple-touch-icon-152×152-precomposed.png
• apple-touch-icon-152×152.png
• apple-touch-icon-120×120-precomposed.png
• apple-touch-icon-120×120.png
• apple-touch-icon-76×76-precomposed.png
• apple-touch-icon-76×76.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

Чаще всего рекомендуют под именами apple-touch-icon-precomposed.png и apple-touch-icon.png хранить иконки с разрешением 57×57 пикселей.

Отличия apple-touch-icon и apple-touch-icon-precomposed

apple-touch-icon-precomposed — иконки с заранее наложенными эффектами в стиле iOS с закругленными углами и тд. и тп.

apple-touch-icon — иконки без эффектов, мобильное устройство само наложит на эту иконку свои эффекты.

При посещении страницы иконки запрашиваются в следующем порядке:

• apple-touch-icon-120×120-precomposed.png — иконка с наиболее подходящим разрешением и наложенными эффектами
• apple-touch-icon-120×120.png — если нет предыдущей, то иконка с наиболее подходящим разрешением, но без эффектов
• apple-touch-icon-precomposed.png — если нет предыдущей, то иконка с наложенными эффектами
• apple-touch-icon.png — если нет предыдущей, то иконка без эффектов

Как установить на сайт иконки apple-touch-icon

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

Часто советуют еще прописать в заголовке теги такого вида:

Но я считаю это лишним. Ведь все будет работать и без этого. Зачем принудительно к странице подключать лишние файлы, если на устройстве пользователя они могут не понадобится (например на ноутбуке)? Лучше дать устройству самому решать что ему загружать.

Источник

Ошибка Apple Touch Icon: как избавиться? Скачать файл apple-touch-icon.png

Многие блогеры и веб-мастера, которые просматривают логи сервера (или журналы, создаваемые некоторыми плагинами) могли заметить, что часто ошибку с кодом 404 вызывают некоторые весьма интересные файлы с названиями вроде: apple-touch-icon.png и apple-touch-icon-precomposed.png или apple-touch-icon-120×120.png.

Что это за файлы такие и как устранить ошибки 404 из-за их отсутствия? Сейчас поговорим о том, как устранить эту ошибку.

Если в отчетах (логах) своего сервера или в журналах плагинов вы обнаруживаете ошибки 404, которые связаны с тем, что не найдены файлы:

• “apple-touch-icon.png”
• “apple-touch-icon-precomposed.png”
• “apple-touch-icon-120×120.png”
• “apple-touch-icon-120×120-precomposed.png”
• ( и любые спрефиксом “apple-touch-icon…”),

Файл на скачивание всех этих 4х файлов вы найдете в конце статьи. Можете не читать а просто прокрутить статью внизу и скачать!

То, это означает, что ваш блог посещают с 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, например, да и посетителей своих уважаем), то о нагрузках на сервер нужно помнить всегда. И по возможности их снижать и избегать.

Например сегодня я просмотрел журнал и увидел 15 декабря в журнале зафиксировано около 100 ошибок 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)

Так вот, самым простейшим способом будет создать иконку, размером 57×57 px 60×60 px, назвать ее apple-touch-icon.png и поместить в корень сайта. При добавлении сайта на домашний экран, iOS сама скруглит ей края и наложит глянцевые эффекты. Если же, вы не хотите наложения этих эффектов (тем более, сейчас “плоский дизайн” в тренде), то следует создать еще и файл apple-touch-icon-precomposed.png. На него будет наложено только скругление.

Размеры иконок сверены и актуализированы на дату 02.11.2015. Буду ли я и дальше корректировать и обновлять статью – не знаю. Поэтому, прежде чем создавать эти иконки, обязательно сверьтесь с официальной документацией Apple, ссылку на которую я давал чуть выше. Также хочу отметить, что информация о формате precomposed актуальна только для операционных систем iOS ниже 7-й версии.

Но вышеописанный метод не совсем правильный, по нескольким причинам:

• мы понимаем, что устройства у всех разные;
• при таком способе, Android-девайсы не смогут поместить на домашний экран данную иконку.

Так что, мы пойдем правильным путем, а именно – вставкой простого html-кода.

Для начала нам нужно будет создать либо четыре файла с вышеуказанными размерами (этот вариант правильней), либо два файла: 144×144 px и 114×114 px 152×152 px и 120×120 px. После чего, их нужно поместить в корень сайта (или в любую удобную для вас директорию), а в head сайта – код:

Источник

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

Так вот, самым простейшим способом будет создать иконку, размером 57×57 px 60×60 px, назвать ее apple-touch-icon.png и поместить в корень сайта. При добавлении сайта на домашний экран, iOS сама скруглит ей края и наложит глянцевые эффекты. Если же, вы не хотите наложения этих эффектов (тем более, сейчас «плоский дизайн» в тренде), то следует создать еще и файл apple-touch-icon-precomposed.png. На него будет наложено только скругление.

Размеры иконок сверены и актуализированы на дату 02.11.2015. Буду ли я и дальше корректировать и обновлять статью — не знаю. Поэтому, прежде чем создавать эти иконки, обязательно сверьтесь с официальной документацией Apple, ссылку на которую я давал чуть выше. Также хочу отметить, что информация о формате precomposed актуальна только для операционных систем iOS ниже 7-й версии.

Но вышеописанный метод не совсем правильный, по нескольким причинам:

• мы понимаем, что устройства у всех разные;
• при таком способе, Android-девайсы не смогут поместить на домашний экран данную иконку.

Так что, мы пойдем правильным путем, а именно — вставкой простого html-кода.

Для начала нам нужно будет создать либо четыре файла с вышеуказанными размерами (этот вариант правильней), либо два файла: 144×144 px и 114×114 px 152×152 px и 120×120 px. После чего, их нужно поместить в корень сайта (или в любую удобную для вас директорию), а в head сайта — код:

В случае, если вам не нужны специфические эппловские эффекты, то:

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

Итог всех этих несложных манипуляций:

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

На этом все, друзья. В заключение, еще раз повторюсь: если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то хотя бы закиньте в корень сайта картинку (размером 57 на 57 60 на 60 пикселей) с названием «apple-touch-icon.png».

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

Источник