Фавикон для сайта: инструкция по установке для новичков

Фавикон для сайта Работа с изображениями
Что нужно знать начинающему вебмастеру о favicon? Что это такое и как правильно установить фавикон для сайта на WordPress?

Фавикон для сайта — что это?

Фавикон (favicon от «favorites icon») — иконка веб-сайта, которая отображается перед его названием. Это миниатюрное изображение играет огромное значение для узнаваемости сайта. Как правило, в качестве favicon используется уменьшенная копия логотипа, в ряде случаев он упрощается или заменяется на другое изображение.

Фавикон и логотип на веб-сайте
Расположение фавикона и логотипа на веб-сайте

Секрет идеального favicon — простота и запоминаемость, он должен быть понятным даже при размере всего лишь 16х16 пикселей. Именно эта миниатюрное изображение помогает быстро понять пользователю, какой сайт находится в данной вкладке.

Кроме того, иконка должна хорошо смотреться как на белом, сером так и чёрном фонах.

Зачастую значок вписывается в кружочек или квадратик, но может быть и вырезанным изображением. В качестве favicon рекомендуется взять логотип, первые буквы названия сайта или иконку, отображающую его суть.

Где отображается фавикон?

Созданию иконки нужно уделить должное внимание, так же как и логотипу. Это показатель качества сайта, его уникальности и профессиональности.

Фавикон сопровождает сайт и отображается во многих местах:

  • в открытой вкладке
  • во вкладке «Избранное»
  • в поиске Яндекса
  • в качестве значка на рабочем столе компьютера, планшета и мобильного устройства

Какого размера и формата должен быть фавикон для сайта?

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

Именно поэтому раньше для фавикона использовался формат .ICO, который представляет собой набор нескольких размеров изображений, но это уже считается устаревшим вариантом.

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

Поэтому наиболее подходящий вариант формата для иконки сайта сейчас — .PNG. При этом создаётся несколько размеров под разные устройства.

Форматы изображений .JPG и .GIF для фавикон допускаются, но это не лучшее решение.

Не рекомендуется использовать анимированные значки.

Качественный фавикон-комплект — это набор иконок нескольких размеров: 16х16, 32х32, 150х150, 192х192 и 512х512 пикселей и различных форматов: ico, png, svg.

Как создать фавикон?

Подходящую картинку можно либо найти готовую либо создать в любом графическом редакторе. Сделайте её более крупной, например 512х512 пикселей и сохраните в .png формате.

Загрузите данное изображение в Favicon Generator, который автоматически сгенерирует необходимый набор картинок.

Загрузите выбранную картинку в Favicon Generator

Преимущество этого сервиса в том, что Вы можете подкорректировать иконку под каждый браузер отдельно:

  • задать фон
  • отбросить тень
  • скруглить края квадрата вплоть до кружочка
  • отрегулировать размер иконки под значок
  • добавить подпись к значку

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

Рассмотрим настройки на конкретном примере: фавикон для SiteFromZero.

Для десктопных браузеров я всё оставила без изменений:

Favicon for Desktop Browsers

Для iPhone и iPad заменила чёрный фон на белый:

Коррекция иконки под iPhone и iPad

Для Android я отбросила тень и добавила надпись SiteFromZero:

Отображение иконки сайта для Android

Для Windows Metro можно оставить оригинальный фавикон или создать его белый силуэт:

Фавикон для Windows

Для macOS Safari оставила без изменений:

Фавикон для Safari

Набор картинок рекомендуется загружать в корень сайта, поэтому выберите этот пункт и нажмите кнопку «Сгенерировать иконки и HTML-код»:

Настройки для создания иконок вебсайта

Теперь нужно скачать набор иконок и добавить код на сайт.

Инструкция по установке фавикон на сайт

Давайте для начала распакуем архив и посмотрим, что мы получили. В данный набор входят картинки как разных размеров так и различных форматов:

Набор иконок, созданный фавикон генератором

Данный сервис не накладывает никакие ограничения на использование сгенерированных иконок, Вы можете смело разместить их на свой веб-сайт.

Favicon Generator не имеет права использовать Ваш фавикон в своих целях без Вашего личного согласия.

Не используйте изображения, защищённые авторскими правами! Вы несёте полную ответственность за загруженную картинку.

Как установить фавикон на WordPress сайт?

После установки WordPress в качестве иконки автоматически используется логотип WP. Наша задача поменять иконку на свою:

Так выглядит фавикон в закладке браузера
Отображение закладок браузера до и после установки иконки сайта

Стандартная загрузка фавиконки от WP

Чтобы установить иконку сайта нужно в панели управления WordPress перейдите по ссылке Внешний вид / Настроить, Вас перебросит в кастомайзер, где нужно найти пункт «Свойства сайта«: именно здесь загружается фавикон. Это самый простой вариант установки favicon, однако не самый лучший. Давайте посмотрим, что предлагает классический метод.

Я загрузила изображение с названием favicon.png размером 512х512 пикселей и получила следующий набор иконок:

Установка иконки сайта через панель Настройка/Свойства сайта
Набор иконок полученный стандартным способом

Как видите, иконка подгрузилась и отображается во вкладке браузера. Яндекс.Вебмастер также проиндексировал полученный фавикон. Казалось бы всё отлично…

Однако в корне сайта не создалось никакое изображение, весь набор картинок расположился в общей папке изображений сайта. При проверке сайта в PageSpeed Insights появилась ошибка о неправильной установке фавикон:

Нужно прописать ширину и высоту картинки, но я советую удалить данную иконку сайта и сделать корректную её установку.

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

А теперь давайте скачанный пакет иконок (созданный в Favicon Generator) распакуем и загрузим с помощью FileZilla на наш сайт в папку public_html

Загрузка Favicon package в корень сайта с помощью FileZilla

А скопированный в генераторе код вставим в <head>. Я воспользовалась плагином Clearfy Pro, он позволяет добавлять код прямо с WP:

Код, полученный Фавикон-генератором устанавливается в head

Проверка фавикона

Favicon Generator позволяет не только сгенерировать набор картинок и код, но и проверить правильность их установки на веб-сайт. Введите адрес сайта в Favicon Checker и нажмите кнопку Check Favicon:

Проверка фавикон

Вы получите подробный анализ для всех популярных платформ, я приведу здесь только результат для десктопных браузеров:

Проверка фавикона для десктопных браузеров

Давайте ещё раз убедимся в правильности отображения нашей иконки в главных поисковиках Яндекс и Google, для этого нужно просто перейти по ссылкам (не забудьте заменить адрес сайта на свой):

  • https://favicon.yandex.net/favicon/sitefromzero.ru
  • https://www.google.com/s2/favicons?domain=sitefromzero.ru

Действительно, всё отображается корректно.

Индексация фавиконки

Индексацией favicon занимаются специальные роботы и это может занять несколько недель. С нашей стороны мы должны проверить доступность изображения для индексации.

Так, Яндекс Вебмастер предлагает простой способ проверки иконки для своего робота. Вот что мы можем прочитать в Яндекс Справке в разделе Оформление результатов поиска «Как установить фавиконку«:

Инструкция по проверке доступности фавикон индексации

Переходим в Проверку ответа сервера и вводим адрес сайта:

Проверка фавикона Яндекс ботом

Как видим, файл доступен по прямой ссылке: ответ сервера 200 OK, что ещё раз подтверждает правильность установки фавиконки.

Теперь нужно только подождать пока YandexBot придёт на сайт и проиндексирует favicon тогда в сниппетах Яндекса будет красоваться Ваша уникальная иконка:

Образец сниппета в Яндексе

Если вдруг Вы надумаетесь изменить фавиконку, то в поисковике она появится только после её индексации роботом Яндекса, а на это нужно время!

Заключение

Итак, сегодня мы разобрались, что такое фавикон для сайта и чем он отличается от логотипа, как правильно установить его на веб-сайт и проверить корректность отображения на различных платформах.

Надеюсь моя статья была полезной и на Вашем сайте теперь красуется маленькая эмблема. Делаем веб-сайт с душой и профессионально! А я буду писать для Вас новые рекомендации и делиться своим личным опытом.

Поделиться с друзьями
Светлана Стецко

Буду рада помочь новичкам разобраться с базовыми понятиями и настройками. Предлагаю пошаговую инструкцию создания качественного блога без знания программирования.

Оцените автора
( Пока оценок нет )
SiteFromZero'21
Добавить комментарий