Как установить фавикон (favicon) на сайте wordpress

Автор: | 06.09.2020

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

В качестве иллюстрации, вот как выглядит favicon в браузере.

 фавикон (favicon)

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

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

В такой ситуации ваш сайт, скорее всего, потеряется в глазах веб-пользователя.

Есть много других важных ролей, которые играют фавиконы. Давайте узнаем, как создать и загрузить свой фавикон на свой сайт.

Как создавать фавиконы

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

  • Изменение существующего логотипа сайта
  • Услуги дизайнера
  • Сделать самостоятельно

Изменение существующего логотипа сайта

Это, безусловно, самый простой, быстрый и эффективный способ. На самом деле, фавикон — это не более чем обрезанный логотип.

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

Читайте также: Как правильно оптимизировать изображения в WordPress

Нанять дизайнера

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

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

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

Сделай сам

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

В качестве альтернативы вы можете использовать онлайн-инструмент, такой как Faviconer. У вас есть возможность нарисовать собственный значок или загрузить изображение. Затем Фавиконер сделает фавикон из загруженного изображения.

У вас также есть возможность онлайн-генераторов, которые выделяют фавиконы одним нажатием кнопки. Примеры таковы Favicon.cc и https://www.favicon-generator.org.

Формат Favicon

В первые дни существования WordPress вы могли загрузить только ICO-файл для favicon. Формат файла ICO позволил браузерам регулировать размер фавикона в зависимости от устройства просмотра.

Но те дни прошли. Теперь WordPress принимает графические файлы в форматах ICO, jpg, png или gif.

И последнее, что стоит упомянуть, — это размер иконки. Чтобы изображение не было обрезано, убедитесь, что его длина и ширина одинаковы. Он должен быть не менее 512px на 512px-идеально квадратной формы.

Читайте также: Как установить плагины для WordPress.

Загрузка фавикона на WordPress

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

У вас есть возможность вручную загрузить значок сайта или использовать плагин.

Загрузка на ваш сайт вручную по FTP

Для более старых версий WordPress (4.2 и ниже) у вас была только возможность загружать фавиконы через FTP. Вряд ли вам понадобится использовать этот метод. Серьезно, если ваша версия WordPress 4.2 или ниже, пожалуйста, обновите ее.

Читайте также: Как обновить сайт WordPress.

Тем не менее, вот как можно загрузить favicon в более старых версиях WP.

Во-первых, в этом случае ваши изображения favicon должны быть размером 16px на 16px и называться favicon.ico.

Установите соединение с вашим сайтом с помощью FTP-программы. После установления соединения следующим шагом является загрузка изображения в корневой каталог вашего сайта.

Корневой каталог (также корневая папка) — это основная папка, содержащая ваши WP-файлы (часто это public_html).

Как установить фавикон (favicon) на сайте wordpress

Читайте также: Как использовать FTP для загрузки файлов на WordPress

Как загрузить изображение на свой сайт через FTP

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

Как только вы выберете изображение, щелкните на нем правой кнопкой мыши и нажмите кнопку Upload (Загрузить).

Как установить фавикон (favicon) на сайте wordpress

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

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

Конечно, вы должны заменить mywebsite.com вашим доменным именем.

Вы найдете header.php по навигации wp-content >> themes >> your theme >> header.php

Как установить фавикон (favicon) на сайте wordpress

Щелкните по нему правой кнопкой мыши, выберите Просмотр/редактирование, затем вставьте код, сохраните и загрузите.

Однако, если вам неудобно вносить изменения в ваши основные файлы, есть обходной путь. Просто установите и активируйте плагин Insert Headers and Footers.

После установки и активации перейдите в раздел Настройки > > вставить верхние и нижние колонтитулы. Затем вставьте код.

Загрузка через WordPress Customizer

Существует встроенная функция, которая позволяет загружать favicon на ваш сайт WordPress, независимо от имени или типа файла. Этот более простой метод доступен, если у вас есть последняя версия WordPress.

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

Затем перейдите к внешний вид> > настроить

Затем перейдите к свойства сайта > > иконка сайта

WordPress Customizer

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

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

Загрузка через плагин

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

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

Одним из самых популярных плагинов для этого является Favicon by RealFaviconGenerator. После установки перейдите в раздел Внешний вид > > Favicon.

Favicon от RealFaviconGenerator

Затем выберите изображение. Убедитесь, что изображение соответствует указанным размерам. Затем нажмите кнопку Generate favicon (Создать фавикон).

Favicon by RealFaviconGenerator

После нажатия кнопки вы попадете в онлайн-инструмент оптимизатора. Здесь ваше загруженное изображение будет оптимизировано для устройств Android, iOS и Windows.

Прокрутите страницу вниз и нажмите кнопку Generate Favicon and HTML Code (Создать фавикон и HTML-код).

Favicon by RealFaviconGenerator

Вот и все!

Изменение доменного имени в WordPress
Изменение доменного имени в WordPress

Доменное имя WordPress предоставляет собой средство поиска и идентификации сайта Read more

Как добавить видео слайдер WordPress: простое руководство для начинающих
Как добавить видео слайдер WordPress: простое руководство для начинающих

Добавление видеоконтента на ваш сайт может быть отличным способом привлечения Read more

Как исключить записи категории с главной страницы сайта на WordPress?
исключить записи с главной страницы

Очень важно при работе с сайтом убедиться, что домашняя страница Read more

Как оптимизировать изображение с помощью Photoshop
Как оптимизировать изображение с помощью Photoshop

Оптимизация изображений — это процесс сжатия и настройки параметров отображения Read more

PNG vs JPG: что лучше для сайта WordPress?
PNG vs JPG: что лучше для вашего сайта?

Визуальная привлекательность имеет решающее значение в веб-дизайне. Внешний вид должен Read more

Как установить WordPress На Локальный сервер– Полное Руководство
WordPress На Localhost

Установка WordPress на компьютер Windows или Mac часто является первым Read more

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

пять × три =