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

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

0

Ранее мы писали о том, как создать фавикон в программе 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Размер иконки
iPhoneClassic6 и ниже57×57
760×60
Retina6 и ниже114×114
7120×120
6 Plus8 и выше180×180
iPadClassic6 и ниже72×72
776×76
Retina6 и ниже144×144
7152×152

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

Apple Touch icon

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

Apple Touch icon

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

Чтобы все предыдущие действия заработали у нас на сайте, необходимо предопределить иконки и прописать их внутри основного файла в шапке. <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

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

001

002

003

Помимо этого, здесь можно узнать корректность вводимых данных и их актуальность. Также для правильного отображения иконки favicon.ico в браузере Chrome потребуется записать код:
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">