Здравствуйте! В этом уроке я расскажу Вам, как установить иконку или favicon на свой сайт WordPress. Многие думают, что это сложно или еще что-то… Просто я не могу объяснить тот факт, что у большинства сайтов нет такой иконки, особенно это касается молодых ресурсов.

Для тех, кто не знает, favicon – это значок или иконка блога (сайта) либо отдельной веб-страницы, которую можно увидеть в адресной строке браузера, в журнале, в закладках, на вкладках и т. д. Вообще советую делать свои фавиконы, так как они — отображение Вашей креативности и индивидуальности :).

Установка favicon на WordPress

Вот где можно увидеть иконки сайта:

wordpress favicon

wordpress favicon

Перейдем непосредственно к установке фавикона.

Как сделать фавикон

Для начала нужно подготовить какую-то картинку. Можете воспользоваться Photoshop, можно просто найти картинку в любых источниках или выбрать подходящий фавикон, например, здесь. Обратите внимание, что размер изображения не важен, так как дальше мы будем иго уменьшать до нужного с помощью генераторов.

Вот сейчас и пойдем в любой из этих генераторов favicon:

Я буду делать фавикон с помощью сервиса favicon.ru

Захожу и выбираю нужное изображение, указываю «значок 48х48 для дескопа» и жму «Создать favicon.ico».

wordpress favicon

Далее нам предлагают скачать фавикон, сделаем это.

wordpress favicon

Как загрузить и установить favicon на WordPress

Загрузка фавикон

Для начала давайте загрузим скачанный ранее favicon.ico на наш сайт WordPress.

Идем в админку и выбираем «Медиафайлы» => «Добавить новый».

wordpress favicon

Жмем кнопку «Выберите файлы» и выбираем favicon.ico.

wordpress favicon

Вот загруженный мной файл в библиотеке:

wordpress favicon

Жмем «Изменить». Для этого наводим на файл и выбираем «Изменить»:

wordpress favicon

На этой странице нам нужна ссылка на файл.

wordpress favicon

Скопируем ее в буфер обмена и вставим, например, в Блокнот.

Установка фавикон

Идем «Внешний вид» => «Редактор».

wordpress favicon

Здесь справа выбираем файл «header.php».

wordpress favicon

В файле ищем открывающий тег <head>.

wordpress favicon

И сразу после него вставляем такой код:

<link href="ССЫЛКА НА ФАЙЛ" rel="shortcut icon" type="image/x-icon"; />

В нем фразу «ССЫЛКА НА ФАЙЛ» нужно заменит ссылкой на фавикон, которую Вы скопировали ранее в Блокнот.

После этого уже готовый код нужно вставить сразу после открывающего тега <head>.

wordpress favicon

Жмем «Обновить файл».

wordpress favicon

Вот и все! Фавикон установлен. С Вами был Сергей Романчук :). Удачи!

На десерт сегодня креативное видео от Apollo-8: