3 простых способа добавить фавикон WordPress в 2022 году (руководство для начинающих)

Готовы узнать все, что вы когда-либо хотели знать о своем фавиконе WordPress?

Если вы не знакомы, фавикон вашего сайта — это маленький значок, который появляется на вкладке вашего веб-браузера. Например, вот как выглядит наш фавикон на HeroThemes:

Вы также увидите, что некоторые люди называют фавиконы «иконой сайта». Не волнуйтесь — это одно и то же.

В этом посте вы узнаете:

• Почему вы должны заботиться о чем-то маленьком, таком как ваш значок WordPress
• Как создать значок для вашего сайта WordPress (и какой размер и формат использовать)
• Как добавить фавикон в WordPress тремя разными способами

Почему вы должны заботиться о своем фавиконке WordPress

Знаю, знаю. Маленькое изображение, которое появляется только на вкладке браузера, вероятно, не поможет вашему бизнесу. Но есть две причины, по которым вам следует потратить некоторое время на создание фавикона для WordPress.

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

Это HeroThemes и Twitter, верно?

Это важно, потому что людям нравится открывать несколько вкладок ( нет, вы не единственный, кто копит вкладки! ). Еще в 2009 году люди в среднем использовали 3+ вкладок, причем среди молодежи было больше. И хотя я не могу найти более свежие данные, готов поспорить, что средний показатель вырос, а не упал!

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

Если учесть, насколько просто добавить фавикон WordPress, эти преимущества определенно стоят того, чтобы потратить несколько минут в день.

Как создать изображение Favicon правильного размера и формата

Прежде чем вы сможете следовать пошаговым инструкциям в следующих разделах о том, как добавить фавиконку в WordPress, вам нужно… на самом деле иметь изображение, которое вы хотите использовать для своей фавиконки!

А это значит, что вам нужно знать правильные размеры и формат изображения для вашего фавикона.

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

Итак, чтобы создать свой фавикон, вот все, что вам нужно:

• Квадратное изображение. Оптимальный размер фавиконки WordPress — 512×512 пикселей, хотя допускается и меньший размер, например 260×260 пикселей. Все методы, которые я вам покажу, уменьшат размер по мере необходимости .
• Изображение в формате png , которое лучше всего подходит для современной сети.

Чтобы создать свое изображение, вы можете использовать такой инструмент, как Adobe Photoshop или GIMP. Или вы также можете использовать что-то вроде Favicon.io для создания изображения фавикона из текста или смайликов.

Если у вас есть логотип с высоким разрешением, проще всего просто взять квадратную версию вашего логотипа ( это то, что мы используем в HeroThemes ).

Как добавить фавикон в WordPress (3 метода)

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

Ниже я покажу вам три различных способа добавления фавикона в WordPress. Однако каждый метод немного отличается .

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

• Добавьте фавиконку с помощью основных функций WordPress — это очень просто и позволяет добавить фавиконку через настройщик WordPress. Единственным недостатком является то, что он не будет добавлять форматы favicon для всех устройств. Однако для большинства сайтов это совершенно нормально .
• Плагин RealFaviconGenerator для WordPress — позволяет очень легко добавить фавикон для всех устройств . Единственным потенциальным недостатком является то, что вам нужно держать плагин активным, что может не понравиться некоторым людям.
• Ручной метод RealFaviconGenerator — вместо использования плагина вы можете использовать веб-сайт RealFaviconGenerator и добавить код вручную. Этот метод избавляет от необходимости держать плагин активным, но становится немного сложнее, потому что вам нужно будет добавить фрагмент кода в заголовок вашей темы.

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

Как добавить фавикон в WordPress с основной функциональностью

Это действительно просто, потому что он использует основную функцию WordPress.

Для начала перейдите в « Внешний вид» → «Настроить » на панели инструментов WordPress, чтобы получить доступ к настройщику WordPress:

Когда вы окажетесь в настройщике WordPress, нажмите на опцию « Идентификация сайта» :

Затем найдите раздел « Значок сайта » и нажмите « Выбрать изображение », чтобы загрузить изображение фавикона:

Это откроет обычную медиатеку WordPress, куда вы можете загрузить свое изображение, как обычно.

После того, как вы загрузили изображение, нажмите кнопку « Выбрать »:

Оттуда WordPress предоставит вам возможность обрезать изображение фавикона, а также предварительный просмотр вашего изображения в реальном времени как в браузере, так и в приложении.

Отрегулируйте правильную обрезку, а затем нажмите « Обрезать изображение» :

И вы сделали! Убедитесь, что вы нажали кнопку « Опубликовать » в верхней части настройщика WordPress, и ваш значок должен активироваться.

Как использовать плагин WordPress Favicon (подходит для большего количества устройств)

Теперь я покажу вам, как использовать плагин WordPress favicon для достижения того же эффекта.

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

Вы сможете создавать собственные фавиконы для:

• iOS
• Андроид
• Windows Phone
• и Т. Д.

Вам это не обязательно нужно — это больше касается пограничных случаев.

Чтобы следовать этому методу, вам необходимо установить бесплатный плагин Favicon by RealFaviconGenerator.

После активации плагина перейдите в Внешний вид → Фавикон . Используйте кнопку « Выбрать из медиатеки» , чтобы загрузить или выбрать свой значок из медиатеки WordPress.

Затем нажмите «Создать фавиконку »:

После этого плагин перенаправит вас на внешний сайт , где вы сможете настроить внешний вид вашего фавикона для разных устройств.

После того, как вы закончите вносить эти изменения, прокрутите вниз и нажмите кнопку « Создать фавиконки и HTML-код» :

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

Вот и все! Вы все сделали. Просто убедитесь, что плагин активен, иначе ваши значки исчезнут.

Как добавить фавикон в WordPress вручную с помощью того же инструмента RealFaviconGenerator

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

Если это проблема для вас, вы также можете использовать тот же инструмент, чтобы сделать все вручную.

Конечный результат точно такой же, вам просто нужно вручную загрузить изображения через FTP и добавить некоторый код в раздел <head> вашего сайта.

Я разобью это на шаги, потому что это немного сложнее…

Шаг 1: Создайте свой пакет Favicon

Чтобы начать, перейдите на веб-сайт RealFaviconGenerator и нажмите « Выбрать изображение фавикона», чтобы загрузить изображение фавикона:

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

Как и в случае с плагином, прокрутите вниз и нажмите кнопку « Создать фавиконы и HTML-код» , когда закончите настройку:

Шаг 2: Загрузите свой пакет Favicon на свой сайт

На следующем экране нажмите кнопку, чтобы загрузить пакет Favicon :

Затем вам нужно извлечь этот пакет и загрузить его в корневую папку вашего сайта с помощью FTP ( если вы не уверены, что такое FTP, я рекомендую вам просто использовать метод плагина из предыдущего раздела ).

Убедитесь, что вы поместили все файлы в корневую папку — иначе это не сработает.

Шаг 3: Добавьте фрагмент кода в <head> вашей темы

Чтобы закончить, вам нужно добавить фрагмент кода из RealFaviconGenerator в раздел <head> вашей темы WordPress:

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

/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};

Любой метод хорош!

Как только вы это сделаете, все будет готово, и ваш значок должен начать работать.

Добавьте свой фавикон WordPress сегодня

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

И вот что замечательно:

Как только вы добавите фавикон на свой сайт WordPress, вам больше никогда не придется об этом думать!

У вас есть другие вопросы о том, как добавить фавикон WordPress? Дайте нам знать в комментариях, и мы поможем!