Как изменить фавикон в WordPress?

Для обеспечения совместимости рекомендуется использовать формат иконок от Microsoft.

Просто разместите файл с названием favicon.ico, содержащий вашу иконку, в корневой директории вашего сайта.

Это важно, так как многие браузеры запрашивают его напрямую.

Конечно, следует также добавить соответствующий метатег в вывод вашего сайта, который размещается в секции head HTML-документа:

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

Это обеспечит работу иконки в большинстве браузеров и предотвратит появление ошибок 404 в логах сервера, так как не все пользовательские агенты учитывают указанный в метатеге путь.

Favicon в WordPress

В WordPress для добавления элементов в секцию head используется хук wp_head (Wordpress Codex):

add_filter('wp_head', function(){ 
    printf("%s\n", '<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon"/>');
    });

Начиная с версии 3, WordPress по умолчанию включает пустой файл favicon.ico.

Если вам интересны подробности, то обсуждение этого вопроса велось в тикетах Should include default favicon (Ticket #3426) и Discard requests for favicon.ico (Ticket #11412). В результате было принято решение о включении виртуального файла /favicon.ico нулевой длины (если WordPress установлен в корне сервера).

По сути, это означает, что в стандартной конфигурации без пользовательского файла /favicon.ico браузер не сможет загрузить иконку.

Просто загрузите файл "favicon.ico" в корневую директорию вашего сайта, и всё готово! Хотя ответ Фернандо тоже работает:

<link rel="icon" type="image/png" href="http://yourblog.com/favicon.png">

А чтобы добавить фавиконки для устройств Apple, добавьте это в раздел head:

<link rel="apple-touch-icon" href="/customIcon.png"/>

Если вы поддерживаете IE 6, небольшое предупреждение: фавикон не отображается на панели инструментов, пока URL не будет добавлен в «Избранное» (закладки). Кроме того, фавиконы хранятся в кэше IE, поэтому будут удалены при очистке кэша или при его периодическом автоматическом удалении.

Чтобы список ответов был полным, в предыдущих ответах упоминалось (см. также http://en.wikipedia.org/wiki/Favicon) и ваш выбор:

1. Добавление /favicon.ico в корень (http://en.wikipedia.org/wiki/Favicon). Здесь можно добавлять только иконки в формате ICO, например, /favicon.png не будет работать. Учтите, что очень старые версии IE поддерживают только формат MS ICO.
2. Тег с rel=shortcut icon: кросс-браузерная поддержка с оговорками. Многие сайты предпочитают этот вариант. Можно использовать другие форматы файлов, такие как PNG, GIF, ICO, JPG и JPEG. Также можно использовать анимированные GIF-изображения.
3. Тег с rel=icon: здесь можно указать MIME-тип.

4. Встраивание непосредственно в страницу с использованием base64-кодирования, например: href="data:image/x-icon;base64,iVBORw0==". Этот метод поддерживается не всеми браузерами, но его используют многие сайты.

   • Обратите внимание на указанный MIME-тип. Официальный стандарт для иконок — "image/vnd.microsoft.icon", но для версий IE 6 и ниже требуется "image/x-icon".
   • Также замечено, что указанный MIME-тип не всегда соответствует реальному формату файла. Например, может быть указан ICO, но фактически использоваться PNG. Убедитесь в правильности MIME-типа.
   • Если вы хотите, чтобы ваша иконка отображалась в сервисе Google Favicon, разместите файл favicon.ico в корне сайта.
   • Дополнительная поддержка иконок: Помимо favicon.ico, существует множество других тегов для иконок, таких как Apple icon, link rel="avatar", link rel="pavatar" и другие.

С другой стороны, если я ищу фавикон:

• сначала проверяю в Google: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_google_s2.php
• затем ищу в других сервисах, например, geticon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_geticon.org.php
• затем анализирую страницу, сначала ищу тег rel=icon, затем rel=shortcut icon: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_page.php, и если иконка встроена, получаю её
• и только потом пытаюсь получить иконку из корня: http://plugins.svn.wordpress.org/wp-favicons/trunk/filters/search/filter_extract_from_root.php

P.S. Конечно, вы можете применить все эти методы для своего сайта, чтобы обеспечить максимальную поддержку ;)

Просто вставьте этот код в functions.php и замените href на путь к вашей фавиконке

function blog_favicon() {
echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('wpurl').'/favicon.ico" />';
}
add_action('wp_head', 'blog_favicon');

Я использовал:

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

с файлом favicon.ico в корневой папке темы.