Блондинка с электро......
Join Date: Dec 2007
Location: На краю Вселенной
Posts: 21,901
Версия vB: 3.8.x
Пол: 
Reputation:
Гуру 20494
Репутация в разделе: 5987
|
404: apple-touch-icon.png
5
Любите ли вы читать логи?  Логи ошибок, в основном - еррор.лог
Повторюсь, ибо говорила это уже неоднократно: весьма занимательное чтиво, рекомендую
File does not exist: /home/*****/apple-touch-icon-precomposed.png
File does not exist: /home/*****/apple-touch-icon.png
Это не что-то новое, я давно их наблюдаю, эти записи, вот руки дошли разобраться
Кто уже разбирался - а почему не опубликовали?
так... короткая версия:
Quote:
Если в отчетах (логах) своего сервера вы обнаруживаете ошибки 404, которые связаны с тем, что не найдены файлы "apple-touch-icon.png" и "apple-touch-icon-precomposed.png", то это означает, что ваш блог посещают с iPhone, iPad или iPod Touch. Эти устройства ищут на сайте данные файлы для того, чтобы посетитель смог сохранить "закладку" сайта на рабочем столе (называется он Home Screen) своего iГаджета. Официально они называются Web Clip Icons.
То есть, эти файлы – это и есть те иконки, которые будут отображаться на Home Screen`е iДевайса. Что самое любопытное - эти файлы "ищутся" не только в момент добавления сайта на домашний экран, а при каждом посещении. И если файлов apple-touch-icon.png или apple-touch-icon-precomposed.png не существует, то сервер фиксирует ошибку 404 (не найден файл, к которому было обращение), а это уже отдельная операция, которая требует определенного действия (запись на жесткий диск). И как следствие – это дополнительная нагрузка на сервер.
|
Длинная и весьма полезная статья, цитата из неё: http://bloginfo.biz/apple-touch-icon.html
кому лениво читать всю статью, ещё цитата:
Quote:
Так что, давайте исправлять ситуацию.
Первым делом, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.
Теперь нужно понять: какой размер в пикселях необходим для иконки, и куда ее помещать?
Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти "картинки" под разные устройства. На данный момент, в официальной эппловской документации приняты следующие размеры:
57 x 57 px - для iPhone, iPod touch
114 x 114 px - для iPhone, iPod touch высокого разрешения (Retina)
72 x 72 px - для iPad
144 x 144 px - для iPad высокого разрешения (Retina)
Так вот, самым простейшим способом будет – создать иконку, размером 57x57 px, назвать ее apple-touch-icon.png, и поместить в корень сайта. При добавлении сайта на домашний экран, iOS сама скруглит ей края и наложит глянцевые эффекты. Если же, вы не хотите наложения этих эффектов (тем более, сейчас "плоский дизайн" в тренде), то следует создать еще и файл apple-touch-icon-precomposed.png. На него будет наложено только скругление.
Но вышеописанный метод не совсем правильный, по нескольким причинам:
мы уважаем своих посетителей, и понимаем, что i-устройства у всех разные;
при таком способе, Android-девайсы не смогут поместить на домашний экран данную иконку.
Поэтому, мы пойдем правильным путем, а именно, вставкой простого html-кода.
Для начала нам нужно будет создать либо четыре файла с вышеуказанными размерами, либо два файла: 144x144 px и 114x114 px. После чего, нужно поместить их в корень сайта (или в любую удобную для вас директорию), а в header сайта поместим код:
Code:
<!-- Standard iPhone, iPod touch -->
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-114.png" />
<!-- Retina iPhone, iPod touch -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114.png" />
<!-- Standard iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-144.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144.png" />
Комментарии можете удалить, их я специально написал для понимания.
Ну, а в случае, если вам не нужны специфические эппловские эффекты, то:
Code:
<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", и дополнительной, пусть и не очень большой, нагрузки на хостинг.
|
Информация про размер этих apple-touch-icon, возможно, уже устарела, статья-то позапрошлогодняя... если кто в курсе, что нам сейчас актуально - не поленитесь, расскажите
То есть, по сути, эта apple-touch-icon - аналог фавикона, только большой... ооочень большооой...
что-то вспомнилось:
так... к чему это я... хотела даже тему назвать Make my favicon bigger 
вот я, например, не рисую... 
предлагаю в этой теме организовать небольшую взаимопомощь 
у нас на саппорте очень много людей с прямыми руками, отличным художественным вкусом и фотошопом, найдутся ли желающие накреативить иконки для тех, у кого с рисованием проблемы?
Если да - то я первый "заказчик"
мне бы хотелось apple-touch-icon'ок для http://domovyat.net/
|