Как установить фавикон на сайт wordpress

Установка Favicon на сайт WordPress

Рассмотрим, как добавить фавикон на сайт WordPress. Это можно сделать двумя способами: установить favicon через шаблон, а также через код header – в соответствии с рекомендациями Яндекса.

Какой должна быть иконка сайта

Рекомендуемые размеры favicon в пикселях: 16*16, 32*32, 48*48.

• PNG – самый распространенный, поддерживается всеми основными браузерами.
• SVG – векторный, рекомендуется W3C и Яндексом, поддерживается всеми современными браузерами, кроме IE8 и ниже.
• ICO – поддерживается устаревшими браузерами типа IE, выходит из обращения.

Рекомендуемые формы: квадрат, круг, ромб.

Исходя из вышеизложенного, для фавиконки оптимально подбирать равностороннее изображение 32*32, формата PNG, с сохранением прозрачности.

Если хотите соблюсти все требования поисковых систем, в частности Яндекса, то подготовьте также второй вариант иконки в SVG или PNG, но размером 120 пикселей. Конвертировать изображения можно с помощью сервиса online-convert.com.

Как установить или изменить фавикон на WordPress в шаблоне сайта

Итак, у вас есть готовое изображение PNG размером 32*32 пикселя. Для удобства назовите его icon.png .

• Войдите в панель администратора.
• В боковом меню откройте «Внешний вид» – «Настроить».
• Перейдите в «Свойства сайта» – «Выберите иконку».
• Вас перенаправит в библиотеку изображений. Загрузите подготовленное изображение icon.png .

• Нажмите «Выбрать», потом «Обрезать изображение».

• Все, favicon на WordPress загружен, нажмите «Опубликовать».
• Перейдите на главную страницу сайта – вместо логотипа WordPress отображается ваш фавикон.

Как добавить в WordPress favicon SVG в

Теперь разберемся, как добавить фавикон в формате SVG, согласно рекомендациям Яндекса.

Сначала, переименуйте подготовленный файл в favicon.svg .

• Авторизуйтесь в панели управления хостинга.
• Войдите в корневую папку.
• Загрузите в неё подготовленный файл favicon.svg .

• Вернитесь в админ-панель сайта. Откройте «Внешний вид» – «Редактор тем».
• В правом меню выберите «Заголовок ( header.php )» (если шаблон не русифицированный, то ищите «Header».

• Откройте файл header, найдите блок между и .

Добавьте туда строку:

Этим кодом Вы покажете браузеру путь до иконки.

Нажмите «Обновить файл».

Как установить фавикон в WordPress через панель управления

Этот вариант актуален в случае, если в шаблоне нет возможности редактировать тему.

После того, как фавикон переименован и загружен в корневую директорию по инструкции выше:

• В той же корневой директории откройте папку wp-content .
• Войдите в папку themes .
• Выберите каталог с названием вашего активного шаблона (в нашем случае установлен GeneratePress).

• Откройте его, выберите файл header.php .

В блок между и добавьте строку:

Нажмите «Save file».

Теперь можете быть уверенными, что вам не придет такое письмо от Яндекс.Вебмастер: «добавьте на сайт файл favicon в формате SVG или размером 120 × 120 пикселей».

Контакты

Отдел продаж:
Технический отдел:
Отдел жалоб:

Часы работы

Круглосуточно Время ожидания ответа от нескольких минут до 24 часов.

DNS-хостинг с безлимитным числом доменных имен и записей. Подробнее по ссылке https://lite.host/hosting/dns 1 месяц назад Debian 12 доступна для установки на всех виртуальных серверах. 4 месяца назад Почта для домена с безлимитным числом почтовых ящиков, оплата только за место. Подробнее по ссылке https://lite.host/pochta/dlya-domena 7 месяцев назад По данным ООО «Интернет Технологии» UPTIME за 2022 год по серверам виртуального хостинга составил 99.998%, а по виртуальным серверам 99.99%. 9 месяцев назад

Сервис LITE.HOST
Россия , Санкт-Петербург

Отдел продаж:
Техническая поддержка:
Отдел жалоб:
Круглосуточно
Социальные сети
Партнерство

Зарабатывайте вместе с нами! 15% пожизненно со всех платежей за хостинг, реселлинг и виртуальные серверы.

• Виртуальный хостинг от 84.15 ₽
• Хостинг для WordPress от 84.15 ₽
• Хостинг для Битрикс от 84.15 ₽
• DNS-хостинг от 99 ₽ в год
• VDS серверы от 140.25 ₽
• Почта для домена от 126.65 ₽

Как быстро и качественно установить favicon на WordPress: 3 подробных метода и пошаговые инструкции

Фавикон — это уникальная картинка, которая является визитной карточкой любого сайта. По нему узнаете знакомые ресурсы, соцсети, сервисы. Желательно изначально выбрать и не менять иконку сайта в будущем, и оставить на все время существования проекта. Сейчас расскажу как установить favicon на WordPress, разберу несколько методов и дам подробные инструкции.

Стандартная функция WordPress в админке

В вордпресс существует стандартная функция. Чтобы добавить в панели WordPress заходим в Внешний вид > Настроить.

Откроется окно (на сленге разработчиков) кастомайзера. Заходим в раздел Свойства сайта.

Откроется новая вкладка, находим «Выберите значок сайта».

Появится всплывающее окно с выбором файла изображения для установки или смены Favicon, можно загрузить с компьютера или выбрать с библиотеки имеющейся в базе.

Рекомендуется использовать размер не менее 512 на 512 пикселей (px).

• Выбираем откуда загрузим изображение с жесткого диска или ранее доступных в библиотеке
• Отмечаем необходимое
• Жмем Выбрать

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

В предварительном просмотре WordPress установит фавикон, и покажет, как он отображается в закладках браузера. Если все хорошо, то выбираем Опубликовать.

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

1. Mac OS
2. Ios
3. Android
4. Приложения Windows

Установить favicon на WP с помощью плагина

Единственный вменяемый плагин это «Favicon by RealFaviconGenerator» , особенность заключается в том, что он проставляет фото для всех устройств:

Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим «Выберите из библиотеки мультимедиа».

Откроется форма с выбором картинки, можете загрузить собственное или воспользоваться ранее сохраненными в WordPress. Не забудьте заранее оптимизировать фото под WP.

Далее нажимаем кнопку Генерировать.

Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку «Continue with this picture».

Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.

Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.

Как поменять иконку кодом

Ввиду разнообразия тем, бывает что способы описанные выше не срабатывают. Тогда прибегнем к методу, прописываем favicon напрямую в тему.

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

Даю код, который нужно добавить в раздел head в активной теме.

Идем в админпанели Внешний вид > Редактор и выбираем файл header.php то есть заголовок, и перед закрывающим тегом /head вставляем данный код.

1. Редактор тем
2. Заголовок header.php
3. Закрывающий тег
4. Код для вставки
5. Обновляем файл

В примере разобран файл в формате png, но если в другом, например, jpg, то в код меняем таким образом.

Видим что изменился атрибут type он стал со значением jpg, а так же расширение картинки изменилось на другое. Обновляем и смотрим на работу кода.

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

В папках по годам, будут каталоги по месяцам, в них размещены все медиафайлы блога. Вспомните, когда производили установку и найдите объект на сервере.

Яндекс не видит значок

После внесения правок любым способом, описанных в статье, пользователи хотят наблюдать значок в выдаче поисковиков. Но Яндекс и Гугл не сразу обновят информацию, потому что это связано с индексированием ресурса. Смотрите когда у поисковых систем апдейты и следите за изменениями в выдаче.

Чтобы ускорить индексирование заносите главную страницу на переобход, это сократит время обновления базы. Так выглядит настройка в яндекс вебмастере. Время изменений в выдаче от 5 до 90 дней.

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

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

Что такое favicon, почему плохо, если он отсутствует?

Фавикон – небольшая тематическая картинка – придаст вашему сайту индивидуальность и выделит его в браузере среди других веб-страниц. Установить фавикон для сайта на WordPress можно несколькими способами.

Фавикон (от английского словосочетания favorite icon) – это маленькая квадратная картинка, которая визуально представляет ваш сайт и отображается в ярлыках страниц в браузере, в закладках на страницу, и в адресной строке рядом с именем сайта. Правильно подобранный фавикон соответствует логотипу сайта или тематике информации, которая на нем содержится. При взгляде на фавикон пользователь должен безошибочно определять ваш сайт среди остальных, даже не видя его названия. Наш фавикон в закладке браузера выглядит так:

В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif. Картинка фавикона бывает разных габаритов, обычно применяются размеры 16×16, 32×32, 48×48, 64×64, 128×128 или 512×512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.

Как сделать фавикон для сайта онлайн?

Если на вашем сайте отсутствует фавиконка, картинку для фавикона можно подобрать в интернете или нарисовать самостоятельно в специальном онлайн-сервисе для генерации иконок.

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

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

Поставить favicon средствами ВордПресс

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

1. В меню «Внешний вид» войдите в пункт «Настроить» и выберите «Свойства сайта».
2. В предложенном списке действий можно настроить отображение иконки сайта. Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой.
3. Чтобы применить настройку к сайту, нажмите кнопку «Сохранить и опубликовать». Убедитесь, что на ярлыке страницы в браузере появился фавикон.

Вставить фавикон используя возможности WordPress шаблона

В некоторых темах WordPress заложена дополнительная возможность по установке иконки сайта.

1. Войдите в меню «Внешний вид» и выберите пункт «Настроить».
2. Дальнейший путь к настройкам зависит от используемого шаблона. Как правило, фавикон устанавливается в общих настройках темы. Найдите соответствующую команду и загрузите файл с картинкой.
3. Не забудьте подтвердить изменения нажатием кнопки «Сохранить и опубликовать».

Добавить в файл header.php

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

1. С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
2. В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
3. В списке шаблонов откройте файл заголовка header.php (3).
4. После открывающего тегавставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
5. Нажмите кнопку «Обновить файл» (5), чтобы применить иконку к сайту.

Установка favicon используя плагин Favicon by RealFaviconGenerator

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

В меню «Плагины» выберите пункт «Добавить новый». Найдите, установите и активируйте плагин Favicon by RealFaviconGenerator. Затем зайдите в меню «Внешний вид» (1), после установки плагина в нем появится пункт Favicon (2) для загрузки иконки. Нажмите кнопку «Выберите из библиотеки мультимедиа» (3) и укажите расположение файла с иконкой на вашем компьютере. Нажмите кнопку «Генерировать favicon» (4).

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

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

Почему лучше установить без использования плагина?

Для сохранения фавикона в качестве иконки сайта плагин должен оставаться активным. При его деактивации фавикон отображаться не будет.

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

iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.

• Виртуальные серверы с NVMe SSD дисками от 299 руб/мес
• Безлимитный хостинг на SSD дисках от 142 руб/мес
• Выделенные серверы в наличии и под заказ
• Регистрацию доменов в более 350 зонах

Favicon для сайта WordPress

Favicon для сайта WordPress можно установить разными способами. Я уже рассказывал, как установить иконку на сайт WP при помощи плагинов и установить специальные коды в шаблон сайта. В этой статье я опишу еще один способ установки favicon для сайта WordPress. Установим специальный код в файл functions.php шаблона.

Favicon для сайта WordPress (favorites icon) или иконка сайта, придает сайту индивидуальность и, через узнаваемость закладок, может влиять на его посещаемость. Однако, неудачно установленный favicon может увеличивать время загрузки сайта. В этой статье рассмотрим установку иконки сайта через файл functions.php .

Новое: Установка иконки favicon на WordPress в 2022-2023 году

Шаг 1.

Подготовьте три одинаковые картинки иконки в разных форматах:

• Для Яндекс: файл картинки в формате svg размером 120х120, используйте конвертер, например, convertio.co/ru;
• Для Google: файл картинки в формате ico размером кратным 48х48 (96х96, 144х144) или svg в любом формате (подойдёт иконка для Яндекс)
• Для мобильных платформ: в формате png размером 180х180.
• Сожмите иконки в любом онлайн-сервисе оптимизации картинок например, iloveimg.com/ru.

Шаг 2.

Загрузите все иконки в корневой каталог своего сайта по FTP или файловый менеджер хостинга.

Шаг 3.

Используя плагин типа «Head and Footer Scripts Inserter» добавьте в элемент (раздел) head вашего сайта следующие три ссылки (для Google, Яндекс и мобильных платформ):

Favicon для сайта WordPress тоже работают

Одним из вариантов установки иконки является размещение иконки в корневом каталоге, с добавлением кода в файл functions.php . Для этого способа установки favicon на сайт нужно сделать три шага.

• Сделать картинку favicon.ico на любом генераторе favicon;
• Загрузить картинку favicon.ico в корневой каталог сайта;
• Поместить код в файле functions.php .

Остановимся на каждом шаге подробнее.

Сделать картинку favicon.ico на любом генераторе favicon

В статье «Установка иконки favicon на сайт WordPress» я подробно рассказывал, как сделать картинку favicon.ico . В этом нет ничего сложного. Делается она на любом генераторе иконок, в режиме on-line. Не требуется устанавливать на компьютер дополнительных программ. Делается картинка в формате .ico из картинки любого размера и любого формата.

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

Будем считать, что свой favicon вы сделали. Будем размещать его на сайте.

Мало? Держите список сервисов для создания иконок:

• iconfinder.com
• freepik.com/free-icons
• fian.my.id
• ru.iconka.com
• genericons.com
• materialdesignicons.com
• flaticons.net
• iconbird.com
• iconizer.net
• webhostinghub.com
• iconspedia.com
• iconsearch.ru
• icons8.com
• glyphicons.com
• findicons.com
• icomoon.io
• iconarchive.com
• themify.me
• fontawesome.io
• thenounproject.com
• flaticon.com
• fontello.com

Загрузить картинку favicon.ico в корневой каталог сайта

Сделанный Favicon для сайта WordPress, при помощи FTP соединения, закачиваем в корневой каталог вашего сайта, скорее всего в папку [publ-html] или [httpdocs] .

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

Разместить код в файле functions.php

Остается поместить код в шаблоне сайта. Для этого авторизуемся в административной панели. В консоли открываем: Внешний вид →Редактор.

В редакторе справа из списка файлов шаблона доступных для редактирования, ищем файл functions.php . Открываем его для редактирования. Не забывайте, перед редактированием сделать резервную копию сайта. Также, без опыта, редактируйте файлы на из консоли, а в любом текстовом редакторе, например, Notepad++.

В любое место раздела THEME SETUP вставляем следующий код

// add a favicon to your function my_favicon() < echo ''; > add_action('wp_head', 'my_favicon');

Не забываем сохраняться.

Важно: Если не хватает опыта, то используйте для вставки кода в файл functions.php плагин Code Snippets.

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

На этом все! Тему Favicon для сайта WordPress закрываю. На сайте получились три статьи, где я рассказывал о трех вариантах установки уникальной иконки на свой сайт WP. Читать другие статьи:

• Установка иконки favicon на сайт WordPress,
• Плагины WP для установки favicon (иконок) на сайт WordPress

Дополнения

Начиная с версии WordPress 4.3 в ядре сайта появилась функциональность favicon. Теперь не нужно работать с кодом сайта или использовать сторонние плагины для добавления иконки сайта. Во всех темах WordPress установка (замена) фавикона (значок сайта) есть по умолчанию.

Чтобы установить фавикон сайта:

• Авторизуйтесь в административной панели сайта;
• Войдите на вкладку Внешний вид>>>Темы или Внешний вид>>>Настройки;
• В первом варианте выберите рабочую тему и перейдите в её настройки;
• На странице настроек темы откройте вкладку «Свойства сайта» и загрузите иконку сайта минимального размера 512 на 512 пикселов;
• Сохранитесь.

Однако, сервисы вебмастера могут этот фавикон не видеть. Будут вам об этом сообщать, тогда вернитесь в начало статьи “Новое…”

Еще статьи

• Восстановить пароль администратора WordPress
• Как безопасно редактировать файлы wordpress
• Оптимизация URL на сайте WordPress
• Изображения, фото и галереи в статьях WordPress
• Мусорная корзина WordPress
• Метки WordPress, как с ними работать
• Страницы WordPress: всё про страницы WordPress

Похожие посты:

• Установка иконки favicon на сайт WordPress
• Плагины WP для установки favicon (иконок) на сайт WordPress
• 27 лучших плагина WordPress, которые вы должны использовать в этом году
• Перенос сайта с Blogger на WordPress
• Как сжать изображения WordPress: Плагин EWWW Image Optimizer
• Проверка сайта перед запуском – пошаговое тестирование нового сайта
• 14 Плагинов для эффекта Lightbox на сайте WordPress
• Простые кнопки присоединяйся на WordPress сайте
• Плагин Google AdSense WordPress уникальный инструмент для размещения рекламы Google