В процессе работы я столкнулась с довольно простой задачей — как сделать, чтобы в мобильной версии браузера Safari корректно отображался фавикон. Я делала сайт на WordPress, загрузила нужное мне изображение через админку, все сохранила, но результат оказался не таким, как я ожидала. Если в Google Chrome, Mozilla Firefox и других браузерах фавикон отображался нормально, то в Safari на Айфоне вместо него был стандартный логотип WordPress, который мы видим, когда иконка для сайта не выбрана.

Я стала разбираться. Полезной оказалась статья на Хабре, где подробно описано, что нужно сделать, чтобы фавикон правильно отображался на устройствах от Apple. Здесь я кратко расскажу только ключевые моменты.
- Находим или создаем png файл.
- Через FileZilla или другой FTP-клиент загружаем изображения в корневой каталог сайта. Для новичков отмечу, что корень — это та папка, где лежит файл Index.php
- Для фавикона нам потребуется сразу несколько файлов с изображениями разных размеров:
- 57×57
- 60×60
- 72×72
- 76×76
- 114×114
- 120×120
- 144×144
- 152×152
- 180×180
Это связано с тем, что разные устройства отличаются в размере и для каждой диагонали требуется свой размер иконки.
Сразу отмечу, что я брала только одно изображение наибольшего размера, то есть 180×180 пикселей, так как если нужный размер отсутствует, используется изображение бОльшего размера, нежели рекомендуемый. Возможно, стоило потратить больше времени и подготовить фавиконы для каждого размера, если знаете, как правильно — напишите об этом в комментариях к посту.
4. В админке сайта переходим в раздел «Внешний вид — Редактор тем», выбираем файл «header.php» и между тэгами head дописываем ссылки на изображения. Обязательно прописываем атрибут rel=’apple-touch-icon’
У меня получилось так:
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
Обратите внимание, что путь к файлу нужно указывать не абсолютный, а относительно Index.php, то есть корня сайта.
5. Когда будете проверять, все ли работает, убедитесь, что вы очистили кэш в мобильном браузере. Можно просто открыть вкладку в режиме Инкогнито.
Пожалуйста, напишите в комментариях, помог ли вам этот способ?
0 комментариев