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 для вашего сайта. Возможно это не столь сложная задача при создании вашего сайта, но она позволит ему иметь более привлекательный вид.

Как настроить фавикон?

спросил

Изменено 9 месяцев назад

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

Я пытаюсь выполнить очень простое предварительное упражнение по настройке веб-сайта, который создает фавикон.

Вот код, который я использую:

Но это не работает — может ли кто-нибудь помочь? Я сохранил файл favicon. ico на том же уровне, что и мой html-файл (в подкаталоге).

Большое спасибо

  • Фавикон

4

С появлением (i|android|windows)телефонов все изменилось, и получение правильного и полного решения, работающего на любом устройстве, требует много времени.

Вы можете заглянуть на https://realfavicongenerator.net/favicon_compatibility или http://caniuse.com/#search=favicon, чтобы получить представление о том, как лучше всего получить то, что работает на любом устройстве.

Вы должны посмотреть на http://realfavicongenerator.net/ чтобы автоматизировать большую часть этой работы, и, возможно, на https://github.com/audreyr/favicon-cheat-sheet, чтобы понять, как это работает (даже если этот последний ресурс не обновлялся долгое время).

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

  ico">















 png">

В июне 2016 года RealFaviconGenerator заявил, что следующие 5 строк кода поддерживают столько же устройств, сколько и предыдущие 18 строк:

8

Я использую это на своем сайте, и оно отлично работает.

0

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

 http://www.yoursite.com/favicon.ico

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

1

вы можете взглянуть на w3 как это сделать, я думаю, вы найдете это полезным

ваш атрибут тега ссылки должен быть rel="icon"

2

Ниже приведена информация о fav Icon

Что такое FavIcon?  FavIcon — это не что иное, как небольшое изображение, которое появляется вверху слева вместе с заголовком адресной строки приложения. Стандартный размер для favicon.ico составляет 16 на 16 пикселей. См. приведенный ниже рисунок.

Как это работает?  Обычно мы добавляем наше изображение FavIcon. ico в папку решения маршрута, и приложение автоматически выбирает его во время работы. Но в большинстве случаев нам, возможно, придется использовать обе ссылки ниже.

Некоторые браузеры ожидают один (rel=»icon») Некоторые другие браузеры ожидают другой rel=»иконка ярлыка»

Тип = «изображение/x-icon» ИЛИ Тип = «изображение/ико»: один раз ожидает точное изображение ico, а другой ожидает любое изображение, даже отформатированное из .jpg или .pn ..etc.

 Мы должны использовать два вышеуказанных тега для общих страниц, таких как – Главная страница, Основной фрейм, который используется на всех страницах

 


<ссылка отн = "значок"
      тип = "изображение/png"
      href="http://example. com/myicon.png">

<тело>
...

rel="значок ярлыка" должен быть rel="icon"

Источник: W3C

5

Из опыта, что мой favicon.ico не появляется, я делюсь своим опытом. Вы не сможете показать его, пока не разместите свой веб-сайт на хосте, поэтому попробуйте разместить его на локальном хосте с помощью XAMPP — http://www.apachefriends.org/en/xampp.html. Вот как выглядит фавикон, и, как и другие, рекомендуется изменить:

rel="shortcut icon"

to
rel="icon"

Также таким образом можно использовать фавиконы .png для удобства.

0

 <голова>

1

На своем сайте я использую это:

 
 png">

Чтобы упростить себе жизнь, используйте этот генератор фавиконов http://realfavicongenerator.net

Этот метод рекомендуется

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

Я использую этот https://realfavicongenerator.net/ для создания всех возможных сценариев favicons и это свободно.

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

Зарегистрируйтесь с помощью 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 поддерживает это на момент написания (см.