Как установить фавиконку — Вебмастер. Справка
- Шаг 1. Разместите фавиконку на сайте
- Шаг 2. Проверьте доступность фавиконки для робота Яндекса
- Шаг 3. Проверьте отображение фавиконки в выдаче
Поместите файл с именем favicon в корневой каталог сайта. Обратите внимание на рекомендации.
Добавьте в HTML-код главной страницы сайта, в элемент head, ссылку на размещенный файл.
<head> ... <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon"> ... </head>Атрибут Описание Возможные значения rel Тип ресурса icon — учитывается большинством браузеров;
shortcut icon — учитывается браузером Internet Explorer.
href Адрес файла Для описания кириллического адреса фавиконки используйте Punycode. Например для адреса https://мой-сайт.рф/favicon.ico нужно указать https://xn—-8sbzclmxk.xn--p1ai/favicon.ico. type Тип передаваемых данных. Зависит от формата файла image/svg+xml — для формата SVG;
image/x-icon или image/vnd.microsoft.icon — для формата ICO;
image/gif — для формата GIF;
image/jpeg — для формата JPEG;
image/png — для формата PNG;
image/bmp — для формата BMP.
Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение.
Проверьте, отображается ли фавиконка в адресной строке браузера при просмотре страниц сайта.
Убедитесь, что:
Файл доступен по прямой ссылке (ответ сервера 200 OK) — воспользуйтесь инструментом Проверка ответа сервера.
Файл не запрещен для индексирования, например в robots.txt с помощью директивы Disallow. Может быть запрещен не сам файл, а каталог, в котором он размещается.
Внесите изменения, если это необходимо.
Проверьте, что робот загрузил файл. Это может произойти, когда робот посетит ваш сайт. В течение нескольких дней после добавления фавиконки на сайт перейдите в Яндекс Вебмастер, на страницу Диагностика → Диагностика сайта. Если в блоке Возможные проблемы отображается предупреждение о проблемах с фавиконкой, следуйте указаниям:
Ошибка Решение Файл отвечает HTTP-кодом, отличным от 200 OK Проверьте ответ сервера. Ответ должен соответствовать 200 OK. Другие статусы ответа см. в разделе Проверка ответа сервера.Файл перенаправляет на другой адрес Неправильный тип данных Проверьте значение параметра type в ссылке на файл. Он должен соответствовать формату файла. Чтобы убедиться, что фавиконка загружена, перейдите по ссылке Посмотрите всё, что проверяет Вебмастер и на открывшейся странице найдите предупреждение о фавиконке. Если отображается статус Всё в порядке, значит робот обработал файл.
Ответ должен соответствовать 200 OK. Другие статусы ответа см. в разделе Проверка ответа сервера.Если робот загрузил фавиконку, она появится в результатах поиска в течение двух недель. Как фавиконка может отображаться на сервисах Яндекса.
Чтобы ваш вопрос быстрее попал к нужному специалисту, уточните тему:
Фавиконка не появляется для моего сайтаУ сайта пропала фавиконкаВ поиске отображается некорректная или старая фавиконкаТеоретический вопрос про индексирование фавиконок
Если все требования по размещению фавиконки выполнены, то для индексирования и появления ее в результатах поиска необходимо около двух недель.
Прошло больше двух недель, фавиконка не появилась
Фавиконка может пропасть из поиска, если в случае последнего обновления, она не попала в базу. Такая ситуация возможна, если в момент обхода специальным роботом фавиконка, сайт или его хостинг были недоступны.
Также, проверьте, правильно ли размещена фавиконка. Если она прописана корректно, дождитесь следующего обновления базы фавиконок, это занимает около двух недель.
Прошло больше двух недель, фавиконка не появилась
Такая ситуация возникает, если:
У сайта по разным адресам расположены разные фавиконки. Если сайт доступен по адресам с префиксом www и без него, по протоколам HTTPS и HTTP, проверьте, что фавиконка везде одинаковая или именно та, которая должна индексироваться для каждого из сайтов.
Сайт временно недоступен. В таком случае может скачаться фавиконка хостинга со страницы-заглушки сайта.
Если эти причины устранены и выполнены рекомендации по размещению фавиконки, то после обхода роботом изменения появятся в результатах поиска в течение двух недель.
Рекомендации не помогли, прошло больше двух недель
Favicon WordPress — 4 способа установить фавикон на сайт
Что такое 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.
- В меню «Внешний вид» войдите в пункт «Настроить» и выберите «Свойства сайта».
- В предложенном списке действий можно настроить отображение иконки сайта. Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой.
- Чтобы применить настройку к сайту, нажмите кнопку «Сохранить и опубликовать». Убедитесь, что на ярлыке страницы в браузере появился фавикон.
Вставить фавикон используя возможности WordPress шаблона
В некоторых темах WordPress заложена дополнительная возможность по установке иконки сайта.
- Войдите в меню «Внешний вид» и выберите пункт «Настроить».
- Дальнейший путь к настройкам зависит от используемого шаблона. Как правило, фавикон устанавливается в общих настройках темы. Найдите соответствующую команду и загрузите файл с картинкой.
- Не забудьте подтвердить изменения нажатием кнопки «Сохранить и опубликовать».
Добавить в файл header.php
Если не удалось установить фавикон встроенными средствами WordPress, использование иконки для сайта можно напрямую прописать в файле заголовка header.
- С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
- В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
- В списке шаблонов откройте файл заголовка header.php (3).
- После открывающего тегавставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
- Нажмите кнопку «Обновить файл» (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 зонах
Как добавить фавикон на свой сайт
Фавикон — это графический изображение (значок), связанное с определенной веб-страницей и/или веб-сайтом. сайт. Многие последние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте. в адресной строке или на вкладках. В википедии есть статья о favicons [FAVICON-WIKIPEDIA].
Чтобы добавить фавиконку на свой веб-сайт, вам потребуется как изображение, так и
метод указания того, что изображение должно использоваться в качестве фавиконки. Этот
документ объясняет метод, предпочитаемый W3C для указания
фавикон.
В этом документе подробно не обсуждается, как создать значок сайта. изображение. Однако формат выбранного вами изображения должен быть 16×16. пикселей или 32×32 пикселей с использованием 8-битных или 24-битных цветов. формат изображения должен быть одним из PNG (файл стандарт W3C), GIF или ICO.
Метод 1 (предпочтительный): использование значения атрибута
rel определенный в профиле Первый подход к указанию фавикона заключается в использовании rel значение атрибута «значок» и определить, что означает значение через профиль; профили обсуждаются более подробно
ниже. В этом примере HTML 4.01 фавикон, идентифицированный через URI http://example.com/myicon.png как фавикон:
01//EN" "http://www.w3.org/TR/html4/strict.dtd"> profile="http://www.w3.org/2005/10/profile" > <ссылка отн = "значок" тип = "изображение/png" href="http://example.com/myicon.png"> […] […]
Версия XHTML 1.0 очень похожа:
profile="http://www.w3.org/2005/10/profile" >
<ссылка отн = "значок"
тип = "изображение/png"
href="/где-то/myicon.png" />
[…]
[…]
Способ 2 (не рекомендуется): размещение значка на предопределенном URI
Второй метод указания значка основывается на использовании
предопределенный URI для идентификации изображения: «/favicon», который относится к
корень сервера.
Этот метод работает, потому что некоторые браузеры
запрограммирован на поиск фавиконов с использованием этого URI. Этот подход
несовместимы с некоторыми принципами веб-архитектуры и в настоящее время
обсуждается группой технической архитектуры W3C
(TAG) в качестве их выдачи siteData-36.
Подводя итог этой проблеме: веб-архитектура разрешает менеджерам сайтов
управлять своим пространством URI (для данного доменного имени), как они видят
соответствовать. Соглашения, которые не представляют согласия сообщества и которые
уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут
привести к конфликту (поскольку общеизвестного списка этих
предопределенные URI). Одно практическое соображение иллюстрирует проблему:
многие пользователи имеют веб-сайты, даже если у них нет собственных
доменное имя. Эти пользователи не могут указывать фавиконы, используя второй
метод, если они не могут писать в корень сервера. Однако они могут использовать
первый способ указать фавикон, так как он более гибкий и не
запретить менеджеру сайта использовать один значок значка в одном месте
на сайте.
Есть несколько других известных посягательств на пространство URI, включая файл «robots.txt» и местонахождение P3P-конфиденциальности политика. Группа технической архитектуры изучает альтернативы которые не затрагивают пространство URI без лицензии.
Использование профилей для определения таких терминов, как «значок»
Грубо говоря, профиль — это определение набора
термины. В идеале профиль включает как машиночитаемую информацию,
и удобочитаемая информация. В HTML 4.01 и XHTML 1.0 несколько
атрибуты, такие как rel атрибут не имеет предопределенного набора
ценности. Вместо этого автор может предоставить значения в соответствии с потребностями и
затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы
рекомендовали авторам использовать значение «значок» и профиль, который
объясняет, что «когда мы говорим значок, мы имеем в виду «это значок сайта».
В методе 1 выше мы используем атрибут rel с
ССЫЛКА НА САЙТ
элемент и выбираем профиль с атрибутом профиль в элементе HEAD.
Мы определили профиль, который вы можете свободно использовать для своих сайтов.
Ограничения
Описанные выше подходы имеют несколько ограничений. включая предпочтительный метод (именно поэтому TAG продолжает работать по вопросу):
- Подходы работают только в HTML или XHTML
- Предпочтительный подход связывает значок с HTML-документом, не собрание документов (т.е. сайт)
- Предлагаемый профиль для определения значения «значок» не является общепризнанный стандарт, что означает, что могут быть проблемы с функциональной совместимостью на практике.
- Стандарт отсутствует (по крайней мере, определенный в HTML 4.01)
для машиночитаемых профилей, которые
позволить браузеру узнать, что «это означает, что изображение является фавиконом». Таким образом,
браузер должен быть запрограммирован заранее, чтобы распознать это конкретное
значение
отн.. Для получения дополнительной информации об использовании профилей в HTML и XHTML см. GRDDL [ГРДДЛ].
GRDDL [ГРДДЛ].Ссылки
- FAVICON-WIKIPEDIA
- Фавикон , Википедия, Доступно по адресу http://en.wikipedia.org/wiki/Фавикон.
- ГРДДЛ
- Сбор Описания ресурсов из диалектов языков , D. Азаэль-Массье, Д. Коннолли, редакторы, представление команды W3C, 16 мая. 2005 г., http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия доступно на http://www.w3.org/TeamSubmission/grddl/.
- HTML401
- HTML 4.01 Спецификация , Д. Раггетт, А. Ле Хорс, И. Джейкобс, Редакторы, рекомендация W3C, 24 декабря 1999, http://www.w3.org/TR/1999/REC-html401-19991224. Последняя версия доступно на http://www.w3.org/TR/html401.
- ДАННЫЕ САЙТА-36
- Улучшение метаданных веб-сайта в файлах robots.txt, w3c/p3p и favicon
и т. д. , TAG, Доступно на
http://www. w3.org/2001/tag/issues.html#siteData-36.
- XHTML1
- XHTML™ 1.0 Расширяемый язык гипертекстовой разметки (второе издание) , S. Пембертон, редактор Рекомендации W3C, 1 августа 2002 г., http://www.w3.org/TR/2002/REC-xhtml1-20020801. Последний версия доступна на http://www.w3.org/TR/xhtml1.
w3.org/2001/tag/issues.html#siteData-36.Благодарности
Следующие участники QA Interest Group и сотрудники W3C внесли значительный вклад в содержание этого документа: Доминик Азаэль-Массье (W3C), Крис Лилли (W3C) и Оливье Теро (W3C).
Как добавить Favicon на ваш сайт WordPress
Контент Themeisle бесплатный. Когда вы покупаете по реферальным ссылкам на нашем сайте, мы получаем комиссию. Узнать больше
Ищете простой способ добавить значок WordPress на свой сайт?
Фавикон — это крошечное изображение, которое вы увидите в левой части любой вкладки браузера. По умолчанию ваш сайт будет содержать только общее изображение, поэтому вы можете добавить что-то свое.
Это поможет вашему сайту выглядеть более заслуживающим доверия, поможет с вашим брендом и облегчит идентификацию ваших страниц.
В этом посте мы начнем с краткого объяснения того, почему вы должны потратить время на использование фавиконки WordPress. Затем мы покажем вам, как его создать, и дадим несколько советов, как сделать это эффективно. Давай приступим к работе!
Почему вам нужно создать фавикон WordPress
Если вы проверите ряд вкладок в любом браузере, вы увидите, что каждая из них включает в себя как название рассматриваемой страницы, так и маленькое изображение:
Это изображение — фавикон — идентифицирует рассматриваемый сайт. Вы, вероятно, никогда не задумывались о них, учитывая их вездесущность. Однако, когда вы создаете свой собственный веб-сайт, у него не будет собственного пользовательского значка. Вместо этого на вкладках ваших страниц будет отображаться невзрачное изображение по умолчанию: 9.0005
Эти значки скучные, не очень запоминающиеся и могут сделать ваш сайт непрофессиональным.
Поэтому создание собственного фавикона WordPress — это одна из первых вещей, которые вы захотите сделать для своего сайта.
Использование тщательно подобранного фавикона также облегчает идентификацию ваших страниц пользователями. Кроме того, это играет роль в обеспечении запоминаемости вашего сайта, а также в укреплении вашего бренда.
Также не так сложно добавить фавикон в WordPress, что делает это одним из лучших действий, которые вы можете предпринять для своего сайта.
Как добавить фавиконку на ваш сайт WordPress (в 3 шага)
В следующих нескольких разделах мы обсудим, как создать фавикон WordPress и добавить его на свой веб-сайт. Давайте начнем!
Шаг 1. Спланируйте дизайн своего фавикона
Перед созданием и загрузкой фавикона стоит немного спланировать. Это крошечное изображение будет представлять вас и ваш веб-сайт, так что вы не хотите что-то слепить в спешке.
Первое, что вам нужно сделать, это решить, использовать ли существующие изображения или создать что-то новое.
Например, если у вас уже есть логотип, точно представляющий ваш веб-сайт или бизнес, вы можете использовать его в качестве фавикона.
Однако имейте в виду, что фавиконы очень маленькие и поэтому не могут содержать много деталей. Если ваш существующий логотип сложный, его, вероятно, потребуется упростить, чтобы он хорошо выглядел на вкладке браузера.
С другой стороны, вы также можете создать совершенно новый образ. Здесь по-прежнему лучше использовать элементы брендинга вашего сайта или бизнеса. Это означает, что вы можете включить цвета, шрифты и/или значки, которые уже являются частью дизайна вашего более крупного веб-сайта.
На этом этапе может помочь набросать некоторые возможности для вашего фавикона либо на бумаге, либо в простой программе редактирования изображений. Помните — ваш дизайн должен быть очень простым, не включать ненужных элементов и визуально представлять ваш бренд с первого взгляда.
Шаг 2. Создайте свой значок
После того, как вы определились с концепцией дизайна, пришло время создать изображение для фавиконки.
Если вы используете существующий логотип, и вам посчастливилось иметь под рукой четкую упрощенную версию, этот шаг прост.
В противном случае вам нужно будет создать свой значок. Есть несколько способов решить эту задачу:
- Наймите дизайнера, чтобы он создал его для вас. Это может показаться излишним для такого маленького и простого изображения, но, потратив немного денег, вы получите более качественный профессиональный результат. Кроме того, дизайнер может дать совет о том, как оптимизировать и изменить размер вашего изображения для различных способов доставки.
- Создайте свою фавиконку с нуля, используя такую программу, как Photoshop. Если у вас есть солидные дизайнерские навыки или свободное время, создание фавиконки вручную предлагает вам полный контроль.
- Используйте средство создания значков для упрощения процесса. Если вы не хотите нанимать профессионала, но вам неудобно делать все это самостоятельно, существует множество инструментов, которые могут помочь преодолеть разрыв. Многие из них бесплатны и позволяют либо создать свой значок с использованием пустого шаблона, либо загрузить и отредактировать уже существующее изображение.
Многие из них бесплатны и позволяют либо создать свой значок с использованием пустого шаблона, либо загрузить и отредактировать уже существующее изображение.Учитывая последний момент, Faviconer — это простой инструмент в браузере, который может выполнить работу:
Вы даже увидите свой дизайн на вкладке браузера для веб-сайта, что позволит вам узнать, как он будет выглядеть в контексте.
Другими преимуществами этих инструментов для создания фавиконов являются помощь в сохранении простоты изображения и различные параметры размера, к которым у вас будет доступ. Браузеры и устройства различаются, но для большинства из них требуется, чтобы фавиконы были размером 16 x 16 или 32 x 32 пикселя. Это означает, что вы можете создать увеличенное изображение (512 x 512 пикселей является стандартным для WordPress) и уменьшить его по мере необходимости.
Шаг 3. Добавьте фавикон WordPress на свой сайт и оптимизируйте его
Когда у вас есть готовая иконка, вы можете добавить ее на свой сайт несколькими способами.
Используйте настройщик WordPress — подходит для большинства случаев
Самый простой способ — перейти к Внешний вид > Настроить на панели инструментов и выбрать вкладку Идентификация сайта :
Наряду с некоторыми основными параметрами здесь вы найдете раздел под названием Значок сайта 9.0188 . Здесь вы можете загрузить версию своего изображения размером 512 x 512 пикселей, которая будет использоваться как в качестве фавиконки, так и в качестве значка мобильного приложения.
Используйте бесплатный плагин — обеспечивает совместимость со всеми устройствами
Хотя описанный выше процесс работает отлично, стоит помнить, что ваш значок WordPress будет отображаться на самых разных устройствах. Это включает в себя огромное разнообразие размеров и разрешений экрана.
Если вы хотите повысить вероятность оптимального отображения вашего фавикона независимо от того, как он просматривается, возможно, стоит установить плагин, такой как Favicon от RealFaviconGenerator:
Этот плагин поможет вам быстро создать множество версий вашего фавикона, оптимизированных для различных браузеров, устройств и т.
д. Если вы перейдете к новому разделу «Внешний вид» > «Favicon » на панели управления WordPress после установки плагина, вы сможете загрузить мастер-образ:
Затем вы попадете на страницу, где сможете настроить свой значок для различных целей:
Здесь вы найдете множество предложений по настройке каждой версии вашего фавикона WordPress. Вы даже можете загружать совершенно новые изображения для использования на определенных устройствах, если ваше основное изображение не подходит. Кроме того, вы увидите предварительный просмотр того, как ваш фавикон будет выглядеть в различных контекстах.
После этого вы можете нажать кнопку внизу страницы, чтобы сгенерировать фавиконы и вернуться на панель инструментов:
В целом, если вы хотите, чтобы фавикон хорошо представлял ваш бренд независимо от конечного устройства, стоит предпринять несколько дополнительных шагов, чтобы убедиться, что он полностью оптимизирован.
Заключение
Может быть так легко сосредоточиться на важных аспектах дизайна вашего веб-сайта, таких как выбор темы и создание страниц, что вы забудете о более мелких деталях.