Favicon WordPress сайта — инструкция как создать и установить фавикон

Дата публикации: 9 декабря 2023
Дата обновления: 21 января 2024
Антон Маркин
10 253
Время прочтения: 35 минут
Нет времени читать? Но ты хочешь запутить рост своего сайта по SEO?
Попробуй изучить бесплатный мини-курс "Вектор SEO" Маркина Антона
4 УРОКА
которые помогут тебе найти критические проблемы на сайте
и запустить его рост
Где тебе выслать уроки?!
Программа курса
4 этапа
Пошаговый план
После которых ты точно поймешь как устроенно SEO-продвижение
В рамках этого урока мы разберем типовые проблемы распределения семантики по страницам сайта.
И эти проблемы есть практически у каждого. Уверен, что и у себя ты найдешь многие из них.
Урок № 1
Виды проблем
Продолжительность урока 20 мин 41 сек
Результат
Разберем типовые проблемы, которые есть у 90 % сайтов
В рамках этого блока мы разберем типовые проблемы распределения семантики по страницам.
И эти проблемы есть практически у каждого. Уверен, что и у себя ты найдешь многие из них.
Этап № 1
Виды проблем
Результат
Разберем типовые проблемы, которые есть у 90 % сайтов
Продолжительность урока 20 мин 41 сек
Результат
Исправишь найденные ошибки своими руками
Начинаем лечить. Покажу особенности упрощения и методы автоматизации, которые позволят исправить весь веб-ресурс буквально за пару дней.
Этап № 3
Решение проблем
Продолжительность урока 17 мин 49 сек
Этап № 4
Позиционка, выход в ТОП
Главный этап курса! В рамках этого занятия я покажу как решить ключевую проблему релевантности страниц.
Когда страницы с виду и в порядке,
но поисковик упорно не хочет ставить ее в ТОП по необходимым нам запросам.
Результат
Сайт подтянется
по позициям и покажет рост
Продолжительность урока 42 мин 03 сек
В рамках этого занятия я покажу как массово, буквально в несколько кликов проанализировать весь сайт и найти проблемы мешающие ранжированию, о которых мы говорили в прошлом уроке.
Этап № 2
Выявление проблем
Массово найдем все проблемы своего ресурса
Продолжительность урока 29 мин 25 сек
Результат
Спикер курса
Меня зовут Антон Маркин и я покажу тебе настоящее SEO 2023 года
Еще не знаком со мной?
Посмотри это видео
Урок "Как я давал гарантии на SEO"
Бонус № 2
Бонус № 1
SEO чек-лист из 160+ пунктов проверки сайта, а так же список из 27+ сервисов для SEO
Кейсы и отзывы
моих учеников
Говорят сами за себя. Они уже успели пройти и внедрить техники из этого курса и получили результат
И это все классическое белое SEO, которое будет работать всегда, как бы не изменились алгоритмы поисковых систем
Не уверен, что бесплатная инфа может быть полезной?!
Василий Лебедев
СЕО-специалист - профиль в VK
"Антон, приветствую.
Хочу поделиться окупаемостью вложений в твой курс. (Видишь в нашей переписке у меня пункт в голове по экономике, не могу по другому:))
Вчера заработал на том, что в моих навыках есть технологии Маркина, и об этом узнал мой партнер, передал заказчику и я закрыл на небольшое сопровождение. В итоге получается 45 т.р. Вот подробности:

Мой партнер верстальщик попросил проконсультировать фирму по их проекту по оптимизации. Он выступил как субподрядчик и порекомендовал меня как специалиста. Я посмотрел интернет-магазин на WordPress по продвижению медицинского оборудования. Тема знакомая. Реализация как интернет магазин. Все вроде ясно. Когда я общался, то использовал лексику к которой привык в Закрытом сообществе.
Получилось что в середине беседы мне прилетел вопрос - "не проходил ли я курс Маркина?" скрин скину ниже. Я ответил, что применяю технологи т.к. освоил флагманский курс.
Результат:
В результате вчера я закрыл этого клиента на небольшую работу на 15 т.р./ мес. На 3 мес. Это итого 45 т.р.
По трудоемкости сам понимаешь дело небольшое от слова совсем:)
Позиционное продвижение. Нужно прокапать по текстовой релевантности 2 ветки структуры и выдать рекомендации по внесению изменений в виде ТЗ на моего клиента. Он верстальщик на этом проекте. Он их внедряет. Я отслеживаю динамику позиций. Даю рекомендации по контексту на отобранные ключи и их директологи льют на эти ветки.
И так три месяца. Каждый месяц по 2 ветки.
Понятно, что это не полноценный проект. Но мне сейчас полный проект поставить уже не куда. Весь график забит. А так совсем небольшая подработка но уж очень приятная.
Спасибо за технологии. Отдельное спасибо за работу, которой теперь стало очень много:)"
Андрей Девяткин
Частный СЕО оптимизатор - профиль в VK
"Привет Антон!

Давно хотел тебе написать спасибо! Но так как я интроверт, хорошо замаскировавшийся под экстраверта, постоянно, откладывал на потом, но курс в мастер группе меня откорректировал)) И так по порядку.

Начнем с того, что твои флагманы это просто бомба!!!! Те, кто хочет развиваться в теме разработки и продвижения и еще их не прошел это просто «унылые теплодоки», другого слова я не подберу.

У меня в СЕО, как я считаю, довольно не малый, в этой теме я с 2008 г. Работал и в агентствах, где ничему никогда не учили, на стороне клиента, это более теплые воспоминания и в крупных компаниях Инком-недвижимость, Mytoys, в том числе в качестве руководителя отдела даже снимал офисы, открывал свои агентства на заре кризисов, падения рубля и инфляции. Все было)))

Самое главное, чему учат твои курсы, помимо профессионализма и компетенций (это понятно) - это отделять зерна от плевел, в потоке информации. В SEO это очень важно, так как много различных «псевдогуру», форумов, где диванные эксперты советуют, то другое, Сами не разбираясь не то. что в нюансах, а даже с самой теме. Так что низкий тебе поклон. Ни разу не пожалел, не то что денег, но и времени на их прохождение, думаю время — это более ценный эквивалент, по сравнению с деньгами.

Мало того, что касается денег, они уже давно «отбиты» на клиентах, которых я получил благодаря прохождению курсов и закрытого сообщества.

Оооо.. закрытое сообщество это вообще отдельная тема для размышления, такого круга специалистов и самое главное такой теплой «ламповой» атмосферы, как в закрытом сообществе в нашей сфере больше не найти и это факт! Те, кто ещё о чем-то думают, брать/не брать курс вступать/не вступать «злостные прокрастинаторы» ))) И никак иначе!

А что касается отдельного потока мастер группы. Это прямо волшебство на самом деле. Проект не просто успешный, а суперуспешный. Я за месяц поднял уровень дохода, в более чем в 2,5 раза, и почти перевалил за 300 т.р. если нужно предоставлю скрины с клиент банка. Начал заниматься делегированием, чего раньше боялся, не хотел, и прочее, начал считать деньги, почему я этого раньше не делал, не знаю. Но после этого момента доход по сути и начал расти. Это очень важное качество уметь считать деньги. И я наконец это понял! Исправил кучу своих комплексов, а как у интроверта, у меня их не мало, хоть и тщательно скрываются. Думаю, ты понимаешь, о чем я )))

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

Все поток накопившихся мыслей излил ))) Это прям от души! "
Александр Зудили
Частный СЕО-специалист - профиль в VK
Собственно ради ускорения и удешевления продвижения, я пошел на новый курс к Антону

На прошлой неделе закончился этот курс, где я отрабатывал полученные знания на интернет-магазине, продающем спортивное питание и БАДы.

И крайний месяц выдался достаточно жесткий...


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

Магазин уже был достаточно проработан, многое впитал от сильных конкурентов. При этом изначальные ~200 категорий на сайте WordPress мне удалось расширить до 460. Дальше по плану работа с позиционкой и блогом.

Самое главное

К концу месяца мне удалось ускориться в 2.5 - 3 раза (!) и удешевить себестоимость продвижения раза в 4 (благодаря отказу от JM)!

Но я б**ть перегорел


Курсом остался полностью доволен. Огромное спасибо Антону. И отдельное спасибо Евгению за терпение и возможность обкатать технологии на своем веб-ресурсе.
Максим Полднев
Частный сео оптимизатор - профиль в VK
"Хотел выразить благодарность за курс.. Прошел его от корки до корки 2 раза.. Реализовал на одной рубрике - результат - летящая ракета.. Блин, все работает!! Магия какая то.. Джаст Меджик прям )) Спасибо, что открыл мне глаза на СЕО, окупил курс уже 2 раза за первую неделю после прохождения (просто позвонил одному из своих клиентов и взял его теперь уже на сео прокачку).. Информация которую ты даешь - стоит намного дороже, чем стоимость курса, а уверенность в свои силы - это просто бесценно. Представляю, какая инфа проскакивает в закрытом сообществе ...... ))) 
"
Дмитрий Перепелкин
СЕО специалист - профиль в VK
"Антон, привет, хочу поделится своей историей, как по твоим технологиям с нуля сделал сайт на WordPress, и в серьезной нише залетел в ТОП как Илон Маск в список Форбс))))
Ниша - печать и вышивка на одежде. Регион продвижения - Москва.
Когда начинал, все на меня смотрели как на дурачка, мол куда ты лезешь, там серьезная конкуренция, люди миллионы вваливают в рекламу....
Спокойно, Маша, я Дубровский....
Глубокая проработка семантики, глубочайший анализ конкурентов, качественная проработка структуры в целом и по блоковое содержимое каждой страницы, идеальной выведение текстовой релевантности... И Вуаля, пушечный рост! С момента запуска проекта и до момента выхода высокочастотников в ТОП менее 3-х месяцев...
Кстати, одна из фишек, про которую ты говорил, работает реально)))
В частности: лучший дизайн - это отсутствие дизайна.
Сама ссылка:
print-in-moscow. ru (убери лишние проблемы)
Ну а показатели говорят сами за себя!"

Многие запоминают сайт по маленькой картинке, которая находится вверху браузера на вкладке. Эта image называется фавикон и важно, чтобы он был у вас на блоге. А как правильно и быстро сформировать favicon и установить в CMS WordPress, мы сейчас подробно расскажем.

Что такое favicon

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

А еще в выдаче поисковой системы Яндекс, перед каждым сниппетом расположена иконка. Лично мне так проще найти нужный ресурс. Особенно, когда не знаешь на каком месте он находится и приходится просматривать несколько страниц поиска.

Рекомендуем в качестве фавиконки использовать логотип компании. Это самый часто встречающийся элемент и его быстро запоминают читатели. Имейте ввиду, что размер image должен быть 16*16 px и при этом картинка должна быть различима.

Где можно увидеть favicon

Иконка сайта создает уникальность и запоминаемость всего веб-ресурса WordPress. Когда ее не устанавливают, то вместо картинки отображается серый круг в виде земного шара. Заметить favicon можно в таких местах, как:
Вкладка браузера;
Закладки в браузере;
Сниппет Яндекса;
Поиск Google на Android;
Icon на рабочем столе компьютера или мобильного устройства;
Адресная строка Opera, Firefox, Safari и возможно других браузеров.

Формат фавикона WordPress

В конце девяностых годов изображение форматом 16х16 px загружали в виде файла favicon.ico в соответствующую корневую директорию сайта WordPress. А впервые эти image еще в 1999 году начал показывать browser Internet Explorer 5 в избранных закладках.

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

Контейнер html разметки ICO может хранить несколько image разных форматов, например, такие как:
16х16
24х24
32х32
48х48
64х64
128х128
ICO читают все браузеры, но из-за множества img картинок, файл долго грузится. Поэтому сейчас на смену ICO пришли новые современные форматы, такие, как:

SVG — это векторный формат, т.е. при увеличении он не искажается, потому, что сделан не из пикселей, а из векторов. Создать изображение в таком формате можно только на определенных программах, например, ADOBE ILLUSTRATOR ИЛИ FIGMA.

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

Можно конечно загрузить favicon в формате JPEG или GIF, но тогда они будут долго загружаться, потому, что тяжелые. Для seo оптимизации собственного сайта WordPress важно, чтобы скорость загрузки была как можно меньше. Поэтому самый оптимальный вариант, это все таки PNG, убедитесь, что у вас именно он.

Размеры фавикона WordPress

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

Чтобы воплотить такую идею придется подготовить файлы разных размеров для загрузки в WordPress. В таблице мы показываем для каких браузеров какие подойдут размеры.
Также не будет лишним загрузить два файла конфигурации в которых напишите правила использования картинок для Safari и Windows.

А macOS Safari будет искать файл safari-pinned-tab.svg векторную image. Если его не будет, то покажет скриншот страницы.

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

Как правильно создать favicon

Обычно favicon делают из логотипа. Но надо, чтобы в уменьшеном виде логотип был разборчив. И еще, иконка должна быть квадратной, а логотипы обычно прямоугольные. Поэтому можно или изменить логотип или взять вообще другое image.

В WordPress favicon загружается одного формата, а CMS сама создает из него все необходимые размеры. Это очень удобно, не придется ломать голову, где сделать такое количество картинок разных видов.

Чтобы загрузить в WordPress ваше изображение, нужно найти , где в теме, которую вы используете это можно сделать.

Обычно в меню управления WordPress заходите во “Внешний вид” - “Настроить”. Затем ищите “Свойства” и там загружаете фавикон.

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

Есть еще один вариант создания иконок разных размеров. Это онлайн генератор favicon. С его помощью можно бесплатно сгенерировать весь комплект всех размеров. Вот какие настройки делаются в онлайн-генераторе:
Установка любого фона;
Настройка теней;
Добавление текста на изображение;
Сжать картинку для уменьшения веса;
Создать кружочек из квадрата или просто закруглить края;
Регулировка размера фото под кружок для WordPress;
Создать SVG для вкладок macOS Safari;
Сделать манифест для Android Chrome;

Также генератор сможет быстро заготовить конфигурационный файл browserconfig.xml для Windows и создать комплект иконок. Этот комплект необходимо загрузить в корневую директорию домена.

Установка фавикона на WordPress

Загрузка сгенерированных изображений иконок

По умолчанию, когда вы создаете новый сайт на CMS WordPress, автоматически favicon будет в виде буквы “W” в кружочке. После загрузки своей картинки, начнет показываться она.

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

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

Установка кода с генератора фавикона

Если у вас набор иконок в html-формате, то пропишите весь код перед закрывающим тегом /head. Это можно сделать с помощью плагина Clearfy Pro, он платный, но решает очень много вопросов с технической настройкой сайта на WordPress.
А если не хотите покупать этот плагин, тогда просто зайдите в админку WP во “Внешний вид”, затем “Редактор тем”. Там найдите header.php (заголовок) и найдите в его коде /head, пропишите код перед ним и нажмите внизу на синюю кнопку “Обновить файл”. Так сохраните все изменения.

Рекомендуем всегда перед операциями с кодом сайта делать бэкап. Тогда если что-то сделаете не правильно, то можно будет восстановить свой веб-ресурс.

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

Сейчас расскажем про самый распространенный способ установки иконки блога. Это применимо не только к WordPress, но и вообще к любой CMS.

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

Там же, в корневой директории заходите в файл header.php действующей темы и перед закрывающим тегом /head вставляете следующий код:
<link rel=”shortcut icon” type=”image/png” href=”/favicon.png”/>

Не забывайте, что у вас файл favicon.png может быть вида favicon.jpg, тогда исправьте этот момент в коде.

Если движок вашего сайта WordPress, то код можно вставить через админку. Проделайте все так, же как мы рассказывали раньше:

  1. Внешний вид
  2. Редактор тем
  3. Заголовок (header.php)
  4. Вставляем код перед тегом /head

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

Установите и активируйте плагин Favicon by RealFaviconGenerator. Его логотип появится в админке WordPress, эта функция бесплатная. Заходите в него, но предварительно загрузите иконку в библиотеку мультимедиа.

Если иконка уже есть в архиве медиафайлов, то нажимайте “Выберите из библиотеки мультимедиа”. В открывшемся окне выбираете свою image и нажимаете на кнопку “Генерировать favicon”. Затем нажимаете далее, далее и все готово.

Расположение картинки сайта

Если вы устанавливали иконку через админку WordPress, то она размещается по следующему пути: /public_html /wp-content /uploads.

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

Если ищите favicon, то вспомните, когда примерно его устанавливали и так найдете. Посмотрите внимательно, вы добавляли одно image, а там их несколько штук разных размеров.

Проверка иконки сайта WordPress

Если вы пользовались для генерации комплекта фавиконок Favicon Generator, то воспользуйтесь им же для проверки правильности установки. Для этого вставьте скопированный адрес веб-ресурса в Favicon Checker и после этого жмите на кнопку Check Favicon.

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

Мы обычно проверяем правильное отображение favicon в поисковых системах Яндекс и Google. Для этого нужно перейти по этим ссылкам:
https://favicon.yandex.net/favicon/ВАШ-ДОМЕН.RU

https://www.google.com/s2/favicons?domain=ВАШ-ДОМЕН.RU

Индексация favicon

Фавиконки индексируют специальные роботы поисковых систем. И это происходит не очень быстро, иногда приходится ждать по две-три недели. А мы должны проверить, что image портала на WordPress доступна для роботов поиска.

Проследите, чтобы каталог, где находится favicon не был закрыт в файле robots.txt при помощи директивы Disallow. Тогда как только YandexBot просканирует сайт, картинка появится в сниппетах поисковой выдачи Яндекса.

Значок не появляется в Яндексе

После того, как вы установили favicon, сразу его не увидите. Выше мы написали, что роботы не сразу его проиндексируют. Да и после индексации вы можете не наблюдать иконку документа WordPress.

Это происходит из-за того, что браузеры кэшируют веб-ресурсы, чтобы их быстрее загружать. Очистите cookie браузера и тогда обнаружите фавиконку на месте.

Если есть необходимость поторопить индексацию, то можно в Яндекс Вебмастере отправить главную страницу на переобход. Для этого зайдите в “Индексирование” — “Переобход страниц”. В пустое полу вставьте ссылку на главную страницу и нажмите кнопку “Отправить”.

Ошибка 404

Бывает такое, что анализ сайта выдает 404 ошибки связанные с отсутствием apple-touch-icon-precomposed.png. Это происходит из-за того, что у вас не сформировались все нужные размеры шаблона.

Проследите, чтобы обязательно были следующие размеры картинок: 57х57, 76х76, 120х120, 152х152, 167х167, 180Х180. Тогда на всех устройствах изображение будет выглядеть более менее корректно, и не будет ничего обрезать.

Ошибка появляется из-за того, что робот ищет нужные размеры и не находя их создает ошибку 404.

Вирус favicon.ico

Злоумышленники могут взломать ваш интернет-проект на WordPress и разместить на нем свой вирус. Для этого обычно они маскируют вредоносную программу под какой-нибудь обычный файл. Например, это может быть favicon.ico.

Надо понимать, что .ico файл может быть не только картинкой, а вообще чем угодно. А вы даже и не подумаете на него, что там не favicon, а вирус. При этом название не вызывает подозрений.

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

Заключение

Друзья, мы рассказали все что знали про favicon сайта на WordPress: как его создать и добавить в базу данных. Изучите всю эту информацию, она вам наверняка пригодится. И читайте другие статьи нашего блога, всегда стараемся опубликовать тот, материал, который будет полезен подписчикам.
Еще статьи по этой теме:
Калькулятор WordPress — как создать лучший calculator для сайта
Пошаговая инструкция установки калькулятора на сайт WordPress | Лучшие плагины для создания формы calculator и примеры расчета стоимости.
Оптимизация сайта на WordPress — лучшие плагины ускорения загрузки страницы для SEO продвижения
Советы по оптимизации сайта на WordPress с помощью плагинов для улучшения скорости загрузки страницы | Как влияет ускорение загрузки на SEO продвижение в поисковых системах.
Слайдеры WordPress — 22 лучших бесплатных плагинов для создания каруселей
Слайдеры WordPress с более 100 000 активных установок | Обзор 22 лучших бесплатных плагинов на русском языке для создания каруселей изображений и видео на страницах сайта.
SEO плагины WordPress для оптимизации сайта — 24 самых лучших бесплатных плагинов
Подборка самых лучших популярных бесплатных SEO плагинов WordPress для оптимизации сайта | Они помогут настроить блог для продвижения страниц и категорий в поисковой выдаче Яндекс и Google.
WordPress шорткоды: создание и использование собственных контентных и одиночных шорткодов
Что такое WordPress шорткоды — как работают контентные и одиночные и как регистрировать и использовать в тексте записей и на страницах сайта | Полезный дополнительный функционал.
Не забудь про миникурс "Вектор Seo"
Выбирай
удобный мессенджер