Как добавить favicon к своему WordPress сайту

Favicon – небольшое изображение, которое отображается рядом с заголовком вашего веб-сайта в браузере. Оно помогает пользователям идентифицировать ваш ресурс. Постоянные посетители сайта запомнят это изображение – оно будет ассоциироваться с вашим вебсайтом. Соответственно, узнаваемость вашего бренда повысится, что повлияет на доверие со стороны вашей аудитории. Одной из достаточно популярных ошибок при запуске блога является именно отсутствие favicon. В этой статье мы покажем, как добавить favicon к сайту WordPress.

Зачем добавлять favicon к WordPress-сайту?

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

favicons1

У большинства пользователей обычно открыто много вкладок в браузере. Чем больше вкладок, тем хуже виден заголовок вашего сайта. С помощью favicon пользователь может быстро опознать ваш сайт и перейти к соответствующей вкладке.

Как создать favicon

Favicon – это простое квадратное изображение. В идеале оно может иметь размеры либо 32×32 пикселей, либо 16×16 пикселей. Откройте Photoshop или любой другой графический редактор, создайте квадратное изображение 128х128 пикселей, чтобы можно было легко с ним работать. После создания нужного изображения вы можете затем изменить его размеры до 32×32 пикселей и сохранить его в формате PNG.

Даже учитывая тот факт, что большинство современных браузеров работает с favicon в формате PNG, старые версии IE этого не делают. Чтобы ваш favicon нормально отображался во всех современных браузерах, мы рекомендуем преобразовать его в 16×16 пикселей и сохранить в формате .ico. Чтобы преобразовать PNG-файл в .ico, вы можете использовать favicon generator от Dynamic Drive.

Добавление favicon к своему сайту

Загрузите свой favicon в корневой каталог вашего сайта с помощью FTP. После этого вы можете вставить следующий код в файл header.php темы:

<link rel="icon" href="http://www.wpbeginner.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.wpbeginner.com/favicon.ico" type="image/x-icon" />

Замените wpbeginner.com на URL вашего сайта. Если в вашей теме нет файла header.php или вы не можете найти его, не переживайте – для этого существует плагин. Установите и активируйте плагин Insert Headers and Footers. После активации плагина перейдите в раздел Параметры — Insert Headers and Footers и вставьте код, представленный выше, в секцию хэдера, после чего сохраните ваши настройки.

Если вы не хотите работать с FTP, то вы можете воспользоваться плагином All in One Favicon.

Также загрузить favicon можно и в разделе медиафайлов WordPress. Загружаете готовый favicon, получаем его URL, после чего вставляем этот URL вместо того, что указан в коде выше.

Блог про WordPress
Комментарии: 8
  1. Илья

    не знал о плагине, сделал самостоятельно фавикон и поместил в корневой каталог, все хорошо, НО вот только в поисковых запросах на яндексе мою иконку не отображало, пришлось добавлять строку с кодом в хэдер

    1. Дмитрий (автор)

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

  2. Дарья

    А я сделала фавикон случайно,даже не зная тогда еще,что это такое,нужен ли он и что даёт. Я только создала сайт, скачала шаблон для Вордпресса и разбиралась с интерфейсом методом тыка.В какой-то момент нашла в настройках самой темы кнопку «загрузить изображение в заголовок сайта»,дословно не помню,но смысл такой.После этого подготовила в Фотошопе картинку и загрузила,думая,что она будет отображаться в шапке главной страницы. Какого же было мое удивление,когда она появилась в браузере,рядом с адресом сайта))

  3. Эдвард

    Здравствуйте, Дмитрий! Как поживаете? Я тут с мелочным вопросом и забавным явлением. Заметил, что на моей службе рассылки на WordPress — https://mailing.easy-music-learning.ru/ фавикон не отображается. Когда нажимаю Customize -> Site Identity -> Site Icon и выбираю там значок, он не показывается. Но если сделать наоборот, нажать Remove — убрать, то он появляется. Как думаете, в чём может быть дело?

    1. Дмитрий (автор)

      Здравствуйте! Возможно, какой-то плагин тоже задает Favicon? У меня так дублировал иконку какой-то из SEO-плагинов.

      1. Эдвард

        Нашёл, в чём дело. В header.php шаблона оформления есть строчка, что и добавляет значок вида — Так что или убрать её, или не загружать значок в Customize. Иначе же они друг друга взаимоисключают. Вот такие дела! Правило «плюс» умножить на «плюс» здесь даёт «минус». :)

        1. Эдвард

          …значок вида — link rel=»icon» href=»https://mailing.easy-music-learning.ru/favicon.png» type=»image/png»

          1. Дмитрий (автор)

            Понял, спасибо за разъяснение!

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

Получать новые комментарии по электронной почте.