несколько размеров favicon, как, где и когда их использовать?

я читал статью(ы):

создать favicon для вашего сайта и почему так много файлов?.

согласно им, Если вам нужно использовать favicon для различных целей вам нужно будет создать разные для каждой цели (для плиток в WIN8, для быстрого набора в Opera & Chrome).

хорошо, все в порядке, я все еще использую 16X16 .ico файл, который, я думаю, подходит для целей оптимизации.

но теперь после прочтения этих статей у меня есть различные вопросы, такие как (предположим, что я создал различные значки для различных целей с помощью photoshop):

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

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

- какие строки (html)код должен быть добавлен, где в html(файл) для указанной цели?

В настоящее время для значка 16X16 я использую:

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

- загрузив все значки на index.html страница, может ли браузер кэшировать их все для всех подстраниц?(Разместив все значки в корневом каталоге сайта?)

- но опять же это повлияет на производительность сайта, увеличив время загрузки index сама страница.

Итак, в любом случае, чтобы обнаружить, для которых назначение фавикон необходим, а затем служить ему динамически (используя JavaScript например), не теряя скорости загрузки страницы? Также как favicon на chromes интернет-магазин?(то есть, какие строки (html)кодекса).

надеюсь, эксперты здесь помогут мне. Спасибо заранее.

PS:

я уже читал:

  1. как иметь несколько размеров favicon, но служить только 16x16 по умолчанию? ,

  2. значок изображения рядом с URL-адресом сайта ,

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

  4. предпочтительный способ использования фавиконок? и

  5. как я могу добавить изображение в адресной строке браузера, когда моя страница просматривается? .

6
favicon html javascript

1 ответов

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

я использую следующий код в тег <head> мой сайт: 

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- IE 10+ "Metro" Tiles - 144x144 pixels in size icon should be transparent -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

<!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 96x96 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

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

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

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

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

для меня я сжимаю изображение как можно больше. Я использую PNG-файлы (за исключением IE 9 и ниже, который является файлом ICO), и я использую TinyPNG сжать их, и это работает очень хорошо. Мои иконки в среднем 3-6 килобайт в размере (он варьируется в зависимости от значка). Хотя это больше, чем файл ICO 16x16, я считаю, что он обеспечивает лучший опыт на всех устройствах.

- какие строки (html)кода должны быть добавлено где в html (файл) для указанной цели?

см. выше код.

- путем загрузки всех значков по индексу.html-страница, может ли браузер кэшировать их все для всех подстраниц?(Разместив все значки в корневом каталоге сайта?)

корень сайта работает для файлов ICO с именем favicon.ico но не для PNG или других типов файлов. Я не уверен, будет ли он кэшировать файл для всех страниц на сайте, если код находится только на

7