Favicon для сайта Wordpress

Favicon для сайта WordPress можно установить разными способами. Я уже рассказывал, как установить иконку на сайт WP при помощи плагинов и установить специальные коды в шаблон сайта. В этой статье я опишу еще один способ установки favicon для сайта WordPress. Установим специальный код в файл functions.php шаблона.

Favicon для сайта WordPress (favorites icon) или иконка сайта, придает сайту индивидуальность и, через узнаваемость закладок, может влиять на его посещаемость. Однако, неудачно установленный favicon может увеличивать время загрузки сайта. В этой статье рассмотрим установку иконки сайта через файл functions.php.

Новое: Установка иконки favicon на WordPress в 2022-2023 году

Шаг 1.

Подготовьте три одинаковые картинки иконки в разных форматах:

Для Яндекс: файл картинки в формате svg размером 120х120, используйте конвертер, например, convertio.co/ru;
Для Google: файл картинки в формате ico размером кратным 48х48 (96х96, 144х144) или svg в любом формате (подойдёт иконка для Яндекс)
Для мобильных платформ: в формате png размером 180х180.
Сожмите иконки в любом онлайн-сервисе оптимизации картинок например, iloveimg.com/ru.

Шаг 2.

Загрузите все иконки в корневой каталог своего сайта по FTP или файловый менеджер хостинга.

Шаг 3.

Используя плагин типа «Head and Footer Scripts Inserter» добавьте в элемент (раздел) head вашего сайта следующие три ссылки (для Google, Яндекс и мобильных платформ):

<link rel="shortcut icon" href="https://ваш-домен/icon_44x44.ico">

<link rel="icon" href="https://ваш-домен/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="https://ваш-домен/icon_180x180.png">

Favicon для сайта WordPress тоже работают

Одним из вариантов установки иконки является размещение иконки в корневом каталоге, с добавлением кода в файл functions.php. Для этого способа установки favicon на сайт нужно сделать три шага.

Сделать картинку favicon.ico на любом генераторе favicon;
Загрузить картинку favicon.ico в корневой каталог сайта;
Поместить код в файле functions.php.

Остановимся на каждом шаге подробнее.

Сделать картинку favicon.ico на любом генераторе favicon

В статье «Установка иконки favicon на сайт WordPress» я подробно рассказывал, как сделать картинку favicon.ico. В этом нет ничего сложного. Делается она на любом генераторе иконок, в режиме on-line. Не требуется устанавливать на компьютер дополнительных программ. Делается картинка в формате .ico из картинки любого размера и любого формата.

Если вы хотите сами нарисовать свою иконку, можно воспользоваться расширенным online сервисом для изготовления иконок favicon.cc. На нем можно не только сделать иконку из заранее подготовленной фотографии, но и попробовать себя в точечном рисовании.

Будем считать, что свой favicon вы сделали. Будем размещать его на сайте.

Мало? Держите список сервисов для создания иконок:

• iconfinder.com
• freepik.com/free-icons
• fian.my.id
• ru.iconka.com
• genericons.com
• materialdesignicons.com
• flaticons.net
• iconbird.com
• iconizer.net
• webhostinghub.com
• iconspedia.com
• iconsearch.ru
• icons8.com
• glyphicons.com
• findicons.com
• icomoon.io
• iconarchive.com
• themify.me
• fontawesome.io
• thenounproject.com
• flaticon.com
• fontello.com

Загрузить картинку favicon.ico в корневой каталог сайта

Сделанный Favicon для сайта WordPress, при помощи FTP соединения, закачиваем в корневой каталог вашего сайта, скорее всего в папку [publ-html] или [httpdocs].

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

Разместить код в файле functions.php

Остается поместить код в шаблоне сайта. Для этого авторизуемся в административной панели. В консоли открываем: Внешний вид →Редактор.

В редакторе справа из списка файлов шаблона доступных для редактирования, ищем файл functions.php. Открываем его для редактирования. Не забывайте, перед редактированием сделать резервную копию сайта. Также, без опыта, редактируйте файлы на из консоли, а в любом текстовом редакторе, например, Notepad++.

В любое место раздела THEME SETUP вставляем следующий код

// add a favicon to your
function my_favicon() {
echo '<link rel="shortcut Icon" type="image/x-icon"
 href="'.get_bloginfo('wpurl').'/favicon.ico" />';
}
add_action('wp_head', 'my_favicon');

Не забываем сохраняться.

Важно: Если не хватает опыта, то используйте для вставки кода в файл functions.php плагин Code Snippets.

После перегрузки страницы сайта иконка появляется рядом с вашим сайтом. Если вы удалили все “чужие” иконки из каталога сайта, включая каталоги тем, а ваша иконка все равно не появляется, очистите кэш вашего браузера.

На этом все! Тему Favicon для сайта WordPress закрываю. На сайте получились три статьи, где я рассказывал о трех вариантах установки уникальной иконки на свой сайт WP. Читать другие статьи:

Дополнения

Начиная с версии WordPress 4.3 в ядре сайта появилась функциональность favicon. Теперь не нужно работать с кодом сайта или использовать сторонние плагины для добавления иконки сайта. Во всех темах WordPress установка (замена) фавикона (значок сайта) есть по умолчанию.

Чтобы установить фавикон сайта:

Авторизуйтесь в административной панели сайта;
Войдите на вкладку Внешний вид>>>Темы или Внешний вид>>>Настройки;
В первом варианте выберите рабочую тему и перейдите в её настройки;
На странице настроек темы откройте вкладку «Свойства сайта» и загрузите иконку сайта минимального размера 512 на 512 пикселов;
Сохранитесь.

Однако, сервисы вебмастера могут этот фавикон не видеть. Будут вам об этом сообщать, тогда вернитесь в начало статьи “Новое…”

Еще статьи

2 комментария для “Favicon для сайта WordPress”

Игорь Серов:

актуально: 16-03-18 в 09:35-MSK

Фавикон сайта может не отображаться в Яндекс, если в если ваш сайт находится далее 100-й позиции в ТОПе.
Сергей:

актуально: 18-06-18 в 08:01-MSK

Спасибо, это лучший пример, что я видел на просторах интернета