Favicon wordpress как установить

Favicon wordpress как установить. Лучший и самый грамотный способ рекомендуемый yandex.

Необходимые знания.
Нужно уметь добавлять код между тегами head.
Нужно уметь добавлять файлы в корень сайта.

Последовательность действий кратко:

  1. Создать картинку 512px на 512px в формате jpg или png (если хотите прозрачный фон).
  2. Загрузить картинку на онлайн сервис и сгенерировать favicon.
  3. Загрузить результат на свой сайт.

(* Результат это несколько иконок, напоминает создание иконок для приложения телефона там тоже нужно создать массу иконок под телефон, планшет PC и др.)

Последовательность действий подробно.

Переходим на сайт онлайн генератор фавикон.

Фавикон

Жмем на синюю кнопку Select your Favicon image (Выбрать изображение для иконки) и выбираем наше подготовленное изображение.

fav icon

Смотрим как выглядит наше изображение и жмем синюю кнопку Continue with this picture (Продолжить с этой картинкой)

Установить вставить добавить svg

Смотрим как будет выглядеть наше изображение на различных платформах.
Прокручиваем в самый низ и жмем синюю кнопку Generate your Favicons and HTML code (Генерировать фавикон и HTML код)

favicon generator

Так выглядит результат:

  1. Загрузите архив иконок.
  2. Инструкция-загрузите иконки в корень сайта(иконки в корень сайта следует загружать поштучно, а не в архиве или папке)
  3. Скопируйте и вставьте код (код на черном фоне) в заголовок страницы между тегами head.
  4. Можете проверить корректно ли отображаются иконки на вашего или любого другого сайта.
фавикон wordpress

Заходим в админку своего сайта wordpress и добавляем код между тегами head. (Если у вас коммерческая тема то код можно добавит в настройках темы вставив его в форму специально предназначенную для этого)

Например у меня это выглядит так:

head

Дугой способ добавить информацию в head это скачать плагин.

А все иконки поштучно кидаем в корень сайта. (Для этого нужно зайти в файловый менеджер и выбрать папку с названием сайта).

После того как всё сделали можно проверить результат введя адрес сайте в этом окне

проверка favicon

Должно получится как на рисунке, зеленый маркер.

favicon wordpress как установить

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


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

Является ли мой favicon.ico правильный? На этот простой вопрос часто поучают неожиданные ответы…
Хорошо ли фавикон выглядит на iOS?
Хорошо ли выглядят на iPhone 6? (да, iPhone 6 более требователен, чем предыдущие поколения)
У меня есть favicon.png. Это нормально, верно?
Я слышал о Windows Surface. Мне есть что с этим делать?

Послесловие
Сайт хороший, и что бы добиться результата достаточно одной минуты. И это обязательно принесет пару лишних CEO балов вашему сайту.
realfavicongenerator