Ваш путь: Главная » Техническое SEO » текущая страница
возможно заказать разработку или сопровождение, услуги вашего сайта/блога

написано: — 
отредактировано: 2021-01-17
издатель: в теме: Техническое SEO
Запросто с WordPress — создание сайтов ATs media

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

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

 

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

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

Итак:

 


 

 

 

 

 

 

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

 

 

 

 

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 );

 

 

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

 

 

запросто с WordPress

 

 

 

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

 

 

 

favicon установка

 

 

 

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

 

 

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

 

 

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

 

 

 

favicon для сайта

 

 

 

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

 

 

 

функция wp_site_icon()

 

 

 

Подробнее по функции 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 и указывать до фоток путь.

 

 

 

favicon для сайта

 

 

 

к оглавлению

фавикон с расширением .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!

 

 

 

фавикон svg

 

 

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

 

 

 

 

к оглавлению

как в 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 );

 

 

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

 

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

 

 

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

 

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

 

 

 

 

 

Как использовать условные теги: пример на странице пагинации — закрываем в noindex,follow

 

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...




Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
Статьи по теме:


Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©