Как добавить favicon на сайт - для фронтенда и админки

Question

Как добавить favicon на сайт - для фронтенда и админки

16 мар. 2014 г., 07:41:59

Просмотры: 16.5K

Голосов: 8

Как я могу добавить favicon на свой сайт WordPress, чтобы он отображался и на фронтенде, и в админ-панели. Я пробовал разные способы, но ничего не сработало.

Я знаю, что для отображения favicon используется код:

<link rel="shortcut icon" href="images/favicon.ico" />

Как правильно это реализовать?

Mayeenul Islam

12.9K

плагины темы фавикон

Все ответы на вопрос

Комментарии

Правильный ответ. Это поможет многим. Уже некоторое время использую этот код в своем плагине.

Pieter Goosen

16 мар. 2014 г. 07:56:04

Этот ответ определенно заслуживает больше голосов.

Smokey

16 окт. 2014 г. 08:05:02

Отличный ответ, но для дочерних тем следует использовать get_stylesheet_directory_uri(), а не get_template_directory_uri()! :)

Eric Holmes

30 окт. 2015 г. 23:00:30

@EricHolmes Я действительно так и имел в виду, но понял, что это может ввести в заблуждение, так что исправил. Спасибо за комментарий. :)

Mayeenul Islam

31 окт. 2015 г. 17:18:28

Я опоздал с ответом в этой теме. Но, возможно, это поможет кому-то в будущем.

Перейдите в админ-панель WordPress, затем:

Внешний вид » Настроить » Идентификация сайта

Теперь загрузите иконку.

Usman Siddiqui

41

4 дек. 2016 г. 09:01:33

Комментарии

да, эта функциональность была добавлена в версии 4.4, если я правильно помню

Mark Kaplun

4 дек. 2016 г. 09:09:24

хм, этого я не знал :)

Usman Siddiqui

5 дек. 2016 г. 10:42:54

В последних версиях WordPress это, вероятно, лучший способ.

João Teixeira

28 мар. 2022 г. 10:04:43

Mayeenul Islam 12.9K · Accepted Answer · 2014-03-16T07:41:59Z

Обновление

Следующий обходной путь необходим для пользователей, использующих WordPress старше версии 4.4. Если вы используете WordPress версии 4.4 и выше, вам не нужно применять столь сложный обходной путь. Просто следуйте ответу Усмана Сиддики, и это действительно просто.

Основной ответ

Вы можете добавить фавикон на свой сайт WordPress одним из следующих способов:

через тему, или
через плагин

Подготовка

Для добавления фавикона сначала необходимо его создать. Обычно фавиконы имеют размер:

16px x 16px, или
32px x 32px.

Итак, сначала создайте его с помощью графического редактора и сохраните файл с именем 'favicon' в формате .png (для прозрачности) или .jpg и т. д. Переименуйте файл и измените расширение на .ico (файл иконки) — таким образом, ваш файл будет называться favicon.ico.

Через тему:

Жесткий код

Для реализации фавикона через тему нужно помнить, что вы используете WordPress и должны делать это в соответствии с его принципами. Чтобы показать точный путь к файлу, используйте get_template_directory_uri() для родительской темы или get_stylesheet_directory_uri() для дочерних тем. Таким образом, ваш код для добавления фавикона будет выглядеть следующим образом (если файл favicon.ico хранится в папке "images" внутри папки вашей темы):

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />

Вы можете поместить этот блок кода между тегами <head> и </head> вашей темы, чтобы фавикон заработал.

Динамический код

Для динамической реализации фавикона используйте следующий код:

function add_my_favicon() {
   $favicon_path = get_template_directory_uri() . '/images/favicon.ico';

   echo '<link rel="shortcut icon" href="' . esc_url($favicon_path) . '" />';
}

add_action( 'wp_head', 'add_my_favicon' ); // фронтенд
add_action( 'admin_head', 'add_my_favicon' ); // админка

Мы использовали тот же код, но обернули его в функцию для вызова действия. Затем мы добавили действие с помощью двух хуков:

wp_head — он добавит фавикон на фронтенд, используя функцию WordPress wp_head() в секции head вашей темы
admin_head — он добавит фавикон в админ-панель

Через плагин

Вы можете создать собственный плагин для установки фавикона на ваш сайт. Это будет лучше, потому что даже при смене темы ваш фавикон не пропадет. Вот как мы реализуем это с помощью нашего пользовательского плагина:

<?php
/*
Plugin Name: My Favicon Plugin
Description: Активация фавикона на моем сайте.
*/

function add_my_favicon() {
    $favicon_path = plugins_url( '/favicon.ico', __FILE__ );    

    echo '<link rel="shortcut icon" href="' . esc_url($favicon_path) . '" />';
}


add_action( 'wp_head', 'add_my_favicon' ); // фронтенд
add_action( 'admin_head', 'add_my_favicon' ); // админка

Сохраните файл с именем my-favicon.php в папке и поместите ваш файл favicon.ico внутрь этой папки. Назовите папку my-favicon и поместите её в /wp-content/plugins/. Теперь зайдите в админ-панель WordPress и активируйте плагин, чтобы увидеть ваш фавикон в действии. :)

Apple Touch Icon

Дополнительно этими способами вы также можете реализовать Apple Touch иконку:

Реализация Apple Touch Icon от helgatheviking — WordPress Development

Размер Apple Touch иконки составляет 129px x 129px. :)