Фавиконы в WordPress: как добавить и изменить

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

Термин «фавикон» сокращенно означает «любимая иконка». Маленький значок является неотъемлемой частью присутствия компании в Интернете. Он отображается на панели вкладок браузера, в списке закладок, в мобильных приложениях WordPress и в результатах мобильного поиска. Поэтому важно выбрать простой, но выразительный символ для фавикона. Добавление фавикона на ваш сайт WordPress дает следующие преимущества:

• Он придает вашему сайту более серьезный и профессиональный вид.
• Пользователю легче узнать вашу компанию и то, чем она занимается, что улучшает впечатление пользователя от вашего сайта.
• Это положительно влияет на SEO.
• Если у пользователя открыто несколько вкладок в браузере, заголовки страниц не будут отображаться, но фавикон всегда будет виден.

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

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

Если вы выберете этот способ управления фавиконом в WordPress, ваш фавикон должен иметь минимальный размер 512×512 пикселей. Однако, поскольку на вкладке браузера иконка будет отображаться с размером 16×16 пикселей, вы должны быть уверены, что ваш логотип все еще узнаваем в таком масштабе. Сейчас мы пошагово объясним, как установить favicon в WordPress с помощью Customizer.

В приборной панели WordPress нажмите на «Внешний вид», а затем «Настроить».

Откроется WordPress Customizer. Далее нажмите на «Site Identity».

В этой области вы можете задать заголовок и теглайн вашего сайта. Эта информация отображается рядом с фавиконом во вкладках браузера. В разделе «Значок сайта» нажмите на «Выбрать значок сайта», чтобы установить свой favicon в WordPress.

На следующем шаге откроется медиатека WordPress. Если вы уже загрузили свой фавикон в WordPress, вы можете просто выбрать его. В противном случае нажмите на «Upload Files» и выберите файл из папок на вашем компьютере. Подтвердите свой выбор, нажав на кнопку «Выбрать».

Затем у вас будет возможность обрезать выбранное изображение. WordPress автоматически показывает предварительный просмотр вашего фавикона в меню справа. Как только вы закончите обрезку, подтвердите свой выбор, нажав кнопку «Обрезать изображение». Если ваше изображение уже имеет правильный размер, просто нажмите «Skip Cropping».

После этого WordPress автоматически внедрит ваш фавикон. Если вы хотите изменить фавикон снова, просто вернитесь в WordPress Customizer, как описано выше.

WordPress предлагает плагин практически для каждой функции, которая может вам понадобиться, поэтому, естественно, есть плагин и для фавиконов. Одним из самых популярных бесплатных плагинов является Favicon от RealFaviconGenerator. Этот плагин предоставляет больше возможностей для редактирования, чем WordPress Customizer, поэтому вы можете улучшить совместимость вашей фавиконки с различными устройствами и иконками приложений. Далее мы объясним, как вы можете использовать этот плагин для добавления фавикона в WordPress.

Чтобы установить плагин, откройте раздел «Плагины» в приборной панели WordPress и нажмите на кнопку «Добавить новый».

Найдите плагин «Favicon by RealFaviconGenerator», затем выберите его в результатах поиска и нажмите «Установить сейчас». Наконец, нажмите «Активировать». Теперь плагин готов к использованию.

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

Нажмите кнопку «Выбрать из медиатеки», чтобы открыть медиатеку WordPress и выбрать изображение, которое вы хотите использовать в качестве фавикона. Минимальный размер изображения должен составлять 70×70 пикселей, однако рекомендуется использовать изображение размером 260×260 или больше. После выбора изображения подтвердите свой выбор кнопкой «Generate favicon».

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

Если вы закончили вносить изменения или хотите пропустить оставшиеся шаги, прокрутите страницу до самого низа и нажмите на кнопку «Generate your Favicon and HTML Code».

После этого плагин направит вас обратно в бэкэнд WordPress и подтвердит успешную установку фавикона.

WordPress также позволяет во многих случаях вносить изменения вручную. Так, вы можете добавить фавикон на свой сайт WordPress с помощью протокола передачи файлов (FTP). Вам понадобится пакет favicon с различными файлами и HTML-кодом. И то, и другое можно легко создать с помощью онлайн-инструмента.

Откройте онлайн-инструмент для создания фавикона. В данном примере мы используем «Real Favicon Generator». В приложении нажмите на кнопку «Select your Favicon image», чтобы загрузить соответствующее изображение.

Далее у вас будет возможность редактировать свойства изображения, такие как размер и фон. Когда вы закончите вносить необходимые изменения, нажмите на кнопку «Сгенерировать ваши фавиконы и HTML-код» в нижней части страницы.

На следующем этапе вы можете загрузить пакет фавиконов и скопировать HTML-код. Скачайте пакет и назовите его «favicon.ico», чтобы он был распознан как favicon.

Теперь вы можете использовать FTP для доступа к данным WordPress. Откройте главный каталог и загрузите туда пакет favicon. Убедитесь, что вы находитесь в той же папке, что и папка WP admin или WP content.

Наконец, откройте файл header.php и вставьте HTML-код для фавикона в область заголовка. Убедитесь, что ваш домен и путь к фавикону введены правильно.