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

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

<link rel="shortcut icon" href="#" onclick="location.href='http://hi.org/icon.ico'; return false;" type="image/x-icon">

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

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

Ответ 1

Небольшое улучшение @yc answer - это вставка кодировки 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

Ответ 2

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

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

Ответ 3

Вы можете попробовать 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]--> '

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

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

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

Ответ 4

Вы можете использовать кодировку 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" />

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

Правильное решение - использовать конвейерную обработку 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 (содрогнуться).

Ответ 9

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

Ответ 10

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

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

Примеры Apache:

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

Redirect 204 /favicon.ico

Вариант Apache два:

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

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

Ответ 11

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

Это означает, что у вас есть в основном два варианта:

Если вам нравится сайт с отсутствующим значком, вы можете просто указать href на ресурс без значков, который уже загружен (например, таблица стилей, script или даже некоторый ресурс, который выигрывает от предварительной загрузки.)
(Мое краткое тестирование показывает, что это работает в большинстве, если не во всех основных браузерах.)
Примите дополнительный HTTP-запрос и просто убедитесь, что ваш файл favicon имеет агрессивные заголовки управления кешем HTTP. (Если у вас есть другие веб-сайты под вашим контролем, возможно, вы даже попробуете их предварительно загрузить значок для этого сайта - вместе с другими статическими ресурсами.)

P.S. Творческие решения, которые не будут работать:

Неприятный трюк данных CSS-данных (связанный комментатором Феликс Джинен) не работает.
Использование Javascript для выполнения замедленной инъекции элемента favicon <link> (как предложено пользователем @yc), скорее всего, приведет к ухудшению ситуации - результатом станет два HTTP-запроса.

Ответ 12

Вы можете использовать 8-битный PNG вместо ICO-формата для еще меньшего объема данных. Единственное, что вам нужно изменить, это использовать "data: image/png" вместо "data: image/x-icon" Заголовок MIME-типа:

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

"Тип" может быть "image/png" или "image/x-icon", оба работают для меня.

Вы можете конвертировать ICO в 8-битный png с помощью gimp или convert:

convert favicon.ico -depth 8 -strip favicon.png

и закодировать PNG двоичную строку base64 с помощью команды base64:

base64 favicon.png

Ответ 13

Здесь самый простой способ:

<!DOCTYPE html><html><head> 
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>

Какой значок он представляет? Ответьте и повысьте ниже!

Ответ 14

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

Ответ 15

Итак, сегодня я наконец-то смог это сделать с помощью NGINX/HTTP2 Push, и, используя NodeJS за прокси-сервером, NodeJS не способствует продвижению... Я BAAADDDDD MANNNNN!

[Nginx.conf]

    location / {
        http2_push_preload              on;
        add_header                      Link "<//static.indospace.io/favicon.ico>; as=image; rel=preload";
        add_header                      Link "<//static.indospace.io/css/minified.css>; as=style; rel=preload";
        add_header                      Link "<//static.indospace.io/js/minified.js>; as=script; rel=preload";
        add_header                      Link "<//static.indospace.io/images/register.svg>; as=image; rel=preload";
        add_header                      Link "<//static.indospace.io/images/purchase_litecoin.svg>; as=image; rel=preload";