File does not exist: …/apple-touch-icon.png …/apple-touch-icon-precomposed.png

Всевозможные гаджеты и девайсы уже очень плотно вошли в нашу жизнь. У большого числа людей наверняка есть либо смартфон либо планшет на распространенных мобильных операционных системах iOS или Android. Многие сейчас уже используют их в качестве альтернативы настольным ПК или ноутбукам, т.к. их возможности стали очень широкими.
apple_touch_precomposed_and_no

Так вот к чему это. При заходе на сайт с подобного девайса мобильный браузер запрашивает небольшой ярлычок apple-touch-icon.png или apple-touch-icon-precomposed.png, для возможной дальнейшей установки красивой закладки на рабочем столе устройства.
Для разных устройств размер ярлыка разный, поэтому необходимо несколько вариантов.
Создаем свой ярлычок и делаем его в 7и размерах (apple-touch-icon-precomposed.png = apple-touch-icon-57×57-precomposed.png) и 2х вариантах (можно сделать одинаковыми, т.к. разница между apple-touch-icon-precomposed.png и apple-touch-icon.png в дополнительной тени).
Загружаем их в корень сайта.
Вставяем между тегами head подключение ярлыков.

<head>
...
<!-- iPad с Retina дисплеем iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<!-- iPad с Retina дисплеем iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<!-- iPhone с Retina дисплеем iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<!-- iPhone с Retina дисплеем iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<!-- the iPad mini, 1е и 2е поколение iPad после iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<!-- the iPad mini, 1е и 2е поколение iPad до iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+: -->
<link rel="apple-touch-icon-precomposed"  sizes="57x57" href="apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon"  sizes="57x57" href="apple-touch-icon-57x57.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
...
</head>

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

В случае если у вас много сайтов и вы не хотите для каждого рисовать отдельный ярлык, можно сделать один какой нибудь общий и подключить через апач (на примере Centos).
создадим в /etc/httpd/conf.d/apple-icon.conf с содержимым

Alias /apple-touch-icon-152x152-precomposed.png /usr/share/apple-icon/apple-touch-icon-152x152-precomposed.png
Alias /apple-touch-icon-152x152.png /usr/share/apple-icon/apple-touch-icon-152x152.png
Alias /apple-touch-icon-144x144-precomposed.png /usr/share/apple-icon/apple-touch-icon-144x144-precomposed.png
Alias /apple-touch-icon-144x144.png /usr/share/apple-icon/apple-touch-icon-144x144.png
Alias /apple-touch-icon-120x120-precomposed.png /usr/share/apple-icon/apple-touch-icon-120x120-precomposed.png
Alias /apple-touch-icon-120x120.png /usr/share/apple-icon/apple-touch-icon-120x120.png
Alias /apple-touch-icon-114x114-precomposed.png /usr/share/apple-icon/apple-touch-icon-114x114-precomposed.png
Alias /apple-touch-icon-114x114.png /usr/share/apple-icon/apple-touch-icon-114x114.png
Alias /apple-touch-icon-76x76-precomposed.png /usr/share/apple-icon/apple-touch-icon-76x76-precomposed.png
Alias /apple-touch-icon-76x76.png /usr/share/apple-icon/apple-touch-icon-76x76.png
Alias /apple-touch-icon-72x72-precomposed.png /usr/share/apple-icon/apple-touch-icon-72x72-precomposed.png
Alias /apple-touch-icon-72x72.png /usr/share/apple-icon/apple-touch-icon-72x72.png
Alias /apple-touch-icon-57x57-precomposed.png /usr/share/apple-icon/apple-touch-icon-57x57-precomposed.png
Alias /apple-touch-icon-57x57.png /usr/share/apple-icon/apple-touch-icon-57x57.png
Alias /apple-touch-icon-precomposed.png /usr/share/apple-icon/apple-touch-icon-precomposed.png
Alias /apple-touch-icon.png /usr/share/apple-icon/apple-touch-icon.png

и в папку /usr/share/apple-icon загружаем картинки. Далее рестартим апач.

Или аналог для нгикс.
Добавляем новый location в блок server:

location ^~ /apple-touch-icon {
  root /usr/share/apple-icon/$1;
}

Теперь если открыть любой свой_сайт.ру/apple-touch-icon.png картинка работает, ошибки нет.

2 комментария

Аватар

Ольга on 02.04.2014 at 23:12.

Миллион статей перерыла и нигде не нашла толковой информации. Наконец вы написали эту статью — специально для меня :) Очень много пользователей заходили на мой сайт с iPad и все ошибку выдавало, но теперь порядок. Спасибо за статью для чайников, таких как я :)

Ответить

manager

manager on 02.04.2014 at 23:16.

стараемся ;)

Ответить

Скажите свое мнение

ваш email не публикуется. обязательно *

;-) :yawn: :whew: :toivo: :tmi: :time: :thinking: :talking: :sweating: :swear: :sun: :star: :smoke: :smirk: :sleepy: :skype: :shock: :shake: :rofl: :rain: :punch: :puke: :poolparty: :pizza: :phone: :party: :oops: :nod: :no: :ninja: :neutral: :nerd: :music: :muscle: :mrgreen: :movie: :mooning: :mmm: :middlefinger: :makeup: :mail: :mad: :lol: :lipssealed: :kiss: :itwashtme: :inlove: :idea: :hi: :heidy: :heart: :headbang: :happy: :handshake: :giggle: :fubar: :flower: :evilgrin: :emo: :dull: :drunk: :drink: :doh: :devil: :dance: :cry: :cool: :coffie: :clapping: :cash: :call: :cake: :bug: :brokenheart: :bow: :blush: :beer: :bear: :bandit: :arrow: :angry: :angel: :^) :???: :?: :-| :-o :-P :-D :-) :-( :!:

 

*

code

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.