Как установить фавикон на WordPress

Сегодня хочу поделиться с вами удивительно простым и важным шагом, который сделает ваш сайт еще более узнаваемым и профессиональным. Речь пойдет о фавиконе — той маленькой иконке, которая появляется в адресной строке браузера и вкладках сайта. Это мелочь, но она придает вашему сайту индивидуальность и удобство для посетителей.

Если вы хотите узнать, как легко установить фавикон на свой WordPress сайт, то давайте вместе шаг за шагом разберемся в этом процессе. Начнем!

Какие бывают размеры фавикона?

Стандарты размеров фавиконов могут немного различаться, но вот некоторые распространенные размеры:

• 16×16 пикселей — это классический размер для старых версий браузеров и устаревших устройств.
• 32×32 пикселей — часто используется в современных браузерах и операционных системах.
• 48×48 пикселей — распространенный размер для некоторых устройств и Retina-дисплеев.
• 64×64 пикселей — обычно используется для высококачественных иконок на Retina-дисплеях.
• 128×128 пикселей — предпочтительный размер для мобильных устройств.

Оптимальное решение: использовать размер 32×32 и 128×128. То есть создавать фавиконки в двух размерах.

Какой нужен формат фавикона?

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

• ICO — это стандартный формат для фавиконов, поддерживаемый практически всеми браузерами, включая Internet Explorer.
• PNG — это более современный формат, который обеспечивает лучшее качество изображения, и поддерживается большинством современных браузеров.
• GIF — можно использовать для простых иконок с анимацией, но учтите, что поддержка анимированных фавиконов не всегда одинакова у всех браузеров.
• SVG — это векторный формат, который позволяет создать фавикон с высоким разрешением и поддерживается многими современными браузерами.

Оптимальное решение: использовать формат ICO, PNG и SVG. То есть чтобы фавикон был в трех форматах на сайте. И для удобства можно сделать так:

Размер 32×32 – это формат ICO и PNG.
Размер 128×128 – это формат SVG.

Установить фавикон на WordPress

Для подключения нескольких фавиконов в разных форматах к сайту WordPress, вам нужно вставить код, тот что ниже, в файл functions.php. В нем подключаются три иконки в формате SVG, PNG, ICO.

// установка favicon
function ws_my_favicon() {
    echo '<!-- Favicon - SVG -->
    <link rel="icon" type="image/svg+xml" href="' . get_bloginfo('wpurl') . '/favicon.svg" sizes="any">
    <!-- Favicon - PNG -->
    <link rel="icon" type="image/png" href="' . get_bloginfo('wpurl') . '/favicon.png" sizes="32x32">
    <!-- Favicon - ICO -->
    <link rel="icon" type="image/x-icon" href="' . get_bloginfo('wpurl') . '/favicon.ico" sizes="32x32">
    <!-- end -->
        ';
}
add_action('wp_head', 'ws_my_favicon');

Главное. Путь к фавикону лежит из корня сайта, то есть иконки нужно загрузить в корневой каталог. Это там, где находится файл wp-config.php. Если хотите, чтоб иконки хранились в другом месте, тогда просто меняйте путь к ним.

Генерация фавикон в формат ICO

Favicon-generator.org — это онлайн-сервис, который предоставляет простой и удобный способ создания и генерации иконки сайта (фавикона) в различных форматах.