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

Дата публикации:Август 30, 2013

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 вместо того, что указан в коде выше.

Источник: wpbeginner.com

Поделиться

3 комментария

  1. Илья says:

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

    • Дмитрий Алёшин says:

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

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

Оставить комментарий

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

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