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

все знают, как настроить 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, пункт nr.31 на графике водопада-мой питомец зам, он часто счастливее, и у него есть хорошая точка, позволяющая мне знать, что пришло время для некоторых творческих обновлений в интернете, хотя он и я не согласны с его нарядом, который я считаю немного глупым сегодня...

enter image description here

266
css favicon html javascript performance

15 ответов

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

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

.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>
...

сценарий.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

112

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

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

133

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

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

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

data URI favicons, похоже, работает в большинстве современных браузеров; у меня он работает в последних версиях 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.

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

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

85

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

<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" />
19

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

14

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

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

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>
11

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

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

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

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

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

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

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

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

8

Это действительно важно?

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

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

7

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

6

не совсем ответ на вопрос, а просто комплимент ответы Марсель и 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

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

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

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

  2. примите дополнительный HTTP-запрос и просто убедитесь, что ваш файл favicon имеет агрессивные заголовки HTTP-Cache-control.
    (если у вас есть другие веб - сайты под вашим контролем, вы можете даже иметь их украдкой предварительно загрузить favicon для этого сайта-наряду с другими статическими ресурсами.)

П. С. креативные решения, которые не будет работа:

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

вы можете использовать 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 favicon.ico -depth 8 -strip favicon.png

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

base64 favicon.png
3

вот самый простой способ:

<!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>

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

1

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

0

Итак, сегодня я, наконец, смог это сделать с помощью Nginx/HTTP2 Push и при использовании NodeJS за прокси, NodeJS не вносит свой вклад в push... Я 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";
0