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

Доброго здравия, друзья!

Сегодня я бы хотел рассказать вам как добавить фавикон (favicon) на свой сайт WordPress.

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

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

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

Это может помочь повысить узнаваемость бренда и даже улучшить пользовательский интерфейс (UX) сайта.

В этой статье мы обсудим преимущества использования favicon на сайте WordPress. Затем я объясню, как его создать, и рассмотрим три простых варианта добавления его на свой сайт.

Наконец, я завершу эту статью некоторыми советами и лучшими практиками WordPress. Давайте начнем!

Преимущества использования фавикона WordPress

Если у вас когда-либо открывалось слишком много вкладок одновременно, Вы, вероятно, оцените полезность значка.

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

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

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

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

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

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

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

В противном случае давайте посмотрим, как создать свою картинку favicon.

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

JPEG также широко поддерживается, но не во всех версиях Internet Explorer, что делает его менее идеальным для использования favicon.

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

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

RealFaviconGenerator (облачная версия плагина, которую мы обсудим позже) — отличный вариант, потому что:

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

Другие полезные генераторы значков:

• Favicon.cc, который позволяет вам создать favicon с нуля или загрузить существующее изображение.
• Favicon Generator, который работает аналогично RealFaviconGenerator.

Чтобы использовать RealFaviconGenerator, начните с загрузки изображения, которое вы хотите использовать, щелкнув по «Select your Favicon image» (Выберете ваше изображение для favicon):

На следующем экране вы можете настроить конкретную информацию о вашем наборе значков (при желании).

Когда вы закончите, прокрутите вниз и нажмите «Generate your Favicons and HTML code» (Создать свой favicon и HTML код для него):

На следующей странице щелкните «Favicon Packages», чтобы загрузить изображения значков:

Не забудьте оставить эту страницу открытой, если вы планируете вручную добавить значок на свой сайт.

Советы по созданию фавикона WordPress

Есть несколько советов по дизайну и форматированию, которые стоит упомянуть и изучить перед созданием своего значка. Самое главное, рекомендуемый размер значков — 512×512 пикселей.

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

WordPress поставляется со встроенной функцией обрезки изображений сайта, если вы добавляете их через настройщик (который мы вскоре рассмотрим).

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

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

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

Как добавить фавикон WordPress на свой сайт (3 простых варианта)

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

1. Использование настройщика WordPress для загрузки вашего фавикона

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

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

Все, что вам нужно, это изображение размером не менее 512×512 пикселей. Остальную часть процесса возьмет на себя WordPress. Для начала перейдите во «Внешний вид — Настроить» на панели инструментов WordPress:

Оттуда перейдите на вкладку «Свойства сайта»:

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

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

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

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

Если ваше изображение еще не является идеальным квадратом (например, 512×512 пикселей), WordPress даст вам возможность обрезать его на следующем экране.

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

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

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

Это оно! Все, что вам нужно сделать, это выбрать «Сохранить и опубликовать», чтобы ваш favicon стал активным.

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

2. Установка плагина для добавления вашего фавикона WordPress

Если вы предпочитаете плагин для встроенных функций значков сайта WordPress, вы можете использовать популярный бесплатный плагин под названием «Favicon by RealFaviconGenerator» (облачный инструмент, который мы обсуждали ранее).

Этот плагин так же прост в использовании, как и собственный настройщик WordPress.

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

После активации плагина перейдите во «Внешний вид — Favicon», чтобы создать свой набор фавиконов.

Все, что вам нужно сделать, это выбрать или загрузить изображение размером не менее 70×70 пикселей (в идеале 260×260 пикселей):

После выбора изображения нажмите «Создать favicon». Когда вы нажмете эту кнопку, плагин перенесет вас за пределы вашего сайта WordPress на сайт RealFaviconGenerator.

В нижней части сайта прокрутите страницу вниз и выберите «Создать значок favicon и HTML-код» (смотрите предыдущий раздел).

Пока инструмент работает, Real Favicon Generator отправит вас обратно на панель управления WordPress:

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

3. Добавление значка вручную через FTP

Если вы предпочитаете делать что-то вручную, можно добавить значок на свой сайт WordPress через протокол передачи файлов (FTP) или диспетчер файлов, если ваш хост использует cPanel.

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

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

Чтобы вручную добавить значок WordPress на свой сайт, вам необходимо:

1. Получите доступ к файлам вашего сайта либо через FTP-клиент, либо через файловый менеджер в cPanel вашего хостинга.
2. Найдите корневой каталог вашего сайта и загрузите содержимое вашего пакета favicon (favicons.zip).

Файлы должны находиться в той же папке, что и ваши папки wp-admin и wp-content. Затем возьмите код, который RealFaviconGenerator предоставил вам ранее, и либо:

• Используйте такой плагин, как «Insert Headers and Footers», чтобы добавить его в заголовок вашей темы.
• Вставьте его прямо в раздел <head> вашей темы, отредактировав файл header.php вашей темы.

Использование плагина «Insert Headers and Footers» оптимально, потому что он гарантирует, что вы не потеряете свой значок, если в будущем измените тему WordPress.

Для этого установите и активируйте «Insert Headers and Footers». Затем перейдите в «Настройки — Insert Headers and Footers» и вставьте свой код в раздел «Scripts in Header» (Сценарии в заголовке):

Обязательно сохраните изменения. Теперь все готово!

Дополнительные советы по использованию favicon WordPress

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

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

Вы также можете рассмотреть возможность использования сети доставки контента (CDN) для обслуживания ваших изображений значков.

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

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

Когда вы устанавливаете Cloudflare или такую службу, как KeyCDN, браузеры посетителей загружают ваш значок с вашего CDN, а не с сервера вашего сайта.

Если вы используете такой плагин, как «CDN Enabler», он должен автоматически переписать ваш URL-адрес фавикона WordPress для работы с вышеуказанными методами.

Резюме

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

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

1. Использование настройщика WordPress для загрузки значка сайта.
2. Установка плагина, например «Favicon by RealFaviconGenerator».
3. Добавление значка вручную через FTP-клиент или файловый менеджер.

А я на этом буду заканчивать этот пост — надеюсь он будет вам полезен.

До скорых встреч и берегите себя!