Ранее мы писали о том, как создать фавикон в программе Adobe Photoshop. Теперь настала очередь более прогрессивного материала - узнать о том, как подключить favicon к сайту и, самое главное, для всех возможных платформ и мобильных систем. Бонусом прилагается оптимизированный экшен, который поможет осуществить автоматизацию наших последующих действий.
Подготовка шаблона логотипа в PSD формате
Итак, сперва нам необходимо подготовить будущий шаблон (логотип, который будет отображаться вверху рядом с адресом нашего сайта). Открываем его с помощью программы Adobe Photoshop и смотрим при переходе в пункт меню Image-Image Size (Изображение - Размер изображения) истинные параметры фотографии - нас интересует прежде всего разрешение снимка, которое обязательно меняем на 300 пикселей на дюйм, чтобы впоследствии производить операции с новым документом и сохранить все пропорции.
1. Открываем документ и смотрим его размеры:
2. Меняем при необходимости разрешение снимка на 300 пикселей на дюйм:
3. Теперь произведём кадрирование, чтобы изображение получило соотношение 1 к 1 - этот пункт выбираем в качестве главного для удаления лишних частей данного логотипа.
4. Проверяем то, что мы сделали, открыв прежний пункт меню - Image-Image Size (Изображение - Размер изображения) и убедившись в правильности соотношения сторон (должен получиться квадрат).
Форматы иконок для каждого из девайсов
Нужно определённо идти в ногу со временем, а это планшеты и ультра современные ноутбуки и мобильные устройства. Поэтому нам придётся уточнить какие же именно значки устанавливать в качестве фавикона. Ниже в таблице мы постарались ответить на этот вопрос.
| Устройство | Экран | Версия iOS | Размер иконки |
|---|---|---|---|
| iPhone | Classic | 6 и ниже | 57x57 |
| 7 | 60x60 | ||
| Retina | 6 и ниже | 114x114 | |
| 7 | 120x120 | ||
| 6 Plus | 8 и выше | 180x180 | |
| iPad | Classic | 6 и ниже | 72x72 |
| 7 | 76x76 | ||
| Retina | 6 и ниже | 144x144 | |
| 7 | 152x152 |
Прежняя иконка размерами 57х57 пикселей для Apple Touch icon на блестящем Retina iPad. Слишком мутно и не перспективно.
Огромная иконка размерами 152х152 для устройства Apple Touch icon на Retina iPad. Очень аккуратно и красиво.
Использование кода и объявление PNG файлов в качестве иконок сайта
Чтобы все предыдущие действия заработали у нас на сайте, необходимо предопределить иконки и прописать их внутри основного файла в шапке.
Чтобы преобразовать в нужный нам вариант логотипы, их сначала необходимо подготовить. Для этого просто создайте шаблон при помощи экшена (ссылка внизу статьи + видео как им пользоваться), а также сохраните каждый файл в формате .PNG в том разрешении, которое указано выше. Далее пропишите код и наслаждайтесь результатом на всех устройствах.
https://www.youtube.com/embed/-i_uJljhu9Y
Помимо этого, здесь можно узнать корректность вводимых данных и их актуальность. Также для правильного отображения иконки favicon.ico в браузере Chrome потребуется записать код:
Статья была полезна?
