Link rel icon: Обязательно ли включать ?

alexxlab

Содержание

Обязательно ли включать ?



Я не включил следующую строку кода в свой тег head, однако мой favicon все еще появляется в моем браузере:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Какова цель его включения?

html favicon
Поделиться Источник user784637     11 июля 2011 в 00:32

5 ответов

  • Генерация apple-touch-icon с использованием Rails

    Я пытаюсь добавить ссылку apple-touch-icon в голову моего приложения, чтобы она отображалась на закладках рабочего стола. В руководствах Rails говорится следующее: Mobile Safari ищет другой тег ссылки, указывающий на изображение, которое будет использоваться, если вы добавите страницу на главный…

  • Combinging «icon» и «apple-touch-icon» типы связей

    Mobile Safari требует использования следующего заклинания для фавиконов более высокого разрешения, чем традиционные 16×16: <link rel=shortcut icon href=old-16×16-favicon.

    ico /> <link rel=apple-touch-icon sizes=158×158 href=my-new-158×158-icon.png /> Однако Firefox требует использования…


188

Если вы не вызываете favicon, favicon.ico , вы можете использовать этот тег для указания фактического пути (если он находится в каталоге images/ ). Браузер/веб-страница по умолчанию ищет favicon.ico в корневом каталоге.

Поделиться Brian Graham     11 июля 2011 в 00:36


130

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

Имя файла «favicon.ico» и размещение его в корне вашего веб-сайта-это метод «discouraged» по W3C:

Метод 2 (не рекомендуется): Поместите favicon в заданное URI
Второй способ указания favicon основан на использовании предопределенного URI для идентификации образа: «/favicon», который относится к корню сервера. Этот метод работает, потому что некоторые браузеры были запрограммированы на поиск фавиконов с помощью этого URI.
W3C — Как добавить favicon на свой сайт

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

Поделиться siburb     18 марта 2013 в 02:51


53

Я использую его по двум причинам:

  1. Я могу принудительно обновить значок, добавив параметр запроса, например ?v=2 . подобный этому: <link rel="icon" href="/favicon.ico?v=2" type="image/x-icon" />

  2. На случай, если мне понадобится указать путь.

Поделиться nilsi     10 февраля 2015 в 15:56


13

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

Поделиться Nicole     22 ноября 2013 в 11:14


9

Многие люди устанавливают свой путь к файлам cookie в /., что приведет к тому, что каждый запрос favicon будет отправлять копию файлов cookie сайтов, по крайней мере, в chrome. Адресация favicon в ваш домен без кулинарии должна исправить это.

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

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

Информация о настройке домена без кулинарии:

http://www.ravelrumba.com/блог/static-cookieless-domain/

Поделиться user3907900     12 октября 2015 в 20:15

Похожие вопросы:


HTML5 ` <link rel=»shortcut icon» /> `

В документе WHATWG для HTML5 говорится, что атрибут rel должен содержать значения, разделенные пробелом, а затем он дает таблицу допустимых значений. Значение атрибута должно быть набором маркеров,…


Как добавить favicon.ico в ASP.NET сайт

Структура решения моего приложения такова: Теперь я нахожусь в Login.aspx и готов добавить favicon.ico, помещенный в корень, на эту страницу. То, что я делаю, это: <link id=Link1 runat=server…


IE не показывает .ico значков в HTML, если не используется как » image/x-icon»

Я показываю фавиконы веб-сайтов в списке, как <img /> элементов. некоторые веб-сайты служат им в качестве: <link rel=icon type=image/x-icon href=favicon.ico /> а некоторые служат им в…


Генерация apple-touch-icon с использованием Rails

Я пытаюсь добавить ссылку apple-touch-icon в голову моего приложения, чтобы она отображалась на закладках рабочего стола. В руководствах Rails говорится следующее: Mobile Safari ищет другой тег…


Combinging «icon» и «apple-touch-icon» типы связей

Mobile Safari требует использования следующего заклинания для фавиконов более высокого разрешения, чем традиционные 16×16: <link rel=shortcut icon href=old-16×16-favicon.ico /> <link…


Правильный тип MIME для favicon.ico?

По данным Internet Assigned Numbers Authority (IANA), все файлы .ico подпадают под Источник MIME типа image/vnd.microsoft.icon . ( ) E.g. <link rel=icon type=image/vnd.microsoft.icon…


favicon.ico не показано на IE [работает в Chrome & FireFox]

Согласно вопросу, я не смог отобразить favicon.ico на IE. (Проект развернут на Apache Tomcat 7.0 и протестирован на IE 10) Примечание: я могу развернуть favicon.ico только в своей папке проекта и…


Зачем использовать <link rel=»apple-touch-icon image_src» …> ?

Пока я смотрел на источник HTML для моего любимого сайта , я заметил, что он использует <link rel=shortcut icon href=favicon.ico> <link rel=apple-touch-icon image_src…


<link rel=»shortcut icon»> ошибка проверки, несмотря на то, что она действительна

Валидатор w3.org выдает мне ошибку в следующей строке: <link rel=shortcut icon href=/favicon.ico type=image/x-icon /> Это полная ошибка, которую он дает: Строка 1, столбец 727: плохое значение…


Create-react-app apple touch icon не работает

Я пытаюсь добавить apple touch icon я пробовал несколько вещей, и ничего, кажется, не работает. когда я добавляю сайт в Избранное, Я вижу только значок касания по умолчанию, а не тот, который я…

Что делает тег ?



Я видел этот тег несколько раз, но не могу найти простого объяснения, которое было бы понятно нам «non-professionals».

html
Поделиться Источник Rhino     04 марта 2020 в 20:38

1 ответ

  • Regex чтобы найти тег <link rel=»stylesheet»

    Мне нужно найти тег ссылки с помощью Regex. У меня есть эта строка в моем файле html. <link rel=stylesheet href=<c:url value=/styles/folders/masterTree.css /> type=text/css media=screen, print /> Мне нужно выражение regex, чтобы найти это. Это не домашнее задание. Мне это нужно как…

  • cakephp 2.3 тег ссылки с rel=’apple-touch-icon-precomposed’

    Мне нужно сгенерировать следующий тег html с cakephp 2.3 пожалуйста, дайте любую помощь, чтобы сгенерировать его. Есть изображение, которое я поместил в папку img , оно приходит как значение атрибута href. <link rel=apple-touch-icon-precomposed sizes=144×144…


2

От MDN года :

Rel обозначает «relationship» и, вероятно, является одной из ключевых особенностей элемента — значение обозначает, как элемент , с которым он связан, связан с содержащим его документом. Как вы увидите из нашей ссылки на типы ссылок, существует много различных видов отношений.

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

<img alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">

Ну, href -это гипертекстовая ссылка. Как правило, вы увидите значение href , указывающее на путь к файлу или ссылке, например:

<a href="some-page.html">

Но он может указывать на закодированное изображение. Способ представления закодированного изображения-это data . Поэтому мы просим браузер связать

href с образом, который мы создаем внутри data: .

Вот пример структуры, которой вы можете следовать для base64 кодирования значка. Как указал @agrm в комментарии, Вам также нужно будет указать mediatype .

<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF/QA6OjoAKysrABwcH" />

Поделиться Andy Hoffman     04 марта 2020 в 20:41

Похожие вопросы:


HTML5 ` <link rel=»shortcut icon» /> `

В документе WHATWG для HTML5 говорится, что атрибут rel должен содержать значения, разделенные пробелом, а затем он дает таблицу допустимых значений. Значение атрибута должно быть набором маркеров,…


html <link /> тег истинные обычаи?

его время от времени я вижу теги + данные, такие как : (, кроме css ссылки) <link rel=Home href=/ title=Page d’accueil de Babysun /> <link rel=Index href=/ /> <link rel=Top href=/…


Обязательно ли включать <link rel=»icon» href=»favicon.ico» type=»image/x-icon» /> ?

Я не включил следующую строку кода в свой тег head, однако мой favicon все еще появляется в моем браузере: <link rel=icon href=favicon.ico type=image/x-icon /> Какова цель его включения?


Regex чтобы найти тег <link rel=»stylesheet»

Мне нужно найти тег ссылки с помощью Regex. У меня есть эта строка в моем файле html. <link rel=stylesheet href=<c:url value=/styles/folders/masterTree.css /> type=text/css media=screen,…


cakephp 2.3 тег ссылки с rel=’apple-touch-icon-precomposed’

Мне нужно сгенерировать следующий тег html с cakephp 2.3 пожалуйста, дайте любую помощь, чтобы сгенерировать его. Есть изображение, которое я поместил в папку img , оно приходит как значение…


Зачем использовать <link rel=»apple-touch-icon image_src» …> ?

Пока я смотрел на источник HTML для моего любимого сайта , я заметил, что он использует <link rel=shortcut icon href=favicon.ico> <link rel=apple-touch-icon image_src…


<link rel=»canonical» href='<?=$slink?> ‘>

у нас есть следующее сообщение в Google WMT и мы обеспокоены штрафом, HTML Improvements Duplicate title tags Ваш заголовок предоставляет пользователям и поисковым системам полезную информацию о…


Что такое <link rel=»image_src»>

Сегодня я наткнулся на бирку <link rel=image_src> . Я не знаю об этом, поэтому я использую google. Google говорит мне, что этот тег похож на og:image . Поэтому я пришел на главный сайт open…


<link rel=»shortcut icon»> ошибка проверки, несмотря на то, что она действительна

Валидатор w3.org выдает мне ошибку в следующей строке: <link rel=shortcut icon href=/favicon.ico type=image/x-icon /> Это полная ошибка, которую он дает: Строка 1, столбец 727: плохое значение…


Что делает тег <link rel=»author» ..?

В настоящее время я пытаюсь изучить HTML, и у меня есть вопрос об элементе ссылки: <link rel=author href=URL> . Что делает этот элемент? В моей книге говорится:: установление связи между…

Как добавить иконку сайта в адресную строку браузера?

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

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

<head>
 <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head>
 <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>

: Элемент — ссылка на внешний ресурс — HTML

Элемент HTML — Ссылка на Внешний Ресурс (<link>) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на  stylesheets, а также для создания иконок сайта (как для иконок в стиле «favicon», так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.

Чтобы подключить таблицу стилей, вы должны включить элемент <link> внутри вашего <head> следующим образом:

<link href="main.css" rel="stylesheet">

В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet. rel означает «отношения (relationship)», и, вероятно, является одной из ключевых особенностей элемента <link>  — значение сообщает как указанный элемент связан с  содержащим его документом. Как вы увидите в нашем справочнике типы ссылок, есть много различных видов отношений.

Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:

<link rel="icon" href="favicon.ico">

Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:

<link rel="apple-touch-icon-precomposed"
      href="apple-icon-114.png" type="image/png">

Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.

Вы можете, также, указать медиа тип или запрос внутри атрибута media; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

В элемент <link> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:

<link rel="preload" href="myFont.woff2" as="font"
      type="font/woff2" crossorigin="anonymous">

Значение rel — preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel=»preload» для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса  CORS.

Другие замечания по использованию:

  • Элемент <link> может присутствовать в элементах <head> или <body>, в зависимости от того, имеет ли он тип ссылки, являющейся body-ok. Например, ссылка типа stylesheet является body-ok,и, поэтому,  <link rel="stylesheet"> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <link> от содержимого body, помещая их в <head>.
  • При использовании <link> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src директива заголовка Content-Security-Policy (en-US) не препятствует доступу к ней.
  • Спецификации HTML и XHTML определяют обработчики событий для элемента  <link>, но не указывают как они будут использоваться.
  • В XHTML 1.0, пустые элементы, такие как <link>, требуют слеш: <link />.
  • WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов.

Этот элемент включает в себя глобальные атрибуты.

as
Этот атрибут используется только для элементов <link> с атрибутом rel="preload" или rel="prefetch". Он указывает тип контента, загружаемого <link>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного Accept запрашиваемого заголовка.
crossorigin
Этот перечисляемый атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе <canvas> не искажая их. Допустимы значения:
anonymous
Cross-origin запрос (т.е. с HTTP-заголовком Origin) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка Access-Control-Allow-Origin),  изображение будет искажено, а его использование ограничено.
use-credentials
Cross-origin запрос (т.е. с HTTP-заголовком Origin) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок Access-Control-Allow-Credentials (en-US)), ресурс будет искажён, а его использование ограничено.
Если атрибут отсутствует, ресурс загружается без запроса CORS (т.е. без отправки HTTP-заголовка Origin), предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова anonymous. Для получения дополнительной информации смотрите  CORS settings attributes.
href
Этот атрибут определяет URL, связываемого ресурса. URL может быть абсолютным или относительным.
hreflang
Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются BCP47. Используйте этот атрибут только если присутствуют атрибуты href.
importance 
Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:

auto: указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.

high: указывает браузеру, что ресурс находится в высоком приоритете.

low: указывает браузеру, что ресурс находится в низком приоритете.

Примечание: Атрибут importance можно использовать только для элементов <link> с атрибутами rel="preload" или rel="prefetch".

integrity 
Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity.
media
Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или медиавыражением. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.

Примечания:

  • В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е.  media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print, screen, aural, braille. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
  • Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.
referrerpolicy 
Строка, указывающая какой реферер использовать при загрузки ресурсов:
  • no-referrer означает, что заголовок Referer не будет отправлен.
  • no-referrer-when-downgrade означает, что заголовок Referer не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.
  • origin означает, что реферером будет источник, который соответствует схеме, хосту и порту.
  • origin-when-cross-origin означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .
  • unsafe-url означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.
rel
Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком значений типов ссылки.
sizes
Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если rel содержит значение icon или нестандартный тип, например apple-touch-icon Apple. Может иметь следующие значения:
  • any, означает, что иконка может быть масштабируема до любого размера, например в векторном формате image/svg+xml.
  • пробелоразделенный список размеров, каждый в формате <width in pixels>x<height in pixels> или <width in pixels>X<height in pixels>. Каждый из этих размеров должен содержаться в ресурсе.

Примечание: Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS’s ICO формат, как и Apple’s ICNS. ICO более распространены; вы должны использовать их.

title
Атрибут title имеет особое значение для элемента <link>. При использовании <link rel="stylesheet"> он определяет предпочтительную или альтернативную таблицу стилей. Неверное использование может стать причиной игнорирования таблицы стилей.
type
Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией.  Он также используется для типов ссылок rel="preload", чтобы браузер загружал только те типы файлов, которые он поддерживает.

Нестандартные атрибуты

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

Примечание: Хотя в стандарте  HTML нет атрибута disabled, атрибут disabled есть в объекте DOM HTMLLinkElement.

methods 
Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту title) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.
prefetch Secure context
Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.
target 
Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.

Устаревшие атрибуты

charset Этот API вышел из употребления и его работа больше не гарантируется.
Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в  RFC 2045. Значение по умолчанию iso-8859-1. Примечание по использованию: Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок Content-Type на связываемый ресурс.
rev Этот API вышел из употребления и его работа больше не гарантируется.

Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом href. Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута rel. Значения типов ссылки для атрибута аналогичны возможным значениям для   rel.

Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.

Взамен, вы должны использовать атрибут rel с противоположным значением типов ссылки. Например, чтобы установить обратную ссылку для made, укажите author.Также, этот атрибут не означает «ревизия» и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.

Элемент <link> не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.

Включение таблицы стилей

Включение таблицы стилей на страницы имеет следующий синтаксис:

<link href="style.css" rel="stylesheet">

Предоставление альтернативных таблиц стилей

Вы можете указать альтернативные таблицы стилей.

Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню  Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

Предоставление иконок для различных контекстов использования

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


<link rel="apple-touch-icon-precomposed" href="favicon144.png">

<link rel="apple-touch-icon-precomposed" href="favicon114.png">

<link rel="apple-touch-icon-precomposed" href="favicon72.png">

<link rel="apple-touch-icon-precomposed" href="favicon57.png">

<link rel="icon" href="favicon32.png">

Условная загрузка ресурсов с медиавыражениями

Вы можете предоставить тип медиа или запрос внутри атрибута media; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

События загрузки таблицы стилей

Вы можете определить,  когда таблица стилей была загружена, наблюдая за событием  load, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием error:

<script>
var myStylesheet = document.querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  
}

myStylesheet.onerror = function() {
  console.log("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css">

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

Preload примеры

BCD tables only load in the browser

link rel shortcut icon href

Автор admin На чтение 6 мин.

Что такое иконка сайта?

Для начала разберемся, что такое иконка сайта и где мы её можем наблюдать. Иконка сайта это небольшое изображение 16х16 пикселей в формате ico . которое можно увидеть в адресной строке, «закладках», «избранном» «истории», заголовках страниц в браузерах,

а также в результатах поиска поисковой системы Яндекс

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

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

Как подключить иконку к своему сайту?

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

Напомню, тег имеет атрибуты:

  • href — Путь к файлу.
  • rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.
    • shortcut icon — Определяет, что подключаемый файл является иконкой.
    • stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
    • application/rss+xml — Файл в формате XML для описания ленты новостей.
  • type — MIME тип данных подключаемого файла.

И пишется в голове документа между тегами следовательно вся запись вместе приобретает следующий вид:

Где favicon.ico название иконки лежащей в корневой папке сайта.

Кстати иконку для сайта принято называть именно favicon.ico и располагать в корневой папке рядом с главной страницей сайта , дело в том что если иконка будет называться favicon.ico и лежать в корне сайта то для большинства браузеров этого уже вполне хватит чтобы отображать Вашу пиктограмму «по умолчанию» даже без строчки:

Однако всё же лучше связывайте иконку со страницей сайта тегом

Эта страничка использует индивидуальную иконку в виде сердечка.

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

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico .

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-InsFile Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:Program FilesAdobePhotoshop CS. Тогда полный путь для файла плагина будет c:Program FilesAdobePhotoshop CSPlug-InsFile Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

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

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png , в зависимости от типа изображения.

Разбираемся как работает Favicon.ico

Впервые favicon появился в 1999 году в браузере Internet Explorer 5 и с тех пор изменилось не многое. Это почти всегда ICO файл, расположенный в корне сайта /favicon.ico , или как это бывает в CMS размещен в папке темы или изображений:

Классический favicon.ico это ICO файл 16×16, с 16 или 24-битной цветностью и поддержкой прозрачности. Много позже favicon приобрел размер 32×32, однако старые браузеры уменьшают его до 16×16. В IE10 Metro использует в адресной строке иконку размером 32×32.

Атрибут rel favicon’а это продукт эволюции. В IE5 нужно было обязательно указывать shortcut icon для установления соответствия между страницей и ее иконкой, но потом спецификации HTML определили, что атрибуты указанные через пробел являются 2 атрибутами — shortcut и icon . Затем, в 2010, спецификации HTML5 определили, что необходимо декларировать только идентификатор icon . Получилось, что теперь, во всех браузерах кроме IE, можно не указывать shortcut .

Атрибут type для favicon’а так же важен как и для тэга

Итак, как же быть с высоким разрешением? Вы уже задавали себе этот вопрос?

Если все нормальные браузеры поддерживают PNG favicon, а IE только ICO, но ICO favicon все портит в Chrome и Safari, то почему бы не поместить ICO favicon в условные комментарии?

Отличный вопрос, и неплохая идея. Мы могли бы использовать классический 32×32 ICO favicon для IE, и супер гладкий 96×96 PNG favicon для нормальных браузеров.

Одна. Большая. Проблемка. IE10 не поддерживает условные комментарии, и не поддерживает PNG favicon. Да, код выше работал бы в старых браузерах Microsoft, но не в их новинке.

Эй, эй, а что если разместить ICO favicon в корне сайта и использовать
для PNG favicon’а?

О да. Это win. Слава Интернету! Учитывая все ограничения Chrome, Safari и IE, такой метод позволит каждому браузеру использовать наилучший вариант favicon’а. IE проигнорирует
и будет использовать ICO favicon, который найдет в корне сайта /favicon.ico . А нормальные браузеры будут использовать PNG favicon:

А что, если я хочу использовать несколько favicon’ов или моя CMS не позволяет так сделать? Есть другой способ?

Да, но он Вам не понравится.

Не нравится такое решение? Не все потеряно. Большинство пользователей IE10 по совместительству пользователи Windows 8, а W8 принес нам новый тип иконок для сайтов — плитки.

IE10 Metro может отображать уникальную плитку, в случае если пользователь добавил Ваш сайт на стартовый экран. Плиточная иконка это PNG файл размером 144×144, и лучше всего если с прозрачным фоном. Фоновый цвет может быть задан с помощью шестнадцатеричного RGB цвета (#RRGGBB), именем CSS цвета, или rgb() функцией. Разметка довольно проста.

Итак, давайте соберем все вместе, учтем особенности IE10 и получим итоговое решение.

Вот и все на сегодня!

Если Вы хотите узнать больше о создании favicon’а, то я советую почитать Джона Хикса — Create the perfect favicon

Похожие записи

  • Основы библиотеки modernizr, примеры использования
  • Примеры использования HTML5: часть 2
  • Правильная картинка для ссылки Вконтакте и других социальных сетей
  • Примеры использования HTML5: часть 1
Немного об авторе: Сергей Белянин

Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу 🙂

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.ico» vs

Вопрос

  • Какова наилучшая практика создания favicon на веб-сайте?
  • и является .ico файлом с изображениями 16×16 и 32×32 лучше, чем файл .png только с 16×16?
  • Возможно ли, что правильный метод сегодня не работает в достаточно старых браузерах?

Метод 1

Размещение файла с именем favicon.ico в главном каталоге — это один из способов. Браузер всегда запрашивает этот файл. Вы можете видеть это в файлах журнала apache.

Метод 2

HTML-тег в разделе <head>:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
Ответ 1

Существует несколько способов создания значка. Лучший способ для вас зависит от различных факторов:

  • Время, затрачиваемое на выполнение этой задачи. Для многих людей это «как можно быстрее».
  • Усилия, которые вы готовы сделать. Например, рисование значка 16×16 вручную для улучшения результатов.
  • Конкретные ограничения, такие как поддержка определенного браузера с нечетными спецификациями.

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

Преимущества такого решения: он быстро и все соображения совместимости уже были адресованы вам.

Как вы можете предположить, вы можете создать файл favicon.ico, который содержит изображения 16×16 и 32×32 (обратите внимание, что Microsoft рекомендует 16×16, 32×32 и 48×48).

Затем объявите его в своем HTML-коде:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Этот метод будет работать со всеми настольными браузерами, старыми и новыми. Но большинство мобильных браузеров будут игнорировать значок.

О вашем предположении размещения файла favicon.ico в корне и не объявляя его: остерегайтесь, хотя эта техника работает в большинстве браузеров, она не на 100% надежна. Например, Windows Safari не может найти его (предоставлено: этот браузер как-то устарел в Windows, но вы понимаете). Этот метод полезен в сочетании с значками PNG (для современных браузеров).

В вашем вопросе вы не упоминаете мобильные браузеры. Большинство из них будут игнорировать файл favicon.ico. Хотя ваш сайт может быть посвящен настольным браузерам, возможно, вы не хотите вообще игнорировать мобильные браузеры.

Вы можете добиться хорошей совместимости с:

  • favicon.ico, см. выше.
  • Значок 192×192 PNG для Android Chrome
  • Значок Apple Touch 180×180 (для iPhone 6 Plus, другое устройство будет масштабировать его по мере необходимости).

Объявите их с помощью

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png">
<link rel="apple-touch-icon" href="/path/to/icons/apple-touch-icon-180x180.png">

Это не полная история, но в большинстве случаев это достаточно хорошо.

Все о фавиконах (и сенсорных иконках)

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

Основы

Фавикон (значок избранного) — это изображение, используемое браузерами для представления веб-страницы.Обычно это 16×16 пикселей, но теперь чаще требуются различные и большие размеры, поскольку браузеры используют их все чаще —

  • Адресная строка
  • Панель ссылок
  • Закладки
  • Вкладки
  • Значок рабочего стола

Если мы не укажем, где найти значок, все основные браузеры (начиная с IE5) по умолчанию будут искать файл с именем «favicon.ico» в корневом каталоге веб-сайта. Это означает, что нам технически не нужно декларировать что-либо еще, чтобы иметь рабочий значок.

Однако использование формата ico может иметь ограничения. Он не поддерживает прозрачность и не наиболее оптимизирован для Интернета. В настоящее время мы можем использовать более широкий спектр форматов, включая png, gif, jpeg и, в некоторых случаях, svg.

Объявление Favicon и тег ссылки

При отклонении от значения по умолчанию значки значков могут быть объявлены с помощью тега . Тег принимает следующие атрибуты —

отн.

Атрибут rel используется для объявления связи между html-документом и связанным элементом.Мы используем это, помимо прочего, для связывания таблиц стилей. Что касается значков, в официальной документации HTML указано, что для этого атрибута следует установить значение —

.

Однако, как вы, возможно, видели раньше, атрибут иногда записывается как —

Это связано с тем, что некоторые старые браузеры (IE8 и ниже) требуют, чтобы это было написано таким образом, и в противном случае будут игнорировать весь тег.По этой причине, хотя значок ярлыка формально не является частью HTML5, он по-прежнему распознается, и современные браузеры его принимают. Однако по причинам, которые я объясню, вам может потребоваться использовать только официальный метод на практике.

Тип

Атрибут type указывает формат типа MIME для связываемого элемента. Например, файл ico имеет тип image / x-icon и файл png image / png .

Согласно W3C, указание типа «чисто рекомендательное»:

«Атрибут type используется как подсказка для пользовательских агентов, чтобы они могли избежать выборки ресурсов, которые они не поддерживают… Пользовательские агенты не должны учитывать атрибут типа «авторитетный»

Несмотря на это, IE 9 и 10 требуют указания атрибута type. В этих версиях, хотя необходимость определения атрибута rel как ярлыка была удалена, вместо этого добавлена ​​необходимость указывать тип носителя как image / x-icon .

К счастью, это не относится к IE 11, который, как и другие современные браузеры, не требует указания типа носителя.

Размеры

Атрибут sizes используется, чтобы объявить, какой размер вы хотите использовать для конкретного связанного файла.Поскольку разные размеры используются для разных целей, вы можете использовать оптимизированные файлы для каждой из этих целей. Это особенно важно при использовании файлов png, поскольку они не масштабируются. Вот отличная шпаргалка, в которой показано, какие размеры вам нужны и для чего они используются.

Href

Определяет расположение значка.

Собираем

Браузер Ссылка «отн.» / «Тип» Допустимые форматы
IE 8 и ниже ссылка rel = «ярлык» ico
IE 9, IE 10 ссылка rel = «icon» type = «image / x-icon» или
link rel = «ярлык»		 ico
IE 11 ссылка rel = «icon» ico, png, gif
Хром ссылка rel = «icon» ico, png, gif
Firefox ссылка rel = «icon» ico, png, gif, svg *
Safari ссылка rel = «icon» ico, png, gif
Opera ссылка rel = «icon» ico, png, gif

Исходя из этих различий, может показаться, что лучшим способом было бы объявить две версии — файлы png с использованием современного метода и файл ico с использованием метода IE8.

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

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

Сенсорные иконки для мобильных устройств

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

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

Для Windows эти значки определяются с помощью метатега.

Для Windows 8 / IE 10 —

Для Windows 8.1 / IE 11 —

   ->





  
    
      
      
      
      
       # 009900

Вот и все! Для такой небольшой части сайта для значков требуется слишком много частей.Для очень простых сайтов я, вероятно, просто буду использовать формат ico, если мне не понадобится что-то более интересное. Я просто не могу дождаться, когда фавиконы SVG станут вещью, хотя до нас еще далеко!

Все, что вы когда-либо хотели знать о Favicons


Пятьдесят избранных значков Если у вас есть веб-сайт, вам понадобится значок . Для тех, кто может не знать, фавиконы — это маленькие квадратные значки, которые часто ассоциируются с веб-сайтами. Иконки появляются во многих местах, включая панели инструментов браузера, закладки, вкладки и адресные строки.Фавиконы обеспечивают немедленную визуальную идентификацию представляемых ими сайтов, обеспечивая сверхлегкую навигацию для пользователей Интернета. При просмотре закладок с 50 открытыми вкладками поиск значков и нажатие на них намного эффективнее, чем чтение груд текста ссылок. Тем не менее, не только упрощая людям идентификацию и поиск своих любимых веб-сайтов, они также играют важную роль в брендинге сайта и узнаваемости продукта. Популярные браузеры, такие как Firefox, Opera и Internet Explorer, фактически меняют бренд при отображении сайтов с поддержкой значков.Например, посмотрите, насколько современные браузеры охотно соответствуют образу веб-дизайнера / разработчика Джонатана Снука:


Вы видели новый браузер FireSnook?
Джонатан Снук проводит ребрендинг Opera
Кому сейчас принадлежит браузер?

Конечно, невероятно сильный дизайн страницы помогает в каждом из этих примеров, но по большей части именно значок объединяет все воедино, визуально объединяя различные компоненты браузера в хорошо продуманный интерфейс просмотра. Теперь, чтобы обеспечить контраст, давайте рассмотрим гипотетический причудливый мир, в котором страницы Snook без значков являются обычным явлением:


О, это браузер Opera..

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

Во время веб-дизайна мне нравится думать о фавиконе сайта как о его жемчужине. Последний штрих, добавленный после того, как все остальное встало на свои места. Это символ достижения, завершенности и значимости. Нет ничего лучше , чем создание закладок для нового сайта в Firefox и наблюдение за тем, как его значок становится на свои места.И наоборот, нет ничего хуже , чем сутенерство огромного ряда ярлыков на панели инструментов браузера для ваших любимых сайтов, только чтобы обнаружить, что некоторым из них, к сожалению, не хватает своих репрезентативных значков:

.. очень жалко, по моему скромному мнению. Несмотря на то, что я храню эти две безликие закладки на панели избранных инструментов, я съеживаюсь от отвращения каждый раз, когда мне приходится нажимать на одну из них. Хорошо, хорошо — это действительно не , а плохой, но вы поняли …;) Этот снимок экрана еще раз подчеркивает важность использования значка для представления вашего веб-сайта.

Приступаем к делу ..

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

Форматирование вашего значка

Вопреки распространенному мнению, значки не обязательно создавать в формате .ico . Конечно, формат .ico может быть самым популярным типом файлов значков, но пока что единственным.Фактически, значки значков бывают самых разных типов. Вот некоторые из наиболее распространенных форматов значков:

.. и есть много других возможностей, в зависимости от ваших конкретных потребностей. Независимо от типа файла, значки представляют собой квадратные изображения, которые обычно имеют размеры 16 × 16 и 32 × 32, измеряемые в пикселях. Хотя возможны размеры 64 × 64 и даже больше, поддержка браузером несовместима для любых размеров, превышающих 16 × 16. Как правило, значков 16 × 16 более чем достаточно, однако некоторые браузеры, такие как Microsoft Internet Explorer, могут отображать значки с разрешением 32 × 32 для сайтов, добавленных в закладки.

К счастью, значки, созданные в формате .ico , могут инкапсулировать несколько изображений, включая уникальные экземпляры 16 × 16, 32 × 32 и даже большего разрешения. Это полезно, когда масштабирование изображения может ухудшить читаемость вашего значка. Принимая во внимание, что форматы .gif, и .png, могут масштабировать до без потери качества изображения, обратное, безусловно, неверно.

Мой совет по выбору лучшего размера и формата? Начните с квадратного изображения любого размера и используйте его для создания значка размером 16 × 16 пикселей в .ico (или любой другой формат файла по вашему выбору). Это, безусловно, наиболее часто используемый тип значков, и он будет достаточно хорошо служить вам (и вашему сайту).

Создание вашего фавикона

В настоящее время существует несколько отличных способов создания высококачественных фавиконов в формате .ico :

  • Загрузите выбранное изображение в html-kit и автоматически сгенерируйте полный пакет значков.
  • Создайте собственный значок с помощью favicon.cc для создания собственного пиксельного произведения искусства.
  • Установите плагин favicon для Photoshop и получите полный контроль над своим favicon.

И, конечно же, для создания значков в других, распространенных форматах, таких как .gif и .png , просто используйте свой любимый редактор изображений и настройте любое изображение так, чтобы оно соответствовало размерам 16 × 16 или 32 × 32. Другой вариант, который я лично не пробовал, включает создание значка в формате .gif или .png с последующим переименованием его в «favicon.ico» (т. Е., изменив расширение файла на .ico ). Однако имейте в виду, что этот метод просто маскирует истинный формат и переименовывает его для обеспечения совместимости с браузером. Таким образом, если вы планируете использовать этот трюк, не забудьте использовать его как type = "image / ico" , иначе определенные браузеры могут не распознать ваш значок значка должным образом (более подробную информацию см. В следующем разделе).

Обслуживание вашего favicon

После того, как вы создали идеальный значок, пришло время загрузить его и показать своим посетителям.Начните с загрузки вашего значка в корневой каталог (www) вашего веб-сайта. Хотя теоретически возможны и другие местоположения, некоторые браузеры, такие как Internet Explorer и даже Firefox, могут запутаться и полностью игнорировать ваш значок. Традиционным и, возможно, стандартным местом для размещения значков является корень сайта.

После загрузки вашего значка самое время сделать его вызов на каждой из ваших веб-страниц. Фавиконы вызываются через элемент , который находится в разделе веб-документов (X) HTML.Вот общий формат, необходимый элементу для вызова значков:

Давайте рассмотрим каждый атрибут этого элемента и обсудим возможные варианты.

rel = "ярлык"
Атрибут rel сообщает браузеру цель связанного ресурса. Все браузеры понимают значение rel для « ярлыка », но только некоторые браузеры, отличные от IE, такие как Mozilla и Opera, правильно интерпретируют значение rel « icon ».Таким образом, использование rel = "shortcut icon" является оптимальным.
type = "image / x-icon"
Атрибут типа определяет тип MIME для связанного ресурса. Все браузеры понимают « изображение / x-значок », но это правильно только в том случае, если имеется в виду фактический значок .ico в формате . Если ваш значок отформатирован как .gif , .jpg или .png , правильным типом MIME будет « image / ico », как представлено type = «image / ico» .
href = "http: //domain.tld/favicon.ico"
href указывает на покрытие связанного ресурса. Рекомендуется разместить ваш значок в корневом каталоге вашего сайта. Если вы выбрали альтернативный каталог, отредактируйте путь к этому элементу, чтобы он указывал на правильное местоположение. Однако имейте в виду, что нет гарантии, что все браузеры распознают значки, расположенные не в корневом каталоге. Также не забудьте изменить расширение файла « .ico », указанное в примере, если вы используете другой формат.

Таким образом, предполагая, что мы следуем предлагаемым «лучшим практикам» для реализации значков, есть два основных типа элементов , используемых для вызова значков:

Значок вызова в формате .ico
Значок вызова в любом другом формате

Не забудьте сменить domain.tld с на на своем домене ! 🙂

Сноски

  • Выбирая формат для вашего фавикона, помните, что наш старый друг IE плохо работает с .png .
  • При проверке фавикона в IE вам, возможно, придется принести в жертву идолам, чтобы он появился.
  • IE 5 может распознавать только значки с именем «favicon.ico».
  • Internet Explorer 6 может поддерживать только .Формат ico для значков.
  • В целом, значки гораздо более гибкие, чем можно было бы представить в IE. Другие браузеры поддерживают гораздо более широкую реализацию значков, включая поддержку альтернативных имен файлов, разных типов файлов и нескольких размеров файлов. Браузеры, отличные от IE, даже упрощают загрузку значка в ваш браузер! Ууу! 😉

Об авторе

Джефф Старр = Веб-разработчик. Автор книги. Секретно важно.

HTML-элемент: ссылка: rel: icon

HTML-элемент: ссылка: rel: icon

  • Глобальное использование
    82.26% + 0% знак равно 82,26%
IE
  1. 6-10: Не поддерживается
  2. 11: Поддерживается
Edge
  1. 12-93: Поддерживается
  2. 94: Поддерживается
Firefox
  1. 2-91: Поддерживается
  2. 92: Поддерживается
  3. 93–94: Поддерживается
Chrome
  1. 4–93: Поддерживается
  2. 94: Поддерживается
  3. 95–97: Поддерживается
Safari
  1. 3.1 — 14.1: Поддерживается
  2. 15: Поддерживается
  3. TP: Поддерживается
Opera
  1. 10 — 78: Поддерживается
  2. 79: Поддерживается
Safari на iOS
  1. 3,2 — 14.7: Не поддерживается
  2. 15 : Не поддерживается
Opera Mini
  1. все: Поддержка неизвестна
Браузер Android
  1. 2.1 — 4.4.4: Не поддерживается
  2. 94: Поддерживается
Opera Mobile
  1. 12 — 12.1: Не поддерживается
  2. 64: Не поддерживается
Chrome для Android
  1. 94: Поддерживается
Firefox для Android
  1. 92: Поддерживается
Браузер UC для Android
  1. 12.12: Поддержка неизвестна
Samsung Internet
  1. 4 — 14.0: Поддерживается
  2. 15.0: Поддерживается
Браузер QQ
  1. 10.4: Поддержка неизвестна
Браузер Baidu
  1. 7.12: Поддержка неизвестна
Браузер KaiOS
  1. 2.5: Поддержка неизвестна

Добавление значков в многоплатформенный мир с несколькими браузерами

Иконки: раньше было так просто. Простое растровое изображение favicon.ico размером 16 × 16 пикселей, используемое для решения этой задачи. Это было похоже на знак препинания в конце проекта; эквивалент веб-разработчика завершению предложения восклицательным знаком или точкой. Так было раньше. Но за последние 20 лет все изменилось.

Что такое значки?

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

  • рядом с названием сайта во вкладке браузера
  • в списке закладок
  • как значок запуска на домашних экранах и рабочих столах устройств
  • в самой адресной строке (хотя я не уверен, что какие-либо современные браузеры по-прежнему делают это, предпочитая вместо этого отображать его во вкладке браузера)

Браузер Firefox показывает большой значок на экране запуска и маленький значок на вкладке браузера

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

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

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

Что такое формат значка .ico (ICO)?

Прежде чем мы углубимся, давайте кратко рассмотрим сам формат ICO.

Формат ICO — это формат изображения для отображения значков, он берет свое начало в первой версии операционной системы Windows — Microsoft Windows 1.0, выпущенной в 1985 году. По сути, это формат контейнера изображений для хранения одного или нескольких файлов растровых изображений, первоначально в Был добавлен формат BMP, а позже и поддержка PNG.

Позже, в 1999 году, Microsoft перенесла формат ICO в Internet Explorer 5 в качестве способа создания закладок и идентификации сайта, и так родился значок.

Первоначально значки в Интернете имели размер 16 × 16 пикселей, но со временем была добавлена ​​поддержка для включения нескольких разных размеров в файл ICO, включая 32 × 32, 24 × 24, 48 × 48, 64 × 64. , 128 × 128 и 256 × 256.

Возникает вопрос: если favicon.ico может содержать несколько разных размеров, какие размеры вам следует использовать? Мы скоро вернемся к этому.

Как добавить фавикон?

Хотя термины значок и ярлык часто используются как синонимы, значки не обязательно должны быть в формате ICO.Действительно, форматы GIF, PNG, JPG широко распространены.

Давайте начнем с самого старого и самого простого способа добавить значок на ваш сайт.

Размещение favicon.ico в корне вашего сайта

Первоначальный способ добавления значка на сайт, разработанный Microsoft для Internet Explorer 5, заключался в сохранении файла изображения значка в корневой папке веб-сайта с именем файла favicon.ico . Это было все, что требовалось; HTML не требуется. Большинство современных браузеров по-прежнему проверяют корневую папку на наличие значка .ico файл.

Позже, когда значок стал частью стандартов HTML 4.01 и XHTML 1.0, было рекомендовано использовать тег для отображения значков. Мы посмотрим на это дальше.

Использование тега

для включения значка

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

Даже это простое предложение имеет некоторые сложности с различными допустимыми значениями для атрибутов rel и type ссылки. Например, все следующее будет работать:

<ссылка rel = "icon" type = "image / x-icon" href = "/ favicon.ico ">

Допустимы и другие форматы изображений, поскольку значок больше не ограничивается форматом ICO:

Включая значки ярлыков с манифестом веб-приложения: manifest.json

Вы часто будете слышать, как файл manifest.json упоминается одновременно с прогрессивными веб-приложениями (PWA). Файл manifest.json — это файл JSON, который позволяет настраивать внешний вид и поведение при запуске веб-приложения, отмеченного закладкой или Добавленного на рабочий стол устройства.

manifest.json позволяет настраивать ряд параметров, в том числе внешний вид значка, используемого для запуска веб-приложения.

Чтобы узнать больше о manifest.json и его возможности, пожалуйста, прочтите нашу статью manifest.json .

Значок, отображаемый на главном экране устройства Android

Манифест содержит свойство массива, значков, , которые можно использовать для определения списка объектов изображения, каждый из которых может иметь свойства src , размеров и типа , которые описывают значок.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

{

«name»: «mobiForge»,

«short_name»: «mobiForge»,

«icons»: [

{

«src»: «/ icon-144×144.png «,

» sizes «:» 144×144 «,

» type «:» image / png «

},

{

» src «:» /icon-192×192.png «,

» sizes «:» 192×192 «,

» type «:» image / png «

}

],

» theme_color «:» #ffffff «,

» background_color «:» #ffffff «,

» дисплей «:» автономный «

}

Используйте следующую ссылку для ссылки на свой манифест, который в данном случае сохраняется в корне:

Использование файла browserconfig.xml для включения значков

browserconfig.xml — это файл XML, который можно использовать для определения значков плиток для Microsoft Windows. Он также находится в корне веб-сайта и выглядит так:

# da532c

Основными элементами, которые нас здесь интересуют, являются элемент и его потомки. Приведенный выше код будет определять плитку с двумя разными размерами: 150 × 150 и 310 × 310.Подробнее об этих размерах позже.

Так много способов добавить значок ярлыка — какой из них я должен использовать?

Имея так много способов добавить значок, вы можете спросить, какой из них вам следует использовать. А вот и самое интересное: все они! Хорошо, так весело? Не так много.

Почему существует так много способов добавить значок?

Ранее мы говорили, что большинство браузеров будут поддерживать файлы размером 16 × 16 и 32 × 32 favicon.ico в корневом каталоге. Так почему бы нам просто не остановиться на этом? Это вопрос поддержки множества платформ и плотностей пикселей экрана, так что значок ярлыка всегда будет хорошо выглядеть в различных размерах и контекстах.

Во-первых, поскольку значок ярлыка представляет точку запуска веб-сайта или приложения, он всегда должен выглядеть хорошо, то есть четким и четким, без пикселов, а размер и качество должны соответствовать разрешению экрана устройства. Значки 16 × 16 и 32 × 32 — хороший запасной вариант, но на экранах с высоким разрешением они не обойдутся.

Тогда, например, в мобильных операционных системах при подготовке значков ярлыков необходимо учитывать то, как значок будет отображаться при добавлении на главный экран устройства.Каждая ОС имеет свои особенности и набор из предпочтительных размеров значков для различной плотности пикселей экрана. Манифест веб-приложения и файлы browserconfig.xml дают разработчику больше контроля над тем, как веб-сайт будет представлен и запущен на любой конкретной платформе.

Какие размеры фавикона использовать?

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

Во-первых, с момента введения атрибута sizes в HTML5, теперь мы можем указать исходный значок по-новому, используя файлы PNG:

Рекомендации по использованию хрома

На сайте разработчиков Google есть рекомендация по максимальному размеру 192 × 192 пикселей для Chrome.

Будет автоматически уменьшен до необходимого размера.

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

Это дает нам размеры:

  • 48 × 48
  • 96 × 96
  • 144 × 144
  • 192 × 192

Другие источники Google для разработчиков рекомендуют еще более высокое разрешение для использования на Добавить на рабочий стол заставку. Таким образом, мы можем добавить 256, 384 и 512:

  • 256 × 256
  • 384 × 384
  • 512 × 512

Таким образом, разметка для включения всех этих изображений значков будет:

Рекомендации Safari

Apple рекомендует следующие размеры значков:

  • 120 × 120: iPhone
  • 152 × 152: iPad
  • 167 × 167: iPad Retina
  • 180 × 180: iPhone Retina

Их можно включить с помощью тега link .Это даст нам:

Оптимальные размеры для старых устройств iOS:

  • 57 × 57
  • 60 × 60
  • 72 × 72
  • 76 × 76
  • 114 × 114

Их также можно поместить в корневую папку с такими именами файлов, как apple-touch-icon-180x180.png и apple-touch-icon.png , и Safari iOS автоматически найдет нужный значок.

Однако, поскольку другие платформы также могут использовать значки iOS, лучше раскрывать их явно с помощью тегов link .

Закрепленные вкладки Safari

Safari также использует значок SVG для отображения с закрепленными вкладками. Для этого используются изображения SVG (поэтому размер пикселя не важен):

Плитка Microsoft Windows

Даже если вам наплевать на мобильную ОС Windows Phone — есть веские причины не делать этого, поскольку ее судьба предрешена — вам все равно следует заботиться о значках плиток Windows, поскольку они используются в версиях Windows 8 и выше, на планшетах, ноутбуки и ПК.

Плитки Microsoft Windows (Источник: Microsoft)

Версии Windows 8 и более поздние используют формат плитки для отображения значков ярлыков.Руководства по проектированию этих плиток достаточно сложны; мы просто рассмотрим здесь требуемые размеры.

Основные размеры плитки, определенные Microsoft:

  • 70 × 70 (малая плитка)
  • 150 × 150 (средняя плитка)
  • 310 × 150 (широкая плитка)
  • 310 × 310 (большая плитка)

В Windows 8.0 и IE 10 плитка 144 × 144 может быть определена в разметке следующим образом:

Но, начиная с версии 8.1, мы можем использовать файл browserconfig.xml и поддерживать чистоту заголовка и нашей страницы.

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

В результате будет получен следующий файл browserconfig.xml , который ссылается на изображения плитки, масштабированные на 1.8:

# 009900

Edge и IE11 автоматически запросят файл browserconfig.xml . Тем не менее, вы можете явно открыть файл конфигурации следующим образом, что позволит вам изменить его имя и путь:

Собираем все вместе

Если мы сложим все это вместе, предполагая, что мы соблюдаем все рекомендуемые размеры для каждого из основных браузеров и платформ, то в конечном итоге мы получим набор файлов изображений, подобных следующему:

  • favicon.ico
  • favicon-16.png
  • favicon-32.png
  • icon-48.png
  • icon-96.png
  • icon-144.png
  • icon-192.png
  • значок-256.png
  • icon-384.png
  • icon-512.png
  • apple-touch-icon-57.png
  • apple-touch-icon-60.png
  • apple-touch-icon-72.png
  • apple-touch-icon-76.png
  • apple-touch-icon-114.png
  • apple-touch-icon-120.png
  • apple-touch-icon-152.png
  • apple-touch-icon-167.png
  • apple-touch-icon-180.png
  • ms-tile-144.png
  • ms-tile-126.png
  • ms-tile-270.png
  • мс-плитка-558 × 270.png
  • ms-tile-558.png

И два файла конфигурации:

  • manifest.json
  • browserconfig.xml

Разметка Favicon

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

20

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

Прозрачность и обрезка: не все значки обрабатываются одинаково

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

Мы уже видели, что каждая платформа работает по-разному и использует собственный набор размеров изображений. Но на этом различия не заканчиваются. Есть некоторые, возможно, неожиданные различия в том, как платформы будут обрабатывать значки, над которыми вы работали.

Например, прозрачность подходит для Android, но для iOS прозрачность будет преобразована в черный цвет. Очевидно, что во многих случаях это не подойдет.

Еще одно отличие заключается в том, как обрезаются значки.iOS добавляет к значкам закругленные углы, а Android — нет. Windows помещает изображения значков на плитки, и в зависимости от размера используемых плиток и заполнения изображения значка значок может оказаться слишком маленьким или слишком большим для значка.

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

Неужели нам действительно нужны все эти значки?

Это все кажется большим трудом для такой маленькой иконки.

С этим согласен Philippe Bernard , автор RealFaviconGenerator.Он протестировал несколько вариантов уменьшения количества требуемых файлов.

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

Уменьшение масштаба браузера

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

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

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

Набор минимальных ярлыков

  1. Следующие файлы изображений в корневой папке

    • значок.ico (с размерами значков 16 × 16, 32 × 32)
    • favicon-16x16.png : Современный эквивалент оригинального формата ICO
    • favicon-32x32.png : Safari
    • apple-touch-icon-180.png : Значок Apple touch
    • icon-192.png : Chrome / Android
    • safari-pinned-tab.svg : закрепленная вкладка Safari SVG
    • mstile-150x150.png : плитка MS

  2. Файл manifest.json, в котором используется изображение Chrome:

    {

    «name»: «»,

    «short_name»: «»,

    «icons»: [

    {

    «src»: «/ icon-192.png «,

    » sizes «:» 192×192 «,

    » type «:» image / png «

    }

    ],

    » theme_color «:» #ffffff «,

    » background_color «:» # ffffff «,

    » дисплей «:» автономный «

    }

  3. Файл browserconfig.xml, в котором используется образ mstile

    .

    # / TileColor>

  4. Следующая разметка

Есть некоторые тонкости в том, как появился этот набор иконок и разметки.Я призываю вас прочитать обоснование некоторых решений.

Например, мы можем сбросить следующие

, поскольку мы все равно используем файл manifest.json для Android, и Chrome будет использовать его, если он объявлен.

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

Будущее фавиконов

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

SVG значки

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

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

Для использования значка SVG атрибут sizes принимает значение any :

Ресурсы

Два очень полезных ресурса значков:

  1. The Favicon Cheatsheet, ресурс на github, в котором перечислены наиболее широко используемые форматы на различных платформах.
  2. RealFaviconGenerator, авторство вышеупомянутого Филиппа Бернара

Дополнительные ресурсы включают:

  1. Рекомендации Apple UI,
  2. Разработчики Google: значки и цвета браузера
  3. Рекомендации Microsoft по активам плиток и значков
  4. Apple Develop: создание закрепленных значков вкладок

Вы уже используете значки SVG? Руководство для современных браузеров.| Антуана Буланже | The Startup

Вы должны использовать значки SVG. Сейчас они поддерживаются всеми современными браузерами.

Кроме того, вам, вероятно, не нужны все эти ссылки на значки и размеры, которые вы копируете из проектов в проекты. Давайте узнаем, какой абсолютный минимум требуется, слово в слово.

Главный значок может быть SVG любого размера. Тип type = ”image / svg + xml” не нужен.

Для Safari все немного иначе.Вам нужно добавить иконку маски . Это тоже SVG, но он должен быть одного цвета и размещен на прозрачном фоне. Браузер добавляет цвет атрибута.

Значок для устройств iOS, а также страница новой вкладки для избранного в браузерах и многое другое. Вам понадобится только Размер 180 x 180 , а атрибут sizes лишний.

. manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Эти строки являются обязательными для прохождения теста Lighthouse. Связанный значок используется Android и Chrome. Максимальный размер 512 x 512 — единственный необходим один.

 {
 "name": "Starter", 
 "short_name": "Starter", 
 "icons": [{
 "src": "google-touch-icon.png", 
 "sizes" : "512x512" 
}], 
 "background_color": "#ffffff", 
 "theme_color": "#ffffff", 
 "display": "fullscreen" 
}

Цвет темы meta по-прежнему требуется для цвета браузера Chrome Android.

Вот и все, это все значки, которые вам нужны для текущих современных браузеров, все остальное не нужно. Можно добавить msapplication-TileImage , если вам нужен другой значок на плитках Windows, в противном случае используется значок apple-touch-icon . TileColor больше не используется.

К сожалению, не все используют современные браузеры, НО это можно легко решить, отбросив значок 32 x 32 .ico в корне вашего веб-сайта. Это работает везде, даже у вашей бабушки.

Напоследок совет по темному режиму. Одним из преимуществ значка SVG является то, что вы можете изменить цвет с помощью CSS. Используя запрос prefers-color-scheme media , цвет вашего значка меняется в зависимости от темного или светлого режима пользователя. Этот метод не будет работать с иконкой маски , поскольку цвет указан в атрибуте, но Safari добавляет белый фон, если контраст не достаточен.

Вот окончательный результат. Скопируйте его в своего веб-сайта и не забудьте поместить favicon.ico в корень. ✌️

новый код — Создание и развертывание SVG-значков

Простые, часто геометрические и развертываемые во все большем числе различных размеров значки значков, казалось бы, являются идеальным кандидатом для формата SVG. К сожалению, браузерная поддержка значков SVG отсутствовала до недавнего времени.Firefox 41 теперь поддерживает их, как и Safari 9 для настольных компьютеров и мобильных устройств (с некоторыми положениями), но IE / Edge и Chrome продолжают игнорировать формат, по крайней мере, на данный момент. Однако эта ситуация может (и, надеюсь, скоро изменится), поэтому стоит уделить время изучению возможностей и синтаксиса значков SVG, чтобы подготовить свой сайт к тому, когда придет время.

Проблема

Изначально концепция favicon была основана на графике 16 × 16 пикселей, но теперь она расширилась и видоизменилась, охватив целую серию сенсорных значков, плиток, параметров экрана Retina и многого другого.Полное решение (созданное realfavicongenerator) дает смехотворно длинный список вариантов:

Хотя многие из этих файлов можно оставить в корне вашего сайта, чтобы соответствующие приложения могли их подобрать, вместо того, чтобы указывать их явно в вашем HTML, это все еще очень много контента, который нужно создавать и управлять. Один масштабируемый файл был бы намного лучше. Например, логотип этого сайта, сохраненный как favicon.svg :

  
     значок нового кода

Что выглядит так:

Значок можно использовать, добавив одну строку кода на каждую страницу в :

Несколько примечаний:

  • Компоненты значка нарисованы как отдельные, неперекрывающиеся геометрические фигуры для четкого взаимодействия: значок может по-прежнему отображаться с разрешением 16 × 16 пикселей и должен быть четким при таком размере. На первом месте должны быть простота и ясность дизайна.
  • По той же причине фон SVG остается незаполненным (и, следовательно, прозрачным), поэтому его можно использовать в максимально возможном количестве контекстов.
  • Окно просмотра для SVG должно быть квадратным (т.е.е. первая и последняя пара чисел должны совпадать).
  • Сам рисунок должен занимать как можно большую часть viewBox (SVG «холст»).
  • <название> описывает цель чертежа; и отдельные элементы </code> для каждого <code> многоугольника> </code> также могут быть добавлены для доступности.</li><li> Оптимизация и минификация должны использоваться для SVG, чтобы сделать его как можно меньше.</li><li> SVG <em> должен </em> поставляться с MIME-типом <code> image / svg + xml </code> для работы.</li></ul><h3><span class="ez-toc-section" id="_iOS"> Расширение до iOS </span></h3><p> iOS 9 также поддерживает значки SVG для использования на закрепленных вкладках, с некоторыми оговорками:</p><ol><li> Элементы SVG должны быть полностью черными.</li><li> Ссылка <code> </code> на значок фавикона должна использовать неофициальный атрибут <code> mask-icon </code>.</li><li> По желанию, значок может быть раскрашен с использованием столь же неофициального атрибута <code> color </code>, с использованием шестнадцатеричного числа, ключевого слова или значения rgb.Следует избегать светлых тонов.</li></ol><p> Учитывая эти условия, я бы рекомендовал указать другой файл SVG с удаленной информацией о цвете:</p><pre> <code> <svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 500 500"> <title> значок нового кода

    Чтобы использовать это в iOS:

    Объединяя все вместе

    Предполагая, что вам больше не нужно поддерживать IE8 или более раннюю версию, вы можете полностью отказаться от формата .ico и просто отправить всем браузерам файл PNG для значка вашего сайта. Чтобы и сохранили преимущество SVG, мы должны ссылаться на значки в определенном порядке:
    • Предполагается, что не имеет favicon.ico в корне вашего сайта: если он присутствует, некоторые браузеры будут использовать этот файл предпочтительно, независимо от , какие директивы favicon у вас могут быть в вашем < голова> .
    • Вам все равно нужно будет добавить значки для iOS и MS, если они вам нужны; SVG пока не охватывает их.

    Заключение

    SVG — отличный формат для значков, и мы можем только надеяться, что Chrome скоро раскроет его потенциал. Идеальное решение позволило бы SVG использовать разные элементы или на разных уровнях детализации для значков разного размера, содержащихся в одном файле… хотя, вероятно, сейчас этого ожидать немного.

    Крейг Хокенберри недавно написал отличную статью о разработке SVG-значка.

    Понравилась эта вещь? Я приглашаю вас подписаться на меня на twitter.com/dudleystorey, чтобы узнать больше.

    HTML-значок ярлыка favicon — правильное использование синтаксиса

    «Значок избранного» или «значок закладки» веб-сайта — это часто упускаемый из виду элемент на веб-странице. Веб-дизайнеры и разработчики по-разному реализуют этот простой образ. В этой статье я объясню различия и объясню, как правильно использовать ваш значок.

    Различные реализации значков

    Вот несколько различных реализаций значков для веб-страницы.Эти различные строки кода используют тег link с атрибутом Relationship. Обратите внимание на то, что вы будете иногда видеть «значок ярлыка», а иногда просто «значок». Вы также можете вообще не видеть тега, но значок в вашем браузере все равно будет.

     1. 
2. 
3. 
4.

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

    Различия между «ярлыком» и «значком»

    Правильное отношение ссылки ( ссылка rel = "" ) для создания значка закладки не включает слово «ярлык».«Ярлык - это просто обходной путь для обозревателя Internet Explorer, позволяющий назначить значок без имени favicon.ico . Особые обстоятельства для IE? Иди и подумай… Вам придется использовать «ярлык», если вы собираетесь иметь несколько значков в своей веб-папке.

    При использовании «значка» вы также можете указать тип изображения, как я это сделал в примерах 3 и 4 выше. Несмотря на то, что у вас есть возможность использовать крошечный JPG или PNG, я настоятельно рекомендую вам создать настоящий файл ICO на favicon.cc. Это займет всего минуту, и у вас будет законный файл значков.

    Не указан значок избранного

    Многие сайты даже не удосуживаются объявлять значок. Сюда входят http://google.com и http://yahoo.com . Все браузеры, включая Internet Explorer, просто проверит наличие файла в корне (верхнем уровне) вашего веб-сайта под названием favicon.ico .

    Вот почему вы видите так много случаев, когда значок на самом деле называется favicon.ico. Если вы посмотрите на пример № 1 выше, вы можете подумать, что он полностью избыточен.Однако наличие тега ссылки дает преимущество. Если вы не укажете значок вверху страницы, он не будет отображаться на панели браузера, пока страница не загрузится.

    Лучший выбор

    Если вы настраиваете один значок для своего сайта, выбор прост.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *