Как загрузить фавикон

Заказать сайт

Искать везде

  • Искать везде
  • CMS
  • Интернет-магазин 2.0
  • Интернет-магазин 1.0
  • Onicon
  • Maliver
  • Rekmala
  • Pablex
  • Кабинет и почта
  • CRM
  • Интеграции CMS. S3

Главная / Редактирование сайта / Как мне настроить сайт? / Как загрузить фавикон

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

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

Шаг 1

Выберите в меню «Настройки» пункт «Фавикон».

Шаг 2

В открывшемся окне нажмите на кнопку «Выбрать файл».

Шаг 3

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

Шаг 4

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

Обратите внимание!

  • Рекомендуется использовать в качестве фавикона изображения формата SVG, поскольку только данный формат поддерживается большинством браузеров. 
  • Также советуем ознакомиться с рекомендациями Яндекс и Google:
    • Рекомендации Яндекс.
    • Рекомендации Google.
  • Создать свой собственный фавикон вы можете на сайтах http://favicon.ru/ или http://www.favicon.cc/.

Шаг 5

После того как система загрузит фавикон (об этом вас оповестит сообщение «Загрузка успешно завершена»), перейдите на сайт и обратите внимание на иконку во вкладке.

Альтернативный интерфейс

В национальных зонах, отличных от РФ, интерфейс загрузки фавикона может отличаться и выглядеть следующим образом:

В данном интерфейсе алгоритм действий практически ничем не отличается от описанного в инструкции выше:

  1. Нажмите «Обзор»,
  2. Выберите на своем компьютере изображение фавикона и нажмите «Открыть»,
  3. Затем нажмите «Закачать файл».

Обратите внимание!

  • Оптимальный размер фавикона 120х120рх. Рекомендуем загружать файлы именно этого размера.
  • Если на вашем сайте не отображается фавикон, сперва загрузите файл фавикона (вида http://ваш_домен/favicon.svg), затем перейдите на сайт (http://ваш_домен) и обновите страницу с помощью комбинации клавиш CTRL+F5.
  • Если описанный выше способ не приводит к отображению или замене фавикона — попробуйте почистить кэш своего браузера (CTRL+SHIFT+DELETE).
  • Фавикон отображается в левом верхнем углу (во вкладке) следующих браузеров: Mozilla Firefox, Opera, Google Chrome.
  • Браузер Internet Explorer показывает фавикон только после полной загрузки сайта и добавления его в Избранное.
  • В поисковой выдаче Google фавикон не отображается.
  • В поисковой выдаче Яндекса фавикон появляется не сразу, а только через несколько недель. Повлиять на данные сроки мы, к сожалению, не можем. Это зависит исключительно от обновления информации самими поисковыми системами.
  • В случае, если после переиндексации фавикон всё равно не появляется в поисковой выдаче (рядом с сайтом), необходимо обратиться в службу технической поддержки Яндекса — https://yandex.ru/support/webmaster-troubleshooting/ или http://feedback.yandex.ru/?from=webmaster — с вопросом, почему ваша иконка не появляется в поисковой системе.
  • Также рекомендуем ознакомиться с инструкцией к нашему конструктору фавиконов (доступен только для сайтов в национальной зоне РФ).

Была ли статья вам полезна?

Да

Нет 

Укажите, пожалуйста, почему?

  • Рекомендации не помогли
  • Нет ответа на мой вопрос
  • Содержание статьи не соответствует заголовку
  • Другая причина

Комментарий

Фавикон (favicon)

Статья актуальна для версии магазина: 10. 0 Другие версии | 8.5-8.0

Фавикон — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.

Пример отображения фавикон в результатах поиска (рис.1):


Рисунок 1.

Заметка

Требования к фавиконке
Размер: 120 × 120 пикселей (рекомендуемый), 16 × 16, 32 × 32.
Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

Внимание

Формат SVG загрузить можно, написав в техническую поддержку по почте support@advantshop.net. К сообщению необходимо прикрепить изображение в формате svg. Но, обратите внимание, что многие почтовые сервисы, например, такие как Gmail.com, Mail.ru и Yandex.ru не поддерживают формат . svg, поэтому в сообщениях, отправленных на почту клиенту, не будет отображаться логотип.

Подробнее о требованиях Яндекса можете ознакомится по ссылке.

  • Как установить favicon на сайт/удаление и изменение на сайте
  • Как создать favicon самостоятельно

 

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

Перейдите в пункт меню «Настройки — Общие настройки» (рис.2), в открывшейся странице вкладка «О магазине» и в строке «Favicon в адресной строке браузера» нажмите «Добавить изображение», либо «Добавить изображение по ссылке» (рис.3).


Рисунок 2.


Рисунок 3.

Таким образом вы установите favicon на сайт, если нужно удалить, то нажмите «Удалить изображение», если нужно изменить, то сначала удаляете и загружаете новую картинку.

Внимание

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

Favicon на сайте отображается на вкладке сайта в строке браузера (рис.4).


Рисунок 4.

Внимание

Для отображения в результатах поиска Яндекс загружает фавиконку с HTTPS-версии сайта, если она доступна. Если нет — фавиконка не отображается (рис.5).

Подробнее про HTTPS и SSL здесь.


Рисунок 5.


Как создать favicon самостоятельно

Если вы решили создать фавикон самостоятельно, то можно использовать онлайн сервисы, их достаточно много, покажем на примере: https://pr-cy.ru/favicon/

Загрузите картинку и нажмите «Создать Favicon» (рис.6).


Рисунок 6.

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


Рисунок 7.

Рассмотрим другой сервис для создания favicon — https://www.favicon.cc/

Нажмите «Import Image» и загрузите картинку с которой вы хотите сделать favicon, либо создайте самостоятельно путем рисования по клеткам (рис. 8).


Рисунок 8.

Ниже в разделе «Preview» показано как выглядит фавикон и если все подошло, то скачайте нажав на кнопку «Download Favicon» (рис.9).


Рисунок 9.

Все готово. Мы рассмотрели как создать favicon и загрузить его на сайт.

Другие статьи по теме

  • SEO продвижение
  • Webmaster Yandex и Google
  • Мета-теги
  • Настройка SEO-модуля
  • Теги h2, Title, Keywords, Description на главной странице

Статья оказалась полезной?

Да Нет

Благодарим за отзыв.

Как мы можем улучшить статью?

Проблема в

. ..Не могу закончить настройку, слишком сложная инструкцияСледовал инструкции, но ожидаемого результата не добилсяНедостаточно описаны вспомогательные элементыПохоже что инструкция устарелаТема статьи не раскрытаДругое

А именно с

Комментарий

Не нашли нужную статью? Предложить свою тему

Не нашли нужную статью?

На какую тему не нашлась статья?

Ваш email

Комментарий

Благодарим за отзыв.

Тэги: favicon, favic, фавиконку на сайте, Как установить фавиконку, в поисковике фавикон, как создать фавикон, иконка сайта, как изменить иконку сайта

python — Как добавить значок на HTML-страницу?

спросил

Изменено 2 года, 10 месяцев назад

Просмотрено 4к раз

Я знаю, что это повторяющийся вопрос, но я пытался добавить файл favicon. ico на свой сайт на локальном хосте: 8000, созданный с помощью Django. Фавикон существует в шаблонах\статьях (в приложении под названием статьи), и я пробовал все на stackoverflow, youtube и использовал realfavicongenerator.net, но ничего не работает. Должен ли я определять URL-адрес/представление Django для файла ICO, так как localhost:8000/favicon.ico вызывает ошибку? Кстати, вот мой (упрощенный) код:

 Новостная лента | Статьи

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

  • питон
  • html
  • джанго
  • фавикон

3

Мне нравится использовать:

https://www.favicon-generator.org/

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

Вполне уверен, что синтаксис для href должен быть: href=»{% static ‘imgs/favicon.ico’ %}

Лучший способ иметь значок на каждой странице вашего сайта — связать его с базой . html с href="{% static 'articles/favicon.ico' %} . Имейте в виду, что вам также нужно поместить {% load static %} в шаблон.

Кодируйте стандартные ссылки на фавиконы в верхней части шаблона или base.html и убедитесь, что значки находятся в каталоге/ах:

 {% load staticfiles %}
<голова>

Вы можете использовать favicon-generator.org для создания новых фавиконов.

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

HTML код фавиконки

Фавикон — это небольшой файл изображения, содержащий один или несколько значков, которые можно использовать для представления веб-сайта, блога или даже отдельной веб-страницы.

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

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

Добавление Favicon на ваш веб-сайт

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

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

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

Кроме того, хотя в этом примере используется расширение .ico , вы можете использовать другие форматы изображений, например ..png . .gif , .jpeg и даже анимированные GIF-файлы. Тем не менее, формат .ico довольно давно получил широкое распространение в браузерах и является распространенным форматом при использовании фавиконов.

Фавиконы могут иметь размер 16×16, 32×32, 48×48 или 64×64 пикселя и 8-битную, 24-битную или 32-битную глубину цвета.

Значки главного экрана Apple iOS

Устройства Apple с операционной системой iOS версии 1.