Разве не глупо, что крошечному фавикону требуется еще один HTTP-запрос? Как заставить favicon перейти в спрайт? - PullRequest
Новая
       53

Разве не глупо, что крошечному фавикону требуется еще один HTTP-запрос? Как заставить favicon перейти в спрайт?

285 голосов
/ 05 марта 2011

Все знают, как настроить ссылку favicon.ico в HTML: 

<link rel="shortcut icon" href="http://hi.org/icon.ico"  type="image/x-icon" />

Но я думаю, что просто глупо, что для крошечного многобайтового значка вам нужно еще один HTTP-запрос . Поэтому мне было интересно, как я могу сделать это изображение частью спрайта (например, background-position = 0px -200px;), чтобы ускорить и сохранить этот ценный HTTP-запрос: как я могу справиться с этим и получить его в оставшуюся часть моего существующий спрайт с моим логотипом и другими моими работами?

Робот, указывающий на favicon.ico, элемент № 31 на графике водопада, - мой питомец ZAM, он часто счастливее, и у него есть хороший момент, позволяющий мне узнать время для некоторых креативных обновлений в Интернете, хотя он и я не согласны с его нарядом, который я считаю сегодня немного глупым ...

enter image description here

Ответы [ 14 ]

136 голосов
/ 18 марта 2011

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

Это на самом деле более эффективно, чем любое из предложенных «решений».

127 голосов
/ 06 апреля 2011

Незначительным улучшением ответа @ yc является добавление значка в кодировке base64 из файла JavaScript, который в любом случае обычно используется и кэшируется, а также подавление стандартного поведения браузера при запросе favicon.ico путем подачи это URI данных в соответствующем теге meta.

Этот метод позволяет избежать лишнего http-запроса и подтверждается, что он работает в последних версиях Chrome, Firefox и Opera в Windows 7. Однако не , по-видимому, работает в Internet Explorer 9, по крайней мере.

index.html 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

script.js 

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];       
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JS would normally be in here too. */

Демонстрация: turi.co / up / favicon.html

93 голосов
/ 05 марта 2011

Вы можете попробовать URI данных. Нет HTTP-запроса! 

<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">

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

Значения URI данных, похоже, работают в большинстве современных браузеров; У меня это работает в последних версиях Chrome, Firefox и Safari на Mac. Кажется, не работает в Internet Explorer и, возможно, в некоторых версиях Opera.

Если вы беспокоитесь о старом IE (а вам, вероятно, не следует в наши дни), вы можете включить условный комментарий IE, который будет загружать реальный favicon.ico традиционным способом, поскольку кажется, что более старый Internet Explorer не поддерживает данные URI Favicons 

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. Включите файл favicon.ico в корневой каталог, чтобы охватить браузеры, которые будут запрашивать его в любом случае, поскольку для этих браузеров, если они уже проверяют, что бы вы ни делали, вы могли бы также не тратить HTTP-запрос на ответ 404.

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

Как отметили комментаторы, то, что вы можете сделать это, не означает, что вы должны это делать, поскольку некоторые браузеры будут запрашивать favicon.ico независимо от разработанных нами приемов. Таким образом, объем накладных расходов, который вы сэкономите, будет ничтожен по сравнению с экономией, которую вы получите от таких вещей, как gzipping, использование заголовков с истекшим сроком для статического содержимого, минимизация файлов JavaScript, помещение фоновых изображений в спрайты или URI данных. , предоставление статических файлов с CDN и т. д.

20 голосов
/ 15 апреля 2011

Вы можете использовать значок в кодировке base64, например: 

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
14 голосов
/ 05 марта 2011

Хорошая мысль и хорошая идея, но невозможно. Фавикон должен быть отдельным отдельным ресурсом. Нет возможности объединить его с другим файлом изображения.

12 голосов
/ 14 марта 2011

Я нашел интересное решение на этой странице .Это на немецком языке, но вы сможете понять код.

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

link#icon {
  background-image:url("data:image/x-icon;base64,<Daten>");
}

и html 

<html>
    <head>
      ...
      <link id="icon" rel="shortcut icon" type="image/x-icon" />
      <link rel="stylesheet" type="text/css" href="/style.css" />
      <!--[if lt IE 8]>
      <style type="text/css">
        link#icon { background-image:url("/favicon.ico"); }
      </style>
      <![endif]-->
      ...
    </head>
    <body>
      ...
    </body>
  </html>
9 голосов
/ 17 сентября 2012

Это действительно имеет значение?

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

Принятое решение ужасно, так как до тех пор, пока JS не будет извлечен и выполнен, все элементы DOM, представленные ниже, будут заблокированы от рендеринга, и это не уменьшит количество запросов!

7 голосов
/ 17 марта 2011

Правильное решение - использовать HTTP-конвейер .

HTTP-конвейеризация - это метод, при котором несколько HTTP-запросов записываются в один сокет, не ожидая соответствующих ответов. Конвейерная поддержка поддерживается только в HTTP / 1.1, а не в 1.0.

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

HTTP-конвейеризация требует, чтобы клиент и сервер поддерживали его. Для поддержки конвейеризации требуются серверы, соответствующие HTTP / 1.1. Это не означает, что серверы должны передавать ответы, но они не должны давать сбой, если клиент выбирает конвейерные запросы.

Многие клиенты браузера не делают этого, когда должны.

HTTP-конвейеризация отключена в большинстве браузеров.

  • В Opera включена конвейерная обработка по умолчанию. Он использует эвристику для управления уровнем конвейерной обработки, применяемой в зависимости от подключенного сервера.
  • Internet Explorer 8 не выполняет конвейеризацию запросов из-за проблем, связанных с ошибочными прокси-серверами и блокировкой заголовка.
  • Браузеры Mozilla (такие как Mozilla Firefox, SeaMonkey и Camino) поддерживают конвейерную обработку, однако по умолчанию она отключена. Он использует некоторую эвристику, особенно для отключения конвейерной передачи для серверов IIS.
  • Konqueror 2.0 поддерживает конвейеризацию, но по умолчанию он отключен. [Цитата нужна]
  • Google Chrome не поддерживает конвейерную обработку.

Я бы порекомендовал вам попробовать включить конвейеризацию в Firefox и попробовать его там, или просто использовать Opera (содрогание).

6 голосов
/ 26 июля 2012

Не совсем ответ на вопрос, а просто комплимент ответов, данных Марселем и yahelc Я предлагаю элегантное решение проблемы 404 favicon.

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

Примеры Apache:

Первый вариант Apache (и мой любимый), простой вкладыш в ваш .htacces или .conf: 

Redirect 204 /favicon.ico

Второй вариант Apache: 

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

Для дальнейшего чтения есть хорошая запись в блоге Стояна Стефанова на http://www.phpied.com/204-no-content/

6 голосов
/ 05 марта 2011

Это отличная идея, но если Google не сделал этого на своей домашней странице, держу пари, что это невозможно (в настоящее время) сделать

Страница:
...