Как правильно добавить фавикон на сайт

Как правильно добавить фавикон на сайт

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

Фавикон ( favicon) — это небольшое изображение (иконка) которое вы видите на вкладке браузера при посещении какой-либо веб-странички или добавления ее в избранное. У каждого уважающего себя веб-ресурса обязательно должна быть своя иконка. Если фавикона нет, то пользователю будет сложно опознать сайт в закладках. А в сниппете поисковой выдачи на его месте будет пустое место. Сделать фавикон можно из любого изображения с хорошим разрешением. Он должен быть в одной цветовой гамме с сайтом и состоять из сокращенного названия сайта, либо отражать суть ресурса при помощью символики.

Если раньше достаточно было иконки одного формата ICO, размером 16х16, 32х32 и 48х48, то сейчас под каждое устройство, браузер и систему требуется указать цвет, атрибуты rel и sizes — отношение ссылки изображения к устройству и его размер, имя сайта, манифест для устройств на Андроид, файл browserconfig.xml для плиток Windows 8-10 и SVG-иконку для браузера Сафари. Актуальный формат фавикона в настоящий момент — PNG.

Генерация и добавление фавикона.

Для создания иконки сайта под все устройства и со всеми необходимыми файлами и атрибутами намного удобнее будет воспользоваться бесплатным онлайн-генератором фавикона — realfavicongenerator.net. После добавления картинки будущего фавикона в генератор, необходимо произвести настройки отображения внешнего вида и поддержки всех устройств. После этого генератор создаст все размеры картинки и код, который нужно будет вставить в раздел сайта внутри тега head. Но у генератора есть минус. Он генерирует не весь код. Поэтому некоторые теги придется добавить вручную указав путь до фавикона.

Генерация и добавление фавикона

Папку с иконками, манифестом и xml файлом надо будет загрузить в корень сайта. В тегах link и meta указать путь до этой папки. Проверить правильную установку фавикона можно на этом же сайте. Он подскажет каких размеров не хватает. Проверку манифеста можно провести валидатором manifest-validator.appspot.com.

На сайте WordPress фавикон создается автоматически при добавлении изображения на вкладке «Свойства сайта» в кастомайзере. Но автоматически генерируемые иконки имеют всего четыре формата. Поэтому лучше уберите стандартный вывод и укажите фавиконы таким же способом, как описано выше. Можно загрузить их и в папку wp-content, но в этом случае в теге head придется подключать изображения через функцию:

href="<?php bloginfo("template_url") ;?>/images/favicon-16x16.png"
СтраUz
Читайте также
Привет! Я Натали Мамбетова.

Занимаюсь разработкой сайтов, блогов, интернет-магазинов, лендингов на WordPress. Оказываю платные помощь и консультации. Являюсь сертифицированным партнером TemplateMonster по CMS системе WordPress, имею сертификат этой компании подтверждающий мои навыки в работе с данной системой.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© СтраUz 2018. Все права защищены. Копирование разрешено только с указанием гиперссылки на источник.
Сделано с ❤
Заказать сайт