Как добавить фавикон на свой сайт WordPress

Фавикон или значок избранного - это небольшое изображение рядом с заголовком страницы на вкладке браузера. Этот значок сайта играет важную роль в установлении идентичности вашего сайта.

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

Почему вам следует использовать фавикон?

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

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

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

Подготовка вашего фавикона

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

Подумайте также об использовании логотипа вашего бренда, но убедитесь, что его можно обрезать до квадратного значка. Он также должен выглядеть достаточно простым, чтобы его можно было хорошо видеть, несмотря на его небольшой размер. Используйте программы редактирования изображений, такие как Photoshop, DesignWizard или GIMP, чтобы изменить и изменить размер вашего логотипа.

Для формата изображения рекомендуется использовать файл ICO, потому что большинство браузеров его поддерживают. Однако не все программы для редактирования фотографий позволяют создавать файлы ICO. Поэтому лучше использовать онлайн-генераторы значков, которые предоставляют такую ​​возможность. Или сохраните изображение в формате PNG и используйте онлайн-конвертер ICO. Обычно размер должен быть 16 x 16 пикселей.

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

3 способа добавить фавикон на ваш сайт WordPress

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

Вариант 1. Настройщик WordPress

Для пользователей WordPress 4.3 использование значка сайта - наиболее удобный и рекомендуемый способ добавить свой значок.

Подготовьте квадратное изображение не менее 512 пикселей по высоте и ширине. Размер файла не должен превышать 128 МБ. Если у вас прямоугольное изображение, они позволят вам обрезать его при загрузке значка .

Когда ваше изображение будет готово, выполните следующие действия:

1. Откройте панель управления WordPress, перейдите в раздел «Внешний вид» и выберите «Настроить».

2. Найдите вкладку со значком сайта. В большинстве тем он присутствует в идентификаторе сайта, но некоторые переименовывают вкладку в Заголовок сайта, Фирменное наименование, Логотип и заголовок сайта и т. Д.

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

4. Вы попадете в редактор Crop Image. Отрегулируйте положение и пропорции по своему усмотрению.

5. Поздравляем! У вас должен появиться новый значок. Если он еще не появился, WordPress рекомендует очистить кеш и перезапустить браузер.

Вариант 2: Использование плагинов

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

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

Чтобы использовать плагин, выполните следующие действия:

1. Перейдите в «Плагины» и нажмите «Добавить» на панели инструментов WordPress.
2. Найдите Favicon с помощью RealFaviconGenerator, затем установите и активируйте плагин.
3. Выберите «Внешний вид» и нажмите « Фавикон» на панели управления. Загрузите квадратное изображение размером более 70 x 70 пикселей. В идеале изображение должно быть 260 х 260 пикселей или больше.
4. Вы будете перенаправлены на страницу, где сможете настроить внешний вид своего значка в iOS, Android Chrome, Windows и Safari. Затем нажмите «Создать значки избранных и HTML-код».

Помимо этого плагина, вы можете использовать All in One Favicon. Плагин позволяет вам устанавливать разные значки для бэкенда и переднего конца. Таким образом, вы не запутаетесь, когда ваш веб-сайт и панель управления открыты.

Вариант 3: установка вручную через FTP-клиент

Другой способ - вручную загрузить значок на свой веб-сайт WordPress. Для этого вам необходимо подключить свой сайт к FTP-клиенту, например FileZilla. Ваш значок может быть в формате ICO или PNG и должен называться favicon.

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

Когда ваш сайт подключен, выполните следующие действия:

1. Загрузите файл значка в папку с текущей темой через FTP-клиент. Если вы используете дочернюю тему, загрузите ее в эту папку.
2. Добавьте тот же файл в свой корневой каталог. Он должен находиться в той же папке, что и ваши wp-content и wp-admin. Это необходимо для того, чтобы ваши значки можно было просматривать в программах для чтения каналов.
3. На панели инструментов WordPress перейдите в раздел «Внешний вид» и нажмите «Редактор тем».
4. Теперь выберите файл заголовка темы и добавьте этот код ниже внутри тега, если у вас есть файл ICO:

<link rel = "ярлык" href = "<? php echo get_stylesheet_directory_uri (); ?> / favicon.ico »/>

Замените часть после href = до /favicon.ico на путь к вашему корневому каталогу. Это выглядело бы так:

<link rel = "ярлык" href = "<http://www.yourdomainname.com/favicon.ico" />

Если у вас есть файл PNG, просто замените формат файла. Затем Обновите файл.

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

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

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

Подробнее Популярные плагины и темы для сайтов WordPress LMS