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

307

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

введите описание изображения здесь

javascript  html  css  performance  favicon 
— Сэм
источник
47
Разве не глупо, что пока нет способа объединить .css / .js / .png / .html в один оптимизированный поток? Вы бы подумали, что кто-то уже придумал бы эту идею
— RichardTheKiwi
9
@Richard related: многочастные ответы и Google выступили с инициативой создания нового оптимизированного веб-протокола, который решает эту проблему, я забыл его имя ... Редактировать : он называется SPDY . Но это далеко в будущем, очевидно.
— Пекка
9
@Richard aka cyberkiwi, вы можете поместить все в html-файл со data:значениями для изображений и встроенными сценариями.
— zzzzBov
40
Кстати, хороший эскиз человек :)
— Fatih Acet
18
+1 за эскиз :)
— Giuliano

Ответы:

140

Незначительным улучшением ответа @ 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

— завивать волосы щипцами
источник
3
+1 красивый прорыв в кешировании @Marcel. PS Символы в HTTP Headers Responseмоем файле .ico имеют почти одинаковый размер с моей иконкой !! Как тебе это?
— Сэм
2
@Sam: Я заметил, что base64 PNG-эквивалента файла Stack Overflow favicon.ico был вдвое меньше. Красиво и компактно.
— Марсель
1
э-э-э, я не уверен, понимаю ли я, что вы имеете в виду: файл был в два раза меньше ...? PNG-файл, как icon.png? или вы имеете в виду эквивалент base64, который меньше, когда его png отформатирован вместо иконки или gif? Любопытно. Ура, приятель!
— Сэм
1
@Sam: Я сравнивал base64 этого PNG с base64 этого файла ICO . Версия PNG, как используется в моем примере кода выше, вдвое меньше.
— Марсель
1
ооо, я вижу, это делает ваш base 64 ответом, и общее использование формата base64 PNG предпочтительнее тогда?
— Сэм
151

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

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

— Джеймс Андерсон
источник
53
Это единственный разумный ответ. Это не проблема, которая не требует исправления.
— JoDG
1
Джеймс, мое решение действительно только возможно, но я бы никогда никому его не порекомендовал. Но, похоже, что большинство браузеров выдают новый HTTP-запрос для значка в начале нового сеанса браузера. И это не всегда возвращает 304.
— Yahel
4
Браузер все равно будет выполнять вызов HEAD, даже если он находится в кеше браузера, поэтому у вас все равно будут накладные расходы на HTTP-запрос.
— dietbuddha
3
На самом деле все зависит от браузера. Большинство из них всегда будут искать значок в некоторых местах, даже если страница не упоминает об этом, и при каждом обновлении делает запрос HEAD.
— Дэвид Коста
14
Фавикону нужен длинный истекающий заголовок, как и любой хороший статический ресурс. При этом даже вызовы HEAD подавляются.
— Пол Александр
102

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

— Yahel
источник
1
@Pekka Да, это не очень практичное решение, так как дополнительный байтовый вес URI данных на некэшированных страницах, вероятно, перевесит вес этого HTTP-запроса. Может быть, OP может асинхронно вводить значок в DOM.
— Яхель
4
@ Сэм, прости, я понимаю, что значит @yc, моя ошибка. Конечно, вы можете легко получить доступ к <link rel>элементу в браузере через JavaScript, это должно быть возможно. Я даже видел игру, запрограммированную таким образом ... однако в IE она тоже не работает и, вероятно, не помешает /favicon.icoзапросу поиска по умолчанию
— Pekka
2
@ Пекка, понятно. PS Это невероятная игра! Весь мой экран превращается в позор, так как все, что вам нужно, это 16x16 пикселей, хаха. Эта гиперссылка открывает некоторые возможности относительно того, что на самом деле возможно с этим значком.
— Сэм
3
В случае отсутствия объявления favicon все браузеры будут автоматически запрашивать URL-адрес по умолчанию /favicon.icoв слепой попытке найти его. Поэтому, если вы пропустите значок <link>(чтобы позже добавить его через Javascript), вы, вероятно, только ухудшите ситуацию.
— Мар Эрлигссон
2
Просто используйте favicon.ico, чтобы сохранить свой прозрачный GIF :)
— markijbema
21

Вы можете использовать favicon в кодировке 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" />
— Донгшенг Кай
источник
1
Подсказка: строка в кодировке base64, используемая в этом ответе, является файлом PNG и не будет работать с IE10 или более ранней версией.
— Сибл
2
На случай, если кто-то захочет узнать, что это Пингвин Линукс.
— Martlark
17

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

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

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

и HTML

<html>
    <head>
        <link id="icon" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        ...
    </head>
    <body>
        ...
    </body>
</html>
— Феликс Гинен
источник
8
Один человек с репутацией 74,947 сказал где-то на этой странице: «Вы не можете!» ... Тогда другой человек с репутацией менее 50 сказал: «Ты можешь!» Означает ли это, что стремление к решениям и конкретное инновационное стремление не имеют связей или отношений с завоеванной репутацией? ... Ну, тогда это просто потрясающе!
— Сэм
4
Я только что подтвердил, что это решение не работает - по крайней мере, в Chrome 10 и Firefox 3.6 для Windows
— Már Örlygsson
13
Я только что подтвердил, что это решение работает - по крайней мере, в Chrome 10.0.648 на 64-битной W7 и в FF 4.0 на 64-битной W7
— Сэм
4
LOL, я подтвердил, что два приведенных выше утверждения кажутся противоречивыми, несмотря на немного отличающиеся номера версий, я сомневаюсь, что поведение Chrome сильно изменилось. Firefox, возможно, сделал от 3,6 до 4, но вряд ли Chrome 10 так сильно изменился при незначительном обновлении.
— Дяста
Я могу подтвердить, что это работает на Chrome 83 и Firefox ESR 68 на Ubuntu 20.04, и я могу подтвердить, что это не помогает предотвратить попадание в /favicon.ico. Таким образом, вы получаете изображение, но вы не препятствуете дополнительному соединению SSL. Так как это было целью, это провал.
— Уил
14

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

— Пекка
источник
1
Возможно, я слепой, но единственное место, где я вижу значок поиска Google, - это спрайт: google.com/search?q=foo
— Yahel
4
@yc google.com/favicon.ico - это место, где браузеры автоматически его ищут
— Pekka
3
@ yc, ты не слепой, ты доказал, что заслуживаешь очень креативного ответа ... как уже указывал Пекка, /favicon.icoименно там браузеры будут выглядеть автоматически. Теперь пришло действительно плохое известие: если иконка не существует, это означает штраф за ошибку 404, что также приведет к небольшой задержке !! Кажется, нет выхода из этого подземелья. Они такие крошечные, но о, такие могущественные ... черт побери :)
— Сэм
См. Мой ответ stackoverflow.com/questions/5199902/… чтобы узнать, как правильно ускорить правильный путь.
— Мэтт Джойнер
8
Следует отметить, что это должно быть, по сути, разовым запросом, почти навсегда. Как и во всем остальном, длинные таймеры кеша и правильные 301, возвращаемые сервером, сделают запрос favicon спорным (если он не существует - yikes!).
— Кевин Пено
9

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

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

Принятое решение ужасно, так как до тех пор, пока 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 (содрогание).

— Мэтт Джойнер
источник
7
Конвейерная оптимизация выполняется на транспортном уровне. Это все еще включает в себя отдельную обратную передачу HTTP для favicon, о которой вопрос задает.
— Мар Орлигссон
@ Már Örlygsson, это не правильно. В оба конца означает, что клиент должен сделать запрос, а затем дождаться его обработки и загрузки ответа. Конвейерная передача означает, что запрос уже будет отправлен, пока он еще ожидает завершения предыдущего запроса, поэтому при выполнении тех же шагов задержка не будет такой же ...
— Peter
1
Сэм не может включить конвейерную обработку во всех браузерах своих посетителей, поэтому в этом смысле это решение не заставит его сайт загружаться быстрее - кроме него лично.
— Мар Эрлигссон,
3
@ Már Örlygsson и его авторы: Это не сделано в слое транспорта. В реальных моделях все это делается на прикладном уровне. Теоретически конвейеризация должна быть на уровне сеанса.
— Мэтт Джойнер
4
Я не буду спорить с вами об этой семантике. Тем не менее, факт остается фактом: Сэм не может «использовать конвейерную обработку» (как она есть), чтобы ускорить загрузку своего сайта для своих посетителей, так как поддержка конвейеров - это А) неаккуратная, как вы указываете на себя, и Б) согласие каждого индивидуальный пользователь.
— Мар Эрлигссон,
6

На самом деле это не ответ на вопрос, а просто комплимент для ответов, данных Марселем и Яхельком. Я предлагаю элегантное решение проблемы 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/

— Энтони Хатзопулос
источник
Да, но когда делается запрос и часто используется значимый значок, я считаю, что стоит предоставить значок, а не пустой ответ. Сжатие иконки через gzip часто все равно приводит к одному размеру пакета TCP
— Энди Дэвис,
5

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

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

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

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

PS Креативные решения, которые не будут работать :

  • Странный трюк CSS data-uri (связанный с комментатором Felix Geenen) не работает .
  • Использование Javascript для выполнения отложенного внедрения <link>элемента favicon (как предложено пользователем @yc), скорее всего, только усугубит ситуацию, что приведет к двум HTTP-запросам.
— Мар Эрлигссон
источник
1
другие решения, которые не будут работать: несколько значков в .ico и использование ico в теге изображения в надежде, что там будет отображаться другое изображение, кроме как favicon. Собираем фавикон вместе с другим файлом.
— markijbema
5

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

— cusimar9
источник
13
Google великолепен, но такое мышление кажется контрпродуктивным и удушающим. Всегда есть новые, лучшие и очень возможные способы ведения дел, и вам не нужно работать, чтобы лидер отрасли придумывал их.
— Синтаксическая ошибка
10
Очевидно, Google получает свои идеи от SO, а не наоборот;)
— user123444555621
3
Хороший ответ, если бы Google мог сделать свою страницу быстрее, они бы.
— Дэвид д'Э Фрейтас
3

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

Атрибут «type» может быть «image / png» или «image / x-icon», оба работают для меня.

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

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

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

base64 favicon.png
— андрей
источник
3

Решение Killer в 2020 году

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

Это больше не так.

Смотрите: https://caniuse.com/#feat=link-icon-svg.

1) Выберите SVG в качестве формата Favicon

Прямо сейчас, в июне 2020 года, эти браузеры могут обрабатывать SVG Favicons :

  • Хром
  • Fire Fox
  • край
  • опера
  • Chrome для Android
  • Браузер KaiOS

Обратите внимание, что эти браузеры по-прежнему не могут:

  • Сафари
  • iOS Safari
  • Firefox для Android

Учитывая вышесказанное, мы можем уверенно использовать SVG Favicon .

2) Представьте SVG как URI данных

Основная цель здесь - избежать HTTP-запросов.

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

SVG (особенно маленькие SVG) идеально подходят для Data URI, потому что последний является просто открытым текстом (с процентным кодированием любых потенциально неоднозначных символов), а первый, будучи XML, может быть записан в виде длинной строки открытого текста (с незначительным разбросом) процентных кодов) невероятно просто.

3) Весь SVG - эмодзи

В декабре 2019 года Леандро Линарес одним из первых осознал, что с тех пор, как Chrome присоединился к Firefox в поддержке SVG Favicons, стоило поэкспериментировать, чтобы узнать, можно ли создать иконку из эмодзи:

https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/

Предчувствие Линареса было правильным.

Несколько месяцев спустя (март 2020 года) Code Pirate Lea Verou осознала то же самое:

https://twitter.com/leaverou/status/1241619866475474946

И значки никогда не были прежними.

4) Реализация решения самостоятельно:

Вот простой SVG:

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 16 16">

  <text x="0" y="14">🦄</text>
</svg>

И вот тот же SVG, что и URI данных :

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E

И, наконец, вот этот Data URI как Favicon:

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

5) Еще хитрости

Поскольку Favicon является SVG, к нему можно применить любое количество эффектов фильтра (как SVG, так и CSS).

Например, наряду с Фавиконом Белого Единорога выше, мы можем легко сделать Фавикон Черного Единорога , применив фильтр:

style="filter: invert(100%);"

Черный Единорог Фавикон:

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
— Rounin
источник
2

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

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

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

— rjobidon
источник
1
Значок яблока?
— Styfle
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.