Все знают, как настроить ссылку 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. Он обычно счастливее, и у него есть хорошая мысль сообщить мне, что пришло время для некоторых творческих обновлений в Интернете, хотя он и я не согласны с его одеждой, которая я считаю сегодня немного глупой ...
data:
значениями для изображений и встроенными сценариями.Ответы:
Незначительным улучшением ответа @ yc является добавление значка в кодировке base64 из файла JavaScript, который в любом случае обычно используется и кэшируется, а также подавление стандартного поведения браузера в запросе
favicon.ico
путем подачи ему URI данных в соответствующемmeta
теге.Этот метод позволяет избежать лишнего http-запроса и подтверждается, что он работает в последних версиях Chrome, Firefox и Opera в Windows 7. Однако он не работает в Internet Explorer 9, по крайней мере.
index.html
script.js
Демо: turi.co/up/favicon.html
источник
HTTP Headers Response
моем файле .ico имеют почти одинаковый размер с моей иконкой !! Как тебе это?Я думаю, что по большей части это не приводит к другому HTTP-запросу, поскольку они обычно сбрасываются в кеш браузера после первого доступа.
Это на самом деле более эффективно, чем любое из предложенных «решений».
источник
Вы можете попробовать URI данных. Нет HTTP-запроса!
Если на ваших страницах нет статического кэширования, ваш значок не сможет быть кэширован, и в зависимости от размера вашего изображения значка ваш исходный код может в результате раздуться.
Значки URI данных, похоже, работают в большинстве современных браузеров; У меня это работает в последних версиях Chrome, Firefox и Safari на Mac. Кажется, не работает в Internet Explorer и, возможно, в некоторых версиях Opera.
Если вы беспокоитесь о старом IE (а вам, вероятно, не следует в наши дни), вы можете включить условный комментарий IE, который будет загружать реальный favicon.ico традиционным способом, поскольку кажется, что более старый Internet Explorer этого не делает Поддержка данных URI Favicons
Вы также можете просто использовать значок другого популярного сайта, который, вероятно, будет кэшировать их значок, например
http://google.com/favicon.ico
, так, чтобы он обслуживался из кэша.Как отметили комментаторы, то, что вы можете сделать это, вовсе не означает, что вы должны это делать, поскольку некоторые браузеры запрашивают favicon.ico независимо от разработанных нами приемов. Таким образом, объем накладных расходов, который вы сэкономите, будет ничтожен по сравнению с экономией, которую вы получите от таких вещей, как gzipping, использование заголовков с истекшим сроком для статического содержимого, минимизация файлов JavaScript, помещение фоновых изображений в спрайты или URI данных. , предоставление статических файлов с CDN и т. д.
источник
<link rel>
элементу в браузере через JavaScript, это должно быть возможно. Я даже видел игру, запрограммированную таким образом ... однако в IE она тоже не работает и, вероятно, не помешает/favicon.ico
запросу поиска по умолчанию/favicon.ico
в слепой попытке найти его. Поэтому, если вы пропустите значок<link>
(чтобы позже добавить его через Javascript), вы, вероятно, только ухудшите ситуацию.Вы можете использовать favicon в кодировке base64, например:
источник
Я нашел интересное решение на этой странице . Это немецкий, но вы сможете понять код.
Вы помещаете данные значка base64 во внешнюю таблицу стилей, чтобы она была кэширована. В заголовке вашего веб-сайта вы должны определить значок с идентификатором, а значок в качестве
background-image
таблицы стилей для этого идентификатора устанавливается как .и HTML
источник
Хорошая мысль и хорошая идея, но невозможно. Фавикон должен быть отдельным отдельным ресурсом. Нет способа объединить его с другим файлом изображения.
источник
/favicon.ico
именно там браузеры будут выглядеть автоматически. Теперь пришло действительно плохое известие: если иконка не существует, это означает штраф за ошибку 404, что также приведет к небольшой задержке !! Кажется, нет выхода из этого подземелья. Они такие крошечные, но о, такие могущественные ... черт побери :)Это действительно имеет значение?
Многие браузеры загружают значок в качестве низкого приоритета, чтобы он не блокировал загрузку страницы в любом случае, так что да, это дополнительный запрос, но он не находится на каком-либо критическом пути.
Принятое решение ужасно, так как до тех пор, пока JS не будет извлечен и выполнен, все элементы DOM, представленные ниже, будут заблокированы от рендеринга, и это не уменьшит количество запросов!
источник
Правильным решением является использование HTTP конвейерной передачи .
Требуется, чтобы серверы поддерживали его, но не обязательно разделяли.
Многие клиенты браузера не делают этого, когда они должны.
Я бы порекомендовал вам попробовать включить конвейеризацию в Firefox и попробовать это там, или просто использовать Opera (содрогание).
источник
На самом деле это не ответ на вопрос, а просто комплимент для ответов, данных Марселем и Яхельком. Я предлагаю элегантное решение проблемы 404 favicon.
Поскольку некоторые приложения и браузеры и тому подобное проверяют наличие favicon.com, а если значок не найден в корне сайта, вы можете просто ответить на запрос заголовком ответа 204 .
Примеры Apache:
Первый вариант Apache (и мой любимый), простой вкладыш в ваш .htacces или .conf:
Второй вариант Apache:
Для дальнейшего чтения есть хорошая запись в блоге Стояна Стефанова на http://www.phpied.com/204-no-content/
источник
Извините, но вы не можете объединить значок с другим ресурсом.
Это означает, что у вас есть два основных варианта:
Если вас устраивает, что на вашем сайте нет
href
значка избранного, вы можете просто указать на уже загружаемый ресурс, не являющийся значком (например, таблицу стилей, файл сценария или даже какой-либо ресурс, который извлекает пользу из предварительной выборки). .(Мое краткое тестирование показывает, что это работает в большинстве, если не во всех основных браузерах.)
Примите дополнительный HTTP-запрос и просто убедитесь, что в вашем файле favicon установлены агрессивные заголовки HTTP-контроля кэша.
(Если у вас есть другие веб-сайты под вашим контролем, они могут даже незаметно предварительно загрузить фавикон для этого веб-сайта вместе с другими статическими ресурсами.)
PS Креативные решения, которые не будут работать :
<link>
элемента favicon (как предложено пользователем @yc), скорее всего, только усугубит ситуацию, что приведет к двум HTTP-запросам.источник
Это отличная идея, но если Google не сделал этого на своей домашней странице, держу пари, что это (в настоящее время) невозможно.
источник
Вы можете использовать 8-битный PNG вместо формата ICO для еще меньшего объема данных. Единственное, что вам нужно изменить, это использовать «data: image / png» вместо «data: image / x-icon» заголовок MIME-типа:
Атрибут «type» может быть «image / png» или «image / x-icon», оба работают для меня.
Вы можете конвертировать ICO в 8-битный png используя gimp или конвертировать:
и закодировать двоичный файл PNG в строку base64 с помощью команды base64:
источник
Решение Killer в 2020 году
Это решение обязательно приходит через девять лет после того, как вопрос был первоначально задан, потому что до недавнего времени большинство браузеров не могли обрабатывать значки в
.svg
формате.Это больше не так.
Смотрите: https://caniuse.com/#feat=link-icon-svg.
1) Выберите SVG в качестве формата Favicon
Прямо сейчас, в июне 2020 года, эти браузеры могут обрабатывать SVG Favicons :
Обратите внимание, что эти браузеры по-прежнему не могут:
Учитывая вышесказанное, мы можем уверенно использовать 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, что и URI данных :
И, наконец, вот этот Data URI как Favicon:
5) Еще хитрости
Поскольку Favicon является SVG, к нему можно применить любое количество эффектов фильтра (как SVG, так и CSS).
Например, наряду с Фавиконом Белого Единорога выше, мы можем легко сделать Фавикон Черного Единорога , применив фильтр:
Черный Единорог Фавикон:
источник
Вот самый простой способ:
Какой значок он представляет? Ответ и ответ ниже!
источник