Как установить favicon для сайта; что такое favicon.ico – полное руководство

Что такое favicon (фавикон) для сайта; как установить favicon, как настроить, как создать фавикон и пр. обо всех этих и иных вопросах, касаемых иконки сайта сегодня узнаем во всех подробностях.

 

Иконка для сайта, это обычная небольшая картинка с определенным расширением – принято использовать по типу favicon.ico. Устанавливается в настройках темы Внешний вид/Настроить/Свойства сайта (либо кастомным вариантом) в wp_head. (вебмастере Яндекса есть четкие требования относительно организации фавиконки. Пройдите, прочтите…)

Установить индивидуальные иконки возможно и для консоли (страницы настроек) и для фронтэнда (лицевой части сайта).

Итак:

 

 

 

 

 

 

 

Что такое фавикон ( favicon.ico ) для сайта?

 

 

 

 

 

 

 

В Вордпресс имеется функция wp_site_icon() введена в WP 4.3.0 – хуки функции site_icon_meta_tags.

 

 

выводит (в исходном коде) такой метатег <link rel="icon" href="адрес" sizes="32x32" /> либо выведет несколько метатегов для разных устройств, подробнее описано ниже…

 

 

функция используется в фильтре: (ф. проверяет установлена ли иконка для сайта)

 

 

add_action( 'wp_head', 'wp_site_icon', 99 );

 

 

отображается в выдаче примерно так:

 

 

 

 

 

фавикон в окне браузера:

 

 

 

 

 

 

Чтобы установить для сайта favicon, в Вордпресс существует соответственный инструмент.

 

 

К настройкам проходим по такому пути:

 

 

Внешний вид/Настроить/Свойства сайта

 

 

 

 

 

 

Если загружаем фавикон через Настройки консоли (как описано выше) то в исходном коде будет такая картинка – выведет метатеги favicon для разных устройств:

 

 

 

 

 

 

Подробнее по функции wp_site_icon() ниже…

 

 

как установить favicon для сайта

 

 

 

 

В исходном коде строка, отвечающая за вывод иконки сайта выглядит, например, так:

 

 

<link rel="shortcut icon" href="/favimiha.svg" type="image/x-icon" />

 

 

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

 

 

…или (.ico для админпанели):

 

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

 

 

 

как установить favicon для админ панели:

 

 

Чтобы установить для админки свою иконку, возможно поступить так: открываем файловый менеджер хостинга там, где расположен физически сайт (файлы сайта). Закачиваем в ядро сайта нужную вам иконку (в ту папку, в которой хранятся файлы .htaccess и robots.txt).

 

 

примерно получается такой путь: имя-домена/public_html/favicon.ico

 

 

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

 

 

 

как установить favicon для сайта – фронтэнд:

 

 

Переходим в консоль настроек: либо по пути данному выше Внешний вид/Настроить/Свойства сайта, либо в настройки шаблона (изучите документацию темы).

 

 

Указываем пути до своих картинок (или загружаем через загрузчик медиафайлов, как показано в разделе выше), либо задаём иконку непосредственно в настройках темы.

 

 

 

кастомный вариант установки favicon:

 

 

 

В этом варианте прописываете метатег непосредственно а файле темы, который отвечает за формирование шапки сайта – обычно header.php:

 

 

 

<link rel="shortcut icon" href="/favimiha.svg" type="image/x-icon" />

 

 

 

…либо, если хотите автоматически добавить строку выше в событие wp_head добавляете в functions.php активной темы код данный ниже (правильнее добавлять подобные строки функций и т.п. в созданный для подобных целей плагин, или в дочернюю тему):

 

 

 

add_action('wp_head', 'my_meta_robots');
function my_meta_robots() {
echo "".'<link rel="shortcut icon" href="/favimiha.svg" type="image/x-icon" />'."\n";
}

 

 

 

Картинки, думаю, логичнее всего, чтобы не путаться, помещать в корневой каталог сайта имя_домена.ru/public_html/favimiha.svg и указывать до фоток путь.

 

 

 

 

 

 

фавикон с расширением .svg

 

 

 

 

Как и говорилось выше, с некоторых пор в вебмастере Яндекса предлагается установить для сайта фавикон с расширением .svg

 

по типу: имя.svg – конвертировать изображение можно на каком-то онлайн конвертере.

 

 

 

 

функция wp_site_icon()

 

 

 

 

Если загружаем фавикон через Внешний вид … свойства, то в этом случае строки в исходном коде будут выглядеть таким образом – три строки для разных устройств:

 

 

 

<link rel="icon" href="https://mihalica.ru/wp-content/uploads/2021/01/cropped-fav-32x32.png" sizes="32x32" />

<link rel="icon" href="https://mihalica.ru/wp-content/uploads/2021/01/cropped-fav-192x192.png" sizes="192x192" />

<link rel="apple-touch-icon" href="https://mihalica.ru/wp-content/uploads/2021/01/cropped-fav-180x180.png" />

 

 

 

 

 

 

Нужно знать:

 

…если пытаться загрузить картинку favicon.svg через загрузчик медиафайлов Вордпресс, то этого у нас не получится – по соображениям безопасности WordPress!

 

 

 

 

 

Но если вы уверены в безопасности загружаемых картинок (создаете их сами) то решить запрет загрузки можно следующим способами.

 

 

 

 

как в WordPress загрузить SVG картинку

 

 

 

вариант 1:

 

Чтобы загрузить .svg картинку через загрузчик вордпресс, можно, к примеру, использовать плагин Safe SVG.

 

 

либо – вариант 2 – включить SVG в список разрешенных для загрузки файлов, используя фильтры:

 

 

Рекомендую ознакомиться со статьёй по этой теме на сайте wp-kama.ru – автор: campusboy.

 

 

 

как отключить вывод иконки сайта, если она установлена

 

 

Чтобы деактивировать отработку функции Вордпресс wp_site_icon() никаких сложных манипуляций не требуется, всего-то воспользуемся фильтром: remove_action фильтр add_action показанный в старте статьи.

 

 

Итак, если кому-то требуется отключить функцию wp_site_icon() для того, чтобы сделать вывод иконки совершенно кастомно,  – отключаем: записываем данную ниже сроку в файл темы functions.php:

 

 

remove_action('wp_head', 'wp_site_icon', 99 );

 

 

Либо просто напросто удаляем загруженные картинки (если использовали) в Внешний вид/Настроить/Свойства сайта

 

В этом случае в исходном коде никаких строк кода (три, как говорилось выше) для вывода фавиконки для разных расширений не появится!

 

 

На этом сегодня закругляюсь…

 

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