Как сделать фавикон для Safari

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

Я стала разбираться. Полезной оказалась статья на Хабре, где подробно описано, что нужно сделать, чтобы фавикон правильно отображался на устройствах от Apple. Здесь я кратко расскажу только ключевые моменты.

1. Находим или создаем png файл.
2. Через FileZilla или другой FTP-клиент загружаем изображения в корневой каталог сайта. Для новичков отмечу, что корень — это та папка, где лежит файл Index.php
3. Для фавикона нам потребуется сразу несколько файлов с изображениями разных размеров:

• 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. Когда будете проверять, все ли работает, убедитесь, что вы очистили кэш в мобильном браузере. Можно просто открыть вкладку в режиме Инкогнито.

Пожалуйста, напишите в комментариях, помог ли вам этот способ?