Favicon для сайта – все платформы и устройства

245

Ранее мы писали о том, как создать фавикон в программе Adobe Photoshop. Теперь настала очередь более прогрессивного материала – узнать о том, как подключить favicon к сайту и, самое главное, для всех возможных платформ и мобильных систем. Бонусом прилагается оптимизированный экшен, который поможет осуществить автоматизацию наших последующих действий.

Подготовка шаблона логотипа в PSD формате

Итак, сперва нам необходимо подготовить будущий шаблон (логотип, который будет отображаться вверху рядом с адресом нашего сайта). Открываем его с помощью программы Adobe Photoshop и смотрим при переходе в пункт меню Image-Image Size (Изображение – Размер изображения) истинные параметры фотографии – нас интересует прежде всего разрешение снимка, которое обязательно меняем на 300 пикселей на дюйм, чтобы впоследствии производить операции с новым документом и сохранить все пропорции.
1. Открываем документ и смотрим его размеры:
Favicon для сайта

2. Меняем при необходимости разрешение снимка на 300 пикселей на дюйм:
Favicon для сайта

Favicon для сайта

3. Теперь произведём кадрирование, чтобы изображение получило соотношение 1 к 1 – этот пункт выбираем в качестве главного для удаления лишних частей данного логотипа.
Favicon для сайта

4. Проверяем то, что мы сделали, открыв прежний пункт меню – Image-Image Size (Изображение – Размер изображения) и убедившись в правильности соотношения сторон (должен получиться квадрат).
Favicon для сайта

Форматы иконок для каждого из девайсов

Нужно определённо идти в ногу со временем, а это планшеты и ультра современные ноутбуки и мобильные устройства. Поэтому нам придётся уточнить какие же именно значки устанавливать в качестве фавикона. Ниже в таблице мы постарались ответить на этот вопрос.

Устройство Экран Версия iOS Размер иконки
iPhone Classic 6 и ниже 57×57
7 60×60
Retina 6 и ниже 114×114
7 120×120
6 Plus 8 и выше 180×180
iPad Classic 6 и ниже 72×72
7 76×76
Retina 6 и ниже 144×144
7 152×152

Прежняя иконка размерами 57х57 пикселей для Apple Touch icon на блестящем Retina iPad. Слишком мутно и не перспективно.
Apple Touch icon

Огромная иконка размерами 152х152 для устройства Apple Touch icon на Retina iPad. Очень аккуратно и красиво.
Apple Touch icon

Использование кода и объявление PNG файлов в качестве иконок сайта

Чтобы все предыдущие действия заработали у нас на сайте, необходимо предопределить иконки и прописать их внутри основного файла в шапке.

Чтобы преобразовать в нужный нам вариант логотипы, их сначала необходимо подготовить. Для этого просто создайте шаблон при помощи экшена (ссылка внизу статьи + видео как им пользоваться), а также сохраните каждый файл в формате .PNG в том разрешении, которое указано выше. Далее пропишите код и наслаждайтесь результатом на всех устройствах.
001

002

003

Помимо этого, здесь можно узнать корректность вводимых данных и их актуальность. Также для правильного отображения иконки favicon.ico в браузере Chrome потребуется записать код: