Фавиконы — это крошечные значки, которые помогают выделить ваш сайт в поисковой выдаче или на панели закладок. Именно поэтому каждому сайту нужен фавикон.
Фавикон создает первое впечатление о сайте, еще до того, как пользователь посетит его. Сайт с фавиконом выглядит более профессионально. Тот факт, что ваш сайт мгновенно выделяется среди других, — еще один плюс.
В этой статье мы покажем вам, как создать значок для своего веб-сайта на WordPress, а также дадим несколько советов, как сделать это быстрее и эффективнее.
Давайте приступим!
Содержание статьи
Чего ожидать при добавлении фавикона на сайт
Добавление значка на сайт WordPress — очень простой процесс. Вы должны сначала создать набор иконок, а затем добавить их на свой сайт с помощью настройщика WP, плагина или FTP.
Вот как это сделать:
- Шаг 1. Создайте фавикон WordPress для своего сайта
- Шаг 2. Добавьте значок на свой веб-сайт WordPress
Плюсы
Идентичность и узнаваемость бренда — конечная цель каждого веб-сайта. И хотя есть несколько способов сделать это, например, выбрать правильную цветовую схему, выбрать отличный логотип и т. д., фавикон тоже может играть важную роль.
Он может улучшить UX, позволяя пользователям определять и различать веб-сайты, когда они открыли несколько вкладок на своем компьютере. Есть несколько других нематериальных преимуществ, таких как улучшение взаимодействия с пользователем на мобильных устройствах и быстрое установление доверия.
Для вас это беспроигрышный вариант.
Вы также можете использовать свой фавикон в качестве значка приложения, что, учитывая нынешнюю эпоху мобильных телефонов, может быть очень полезным. Многие веб-сайты уже запустили веб-приложения или находятся в процессе создания.
Кроме того, несколько плагинов могут упростить процесс добавления значка на ваш сайт.
Минусы
При создании фавикона вы должны указать правильные размеры изображения. Плюс, изображение должно быть квадратным.
Многие инструменты заканчивают тем, что добавляют прозрачные поля вокруг изображения, чтобы сделать его квадратным. Излишне говорить, что конечный результат выглядит не очень профессионально. Так что здесь нужно быть внимательным.
Если вы планируете использовать настройщик WordPress для добавления фавикона, убедитесь, что у вас установлена последняя версия WordPress.
Функция загрузки и обрезки фавикона была представлена только после запуска WordPress 4.3. Таким образом, вам придется загрузить свой значок в корневой каталог своего веб-сайта через FTP, если у вас WordPress 4.2 или ниже, что немного сложнее, чем использование плагина или настройщика.
Кроме того, добавление вашего значка через FTP и вставка HTML-кода непосредственно в раздел <head> вашей темы подвергает вас риску потери иконки всякий раз, когда вы меняете тему WordPress. Так что вам придется проделать весь процесс снова.
Шаг 1. Создайте фавикон для своего сайта
Прежде чем вы сможете добавить фавикон, вам сначала нужно его создать.
Если у вас уже есть готовый к использованию значок, вы можете пропустить этот шаг и пойти дальше.
Раньше владельцы веб-сайтов должны были использовать определенный файл ICO для создания значка. Сейчас все (к счастью) изменилось.
Сегодня большинство веб-браузеров поддерживают файлы PNG, ICO, GIF и JPEG для фавиконов. Однако вы должны помнить, что не все версии Internet Explorer поддерживают JPEG, поэтому было бы лучше выбрать другие параметры браузера.
Вам пригодится знание Photoshop. Но даже если вам не хватает навыков работы в этой программе, вы всегда можете использовать облачные инструменты для создания иконки из уже существующего изображения.
Рекомендуем Favicon.cc, RealFaviconGenerator и Favicon Generator, поскольку они предоставляют вам значки значков в форматах PNG и ICO, а также различные средства настройки. Все, что вам нужно сделать, это вставить код, который дает вам плагин, и все готово.
Вот несколько дополнительных советов по созданию отличного фавикона для WordPress:
- Выберите изображение значка размером 512 × 512 пикселей.
- Ваш фавикон WordPress должен быть идеальным квадратом. Если вы используете прямоугольное изображение, вам придется обрезать его до или после загрузки в WordPress.
- Вы можете добавить изображение значка через настройщик WordPress, используя встроенную в платформу функцию обрезки.
- Ваш фавикон должен представлять собой квадрат размером 16×16 пикселей. Поэтому постарайтесь выбрать изображение, которое будет хорошо выглядеть после того, как оно уменьшится до этих размеров.
- Не забудьте ознакомиться с рекомендациями Google по созданию и использованию значков.
Покажем, как создать фавикон с нуля с помощью RealFaviconGenerator.
Откройте веб-сайт RealFaviconGenerator и загрузите изображение, которое хотите использовать, нажав кнопку «Выбрать изображение Favicon» .
На следующем экране вы можете настроить конкретные детали вашего набора значков, если хотите.
Когда вы, наконец, закончите, прокрутите курсор вниз и нажмите «Создать значки и HTML-код» .
Вы будете перенаправлены на новую страницу. Там нажмите на опцию пакета Favicon, чтобы загрузить готовые иконки. Если вы хотите добавить значок на свой сайт вручную, оставьте эту страницу открытой.
Шаг 2. Добавьте значок на свой веб-сайт
Затем вам нужно добавить значок на свой веб-сайт.
Вы можете сделать это одним из трех способов: с помощью настройщика WordPress, через плагин и через FTP.
Каждый метод — отличный выбор сам по себе, так что все зависит от ваших личных предпочтений.
Метод 1: через настройщик WordPress
Из трех методов этот самый простой и быстрый.
Каждый веб-сайт на WordPress имеет функцию настройки фавикона после запуска WordPress 4.3. В результате очень удобно загружать и обрезать изображение, которое затем можно использовать в качестве значка для своего сайта.
Вам нужно изображение размером не менее 512 × 512 пикселей, так что имейте это в виду. Вот и все! Об остальном позаботится WordPress.
Давайте разберемся, как добавить фавикон.
Перейдите во «Внешний вид» на главной панели администратора и нажмите «Настроить» в раскрывающемся меню.
Оттуда выберите вкладку «Идентификация сайта». Затем перейдите к нижней части экрана, и нажмите на Выбрать значок.
На этом этапе на вашем экране откроется интерфейс библиотеки мультимедиа WordPress.
Вы можете выбрать существующее изображение в медиатеке или загрузить новое. Поскольку мы уже создали наш значок с помощью RealFaviconGenrator, вам нужно только загрузить распакованную версию набора значков, чтобы завершить процесс.
Когда загрузка будет завершена и у вас будет готовое изображение, щелкните по нему и нажмите кнопку «Выбрать». Если изображение еще не является идеальным квадратом, вы можете обрезать его прямо в WordPress.
Когда вы будете довольны изображением и тем, как оно выглядит, нажмите «Сохранить и опубликовать», чтобы активировать свой значок.
Поздравляю! Ваш фавикон активен.
Метод 2: установите плагин для добавления фавикона
Многие предпочитают плагины встроенным функциям WordPress. Для этого вы можете использовать плагин Favicon, созданный RealFaviconGenerator.
Как и облачный инструмент, плагин удобен для пользователя. Последний предлагает гораздо больше возможностей совместимости для различных устройств и значков приложений, что делает его более предпочтительным для большинства пользователей по сравнению со стандартным настройщиком WP.
Давайте посмотрим, как использовать плагин Faviconили любой другой вариант, чтобы добавить значок на свой сайт.
Установите и активируйте плагин. Для этого нажмите Плагины на панели инструментов меню администратора. Оттуда перейдите в Добавить новый .
Введите «Favicon» в строку поиска, расположенную в верхней правой части экрана. Щелкните Поиск.
Нажмите кнопку «Установить сейчас», чтобы установить плагин на свой веб-сайт. Это начнет установку плагина.
Чтобы активировать плагин, нажмите кнопку «Активировать», которая заменит предыдущую кнопку «Установить сейчас»после завершения процесса установки.
После установки и активации плагина Favicon вы можете создать набор иконок.
Нажмите «Внешний вид» на главной панели управления WordPress и выберите «Фавикон» из отображаемых параметров.
Выберите или загрузите изображение размером 70 × 70 пикселей, и готово! Было бы хорошо даже изображение размером 260 × 260 пикселей.
После этого нажмите «Создать значок».
Затем вы будете перенаправлены на сайт RealFaviconGenerator.
Прокрутите курсор вниз, пока не увидите пункт « Сгенерировать фавикон и HTML-код» (мы сделали это в предыдущем разделе). Когда вы нажмете эту кнопку, RealFaviconGenerator отправит вас обратно на панель управления WordPress.
На этом этапе ваш значок настроен и готов к запуску.
Когда вы используете плагин, вы можете предварительно увидеть, как конечный продукт выглядит на разных устройствах в интерфейсе плагина.
Метод 3: через протокол передачи файлов или FTP вручную
Вы можете добавить значок на свой сайт WordPress через протокол передачи файлов или FTP. Вы также можете использовать файловый менеджер, если ваш хост использует cPanel.
Поскольку это ручной метод, вы должны быть готовы сделать все самостоятельно. Вот что вам нужно сделать.
Откройте файлы своего сайта через FTP-клиент или файловый менеджер в cPanel вашего хостинга.
Найдите корневой каталог WordPressвашего веб-сайта и загрузите свой пакет иконок вместе с его содержимым (обычно он должен называться favicons.zip).
Совет: файлы будут в той же папке, что и ваши папки wp-admin и wp-content.
Помните HTML-код, который мы получили при создании значка в RealFaviconGenerator? Он понадобится сейчас.
Вы можете добавить код в заголовок вашей темы с помощью плагина, такого как Insert Headers and Footers, или вставить его прямо в раздел <head> вашей темы, отредактировав файл header.phpвашей темы .
Рекомендуем использовать плагин Insert Headers and Footers, так как вам не придется еще раз проходить весь процесс добавления вашего значка, если вы решите изменить тему WordPress в будущем.
Перейдите в Настройки на главной панели управления WordPress и нажмите «Вставить верхние и нижние колонтитулы». Вставьте HTML-код в раздел «Сценарии в заголовке».
Сохраните все внесенные изменения. Ваш фавикон готов к работе!
Источник
Загрузка...
