HTML: Фавикон (favicon) — создание, добавление, польза

  • Что такое фавикон
  • Создание
  • Добавление фавикона

Что такое фавикон

Фавикон (favicon — это сокращение от Favorite icon, в переводе с анг. означает любимый значок) — иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом. Браузеры, которые поддерживают добавление фавикона, обычно отображают его в адресной строке и во вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, сохраненного на рабочем столе. Поисковая система Яндекс, придала фавикону большое значение и отображает его вместе с результатами поиска.

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:


<html>
  <head>

    <link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon">

  </head>
  <body>
  </body>
</html>

Примечание: обратите внимание, что для каждой веб-страницы или для каждого раздела сайта можно указать свой собственный фавикон.

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

Google ChromeInternet ExplorerFirefoxOperaSafari
<link rel=»shortcut icon»
href=»httр://mysite. ru/myicon.ico»>		ДаДаДаДаДа
<link rel=»icon» href=»httр://mysite.ru/image.ico»>ДаДа (с IE 11)ДаДаДа
<link rel=»icon» type=»image/vnd.microsoft.icon» href=»httр://mysite.ru/image.ico»>ДаДа (с IE 9)ДаДаДа
<link rel=»icon» type=»image/png» href=»httр://mysite.ru/image.png»>ДаДа (с IE 11)ДаДаДа
<link rel=»icon» type=»image/gif» href=»httр://mysite.ru/image.gif»>ДаДа (с IE 11)ДаДаДа
<link rel=»icon» type=»image/x-icon» href=»httр://mysite.ru/image.ico»>ДаДа (с IE 9)ДаДаДа

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

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

Как Добавить Favicon для Сайта

Сайт

Дек 09, 2020

Renat

2хв. читання

Введение

Большинство сайтов имеют свои особенные логотипы и в большинстве случаев они используются, как favicons (иконки). Если вы не знаете, что такое favicon, вот визуальный пример одной их таких:

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

favicon на ваш сайт.

Оглавление

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • Квадратное изображение, которое вы хотите добавить, как favicon для вашего сайта
  • Доступ к файлам вашего сайта

Вариант 1 — Позволить браузеру автоматически добавить favicon (нет необходимости в изменении кода сайта)

Большинство браузеров автоматически находят файл favicon. ico в каталоге вашего сайта и устанавливают его в качестве favicon. Это самый легкий путь для добавления favicon.

  1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
  2. Этот вариант добавления favicon требует конвертации вашего изображения в формат .ico. В Интернете можно найти множество онлайн инструментов для этого, мы воспользуемся одним из самых популярных — convertico.com.
  3. После открытия сайта convertico.com, вы увидите кнопку для выбора и загрузки вашего изображения:

  1. Нажмите кнопку и выберите нужный вам файл. Сразу после выбора, ваше изображение будет автоматически конвертировано и станет доступно для загрузки в правой части сайта:

  1. Скачайте ваше изображение нажав на белую стрелку и сохраните ваш файл . ico на компьютере.
  2. Теперь переименуйте файл в favicon.ico, чтобы браузер мог распознать данный файл.
  3. Последним этапом станет загрузка изображения в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов, или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.

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


Вариант 2 — Использовать обычную картинку и указать ее в коде сайта

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

  1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png).
    Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
  2. Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.
  3. Теперь вам необходимо определить изображение, которое будет использоваться в качестве favicon в коде вашего сайта. Добавьте эту строку между тегами <head></head> в код вашего сайта:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

ВАЖНО! Измените png на формат вашего изображения в type=»image/png»  и favicon.png на имя вашего изображения.

HTML код будет выглядеть примерно так:

Теперь ваше изображение должно отображаться в качестве favicon для вашего сайта.


Заключение

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

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

спросил

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

Просмотрено 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) для веб-сайта?

Существует ряд различных значков и даже экранов-заставок, которые можно установить для различных устройств. В этом ответе рассказывается, как поддержать их всех.

Вот несколько фрагментов, которые я использовал, с соответствующими ссылками на места, где я собирал информацию. См. мой блог для получения дополнительной информации и дополнительной информации о шаблоне проекта ASP.NET MVC Boilerplate со всем этим, встроенным прямо из коробки (включая примеры файлов изображений).

Добавьте следующую разметку в заголовок HTML. Закомментированные разделы являются необязательными. В то время как незакомментированные разделы рекомендуется охватывать все варианты использования значков. Не бойтесь, больше всего, если это комментарии, чтобы помочь вам.

 































 png">


















 png"
      media="(ширина устройства: 768px) и (высота устройства: 1024px) и (ориентация: альбомная) и (-webkit-device-pixel-ratio: 1)">












 png">

Мой файл browserconfig.xml. Полное объяснение выше.

 
<конфигурация браузера>
  
    <плитка>
      
      
      
      
      #5cb95c

Мой файл manifest.json. Полное объяснение выше.

 {
    "name": "Шаблон ASP.NET MVC (обязательно! Обновите это)",
    "значки": [
        {
            "src": "\/Содержимое\/иконки\/android-chrome-36x36.png",
            "размеры": "36x36",
            "тип": "изображение\/png",
            "плотность": "0,75"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-48x48.png",
            "размеры": "48x48",
            "тип": "изображение\/png",
            "плотность": "1. 0"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-72x72.png",
            "размеры": "72x72",
            "тип": "изображение\/png",
            "плотность": "1,5"
        },
        {
            "src": "\/Содержимое\/значки\/android-chrome-96x96.png",
            "размеры": "96x96",
            "тип": "изображение\/png",
            "плотность": "2.0"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-144x144.png",
            "размеры": "144x144",
            "тип": "изображение\/png",
            "плотность": "3.0"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-192x192.png",
            "размеры": "192x192",
            "тип": "изображение\/png",
            "плотность": "4.0"
        }
    ]
}

Список файлов в проекте (Обратите внимание, что имена этих файлов важны, если вы решите поместить некоторые из них в корень вашего проекта, чтобы избежать использования вышеуказанных метатегов):

 favicon. ico
браузерconfig.xml
Контент/Изображения/
    Android-хром-144x144.png
    Android-хром-192x192.png
    Android-хром-36x36.png
    Android-хром-48x48.png
    Android-хром-72x72.png
    Android-хром-96x96.png
    apple-touch-icon.png
    яблоко-тач-значок-57x57.png
    яблоко-тач-значок-60x60.png
    яблоко-тач-значок-72x72.png
    яблоко-тач-значок-76x76.png
    яблоко-тач-значок-114x114.png
    яблоко-тач-значок-120x120.png
    яблоко-тач-значок-144x144.png
    яблоко-тач-значок-152x152.png
    яблоко-тач-значок-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    фавикон-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    яблоко-тач-стартап-изображение-1536x2008.png
    яблоко-тач-стартап-изображение-1496x2048.png
    яблоко-тач-стартап-изображение-768x1004.png
    яблоко-тач-стартап-изображение-748x1024.png
    яблоко-тач-стартап-изображение-640x1096. png
    яблоко-тач-стартап-изображение-640x920.png
    яблоко-тач-стартап-изображение-320x460.png

Всего накладных расходов

Если вы удалите комментарии, это 3 КБ дополнительного HTML, если вы не поддерживаете заставки, это 1,5 КБ. Если вы используете сжатие GZIP для своего HTML-контента, что в наши дни должны делать все, у вас остается около 634 байт накладных расходов на запрос для поддержки всех платформ или 446 байт без заставок. Я лично считаю, что стоит поддерживать устройства IOS, Android и Windows, но это ваш выбор, я просто даю варианты!

Боковое примечание о текущем веб-значке/заставке/настройках Ситуация

Эта ситуация со специфическими значками, экранами-заставками и специальными тегами для управления веб-браузером или закрепленными значками нелепа. В идеальном мире мы все использовали бы файл favicon.svg, который хорошо выглядел бы в любом размере и мог бы быть помещен в корень страницы. Только FireFox поддерживает это на момент написания (см.