Если Ваш сайт достаточно популярен, то многие пользователи заходят на него с телефонов и планшетов.
При этом многие добавляют его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо:
Первым делом, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.
Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти "картинки" под разные устройства.
Второе, необходимо сделать иконки разных размеров для разных устройств:
для старых iPhone размер иконки должен быть 57х57, для новых, начиная с 4-го действуют следующие размеры:
Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок , чтобы эффект не применялся - нужно к именам файлам добавить -precomposed.png
Android:
Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png и несмотря на наличие в названии слова "apple"
ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на "рабочий стол".
В заключении - если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием "apple-touch-icon.png". Это самый простейший способ.
Для быстрого автоматического создания иконок для сайта можно использовать сервис ICONOGEN, укажите файл с иконкой и сервис быстро сделает иконки разных размеров: Файлы можно скачать архивом, сервис так же генерирует html код для вставки в шаблон сайта
Ну а теперь более подробнее:
Начнём с иконок для ОС Android, нужно указать в заголовке инструкции:
Таким образом мы объявляем четыре иконки разных размеров для разных случаев и разных разрешений экрана. В добавление к этому, если хотите, чтобы ваш сайт можно было вынести на главный экран и у него также была красивая иконка, то придётся ещё определить файл-манифест:
Ну и напоследок: в версии Android Lollipop появилась возможность перекрашивать интерфейс браузера в цвета сайта, для этого нужно добавить в заголовок страницы ещё один метатег.
Код
<meta name="theme-color" content="#474747">
Когда будете делать сайт, не пренебрегайте этой возможностью, так как это сделает сайт чуточку лучше. И ещё одна ссылка realfavicongenerator - ресурс позволяет значительно упростить работу со всеми этими иконками.