Хіба не глупо, що крихітному фавікону потрібен ще один HTTP-запит? Як я можу покласти фавікон у спрайт?

306

Всі знають, як налаштувати посилання 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 пов’язано: відповіді багатосторонніх та Google мають ініціативу щодо нового, оптимізованого веб-протоколу, який вирішує це, я забув його ім’я ... Редагувати : Він називається SPDY . Але це очевидно в майбутньому, очевидно.
— Pekka
9
@Richard aka cyberkiwi, ви можете помістити все у файл html зі data:значеннями для зображень та сценаріїв вбудованими.
— zzzzBov
39
btw, приємний ескіз чоловік :)
— Fatih Acet
18
+1 за ескізом :)
— Джуліано

Відповіді:

140

Невелике покращення до @ yc є введення кодованого базовим 64 файлу з файлу 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 файлу Stacks Overflow favicon.ico розміром половини розміру. Приємно і компактно.
— Марсель
1
eeehm, я не впевнений, що я розумію, що ви маєте на увазі: 'файл був удвічі меншим за ...? PNG-файл, як icon.png? чи ти маєш на увазі еквівалент base64 менший, коли його png форматується замість форматованого значка чи gif? цікавий. Будьмо, друже!
— Сем
1
@Sam: я порівнював base64 цього PNG з base64 цього файлу ICO . Версія PNG, як використаний у моєму прикладі вище, розмір половини.
— Марсель
1
ooh Я бачу, що це робить вашу базу 64 відповіді, а загальне використання формату PNG формату base64 кращим вибором, а не так?
— Сем
148

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

Це насправді більш ефективно, ніж будь-яке із запропонованих «рішень».

— Джеймс Андерсон
джерело
52
Це єдина розумна відповідь. Це не проблема, яка не потребує виправлення.
— JoDG
1
Джеймсе, моє рішення насправді є лише можливістю, але такою, яку я ніколи би нікому не рекомендував. Але, схоже, більшість браузерів видасть новий HTTP-запит для фавікону на початку нового сеансу браузера. І це не завжди повертає 304.
— Яхель
4
Веб-переглядач все ще здійснюватиме виклик HEAD, навіть якщо він знаходиться в кеш-пам'яті браузера, тому ви все одно матимете накладні витрати HTTP-запиту.
— дієтабудда
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 не робить підтримка Favicons Data URI

`<!--[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 тощо.

— Яхель
джерело
1
@Pekka Так, це насправді не практичне рішення, оскільки додаткова вага байту URI даних на некешованих сторінках, ймовірно, перевершить вагу цього HTTP-запиту. Можливо, ОП може ввести фавікон у DOM асинхронно.
— Яхель
4
@Sam Вибачте, я розумію, що означає @yc, моя помилка. Звичайно, ви можете ідеально отримати доступ до <link rel>елемента в браузері через JavaScript, що повинно бути можливим. Я навіть бачив гру, запрограмовану таким чином ... однак, схоже, це не працює і в IE, і це, мабуть, не завадить /favicon.icoзапиту пошуку за замовчуванням
— Pekka
2
@Pekka, бачу. PS це неприступна гра! Вражає весь мій екран на сором, оскільки все, що вам потрібно, це 16х16 пікселів. Це гіперпосилання відкриває деякі можливості щодо того, що насправді можливо з цим фавіконом.
— Сам
3
У разі відсутності декларації про фавікон, усі браузери автоматично запитують URL-адресу за замовчуванням /favicon.icoу сліпій спробі їх розміщення. Тож якщо ви залишите фавікон <link>(щоб пізніше додати його через Javascript), ви, ймовірно, погіршите все.
— Már Örlygsson
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" />
— Dongsheng Cai
джерело
1
Підказка: рядок, закодований base64, використаний у цій відповіді, є файлом PNG і не працюватиме з IE10 або старішою версією.
— сіббл
2
У випадку, якщо хтось хоче знати, це пінгвін Linux.
— Martlark
16

Я знайшов цікаве рішення на цій сторінці . Це німецька мова, але ви зможете зрозуміти код.

Ви поміщаєте базисні дані значка у зовнішній таблицю стилів, тому він буде кешований. У голові вашого веб-сайту потрібно визначити фавікон з ідентифікатором, а фавікон встановлений як 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 на W7 64 біт і в FF 4.0 на W7 64bit
— Sam
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 запитувати точку спору (якщо тільки його не існує - поступається!).
— Кевін Пено
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 для фавікону, саме про це і задається питання.
— Már Örlygsson
@ Már Örlygsson це неправильно. Повернення в обидва кінці означає, що клієнт повинен зробити запит, а потім чекати, коли запит буде оброблений, і відповідь буде завантажена. Трубопровід означає, що запит вже буде надісланий, поки ще чекаєте завершення попереднього запиту, тому, поки відбуваються ті самі кроки, затримка, яку він спричинить, буде не однаковою ...
— Петро,
1
Сем не може ввімкнути конвеєр у всіх браузерах своїх відвідувачів, тому в цьому сенсі це рішення не дозволить швидше завантажувати його сайт - окрім нього особисто.
— Már Örlygsson
3
@ Már Örlygsson та його учасники: Це не робиться в шарі транспорту. У реальних моделях все це робиться в додатковому шарі. Теоретично трубопровід повинен бути на сесійному шарі.
— Метт Столяр
4
Я не буду сперечатися з вами цією семантикою. Справа в тому, що Сем не може «використовувати конвеєрний конвеєр» (охайний, як це є), щоб зробити його сайт швидшим завантаженням для відвідувачів, оскільки підтримка філіппін - це A) плямистість, як ви самі вказуєте, і B) підбір кожного індивідуальний користувач.
— Már Örlygsson
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

Це відмінна ідея, але якщо Google цього не зробив на своїй домашній сторінці, я думаю, що цього зробити (наразі) не можна

— кузимар9
джерело
13
Google чудовий, але таке мислення здається контрпродуктивним та задушливим. Завжди є нові, кращі та дуже можливі способи вчинити справи, і вам не потрібно працювати над лідером галузі, щоб придумати їх.
— Помилка синтаксису
8
Очевидно, Google отримує свої ідеї від SO, а не навпаки;)
— user123444555621
3
Хороша відповідь, якби Google міг зробити свою сторінку швидшою, вони би.
— David d C e Freitas
4

Вибачте, але ви не можете поєднати фавікон з іншим ресурсом.

Це означає, що у вас є два варіанти:

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

  2. Прийміть додатковий запит HTTP і просто переконайтесь, що у вашому файлі favicon встановлені агресивні заголовки кеш-HTTP-керування.
    (Якщо у вас є інші веб-сайти, що знаходяться під вашим контролем, ви, можливо, навіть підхопити їх заздалегідь передзавантажити фавікон для цього веб-сайту - разом з іншими статичними ресурсами.)

PS Творчі рішення, які не працюватимуть :

  • Дивний фокус CSR-даних урі (пов'язаний з коментатором Фелікс Генен) не працює .
  • Використання Javascript для виконання уповільненого введення <link>елемента favicon (як це запропонував користувач @yc), швидше за все, погіршить ситуацію - в результаті виникне два HTTP-запити.
— Már Örlygsson
джерело
1
інші рішення, які не працюватимуть: кілька значків у форматі .ico та використання ico в тезі зображень з надією, що він відобразить іншу картинку там, а не як favicon. Збираємо разом фавікон з іншим файлом.
— markijbema
3

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

<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 двійковій до string64 string, використовуючи команду base64:

base64 favicon.png
— andrej
джерело
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
Ікона яблука?
— стифл
2

Рішення вбивці в 2020 році

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

Це вже не так.

Дивіться: https://caniuse.com/#feat=link-icon-svg

1) Виберіть SVG як формат Favicon

Зараз у червні 2020 року ці браузери можуть працювати з SVG Favicons :

  • Хром
  • Firefox
  • Край
  • Опера
  • Chrome для Android
  • Браузер KaiOS

Зауважте, що ці браузери все ще не можуть:

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

Маючи на увазі вищесказане, ми можемо впевнено використовувати SVG Favicon .

2) Представити SVG як URI даних

Основна мета тут - уникнути HTTP-запитів.

Як зазначалося в інших рішеннях, досить розумний спосіб зробити це - використовувати URI даних, а не HTTP-URL .

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

3) Весь SVG - Emoji

У грудні 2019 року Леандро Лінарес одним із перших зрозумів, що оскільки Chrome приєднався до Firefox у підтримці SVG Favicons, варто було експериментувати, щоб дізнатись, чи може фавікон можна створити з емоджи:

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

Думка Лінареса була правильною.

Через кілька місяців (березень 2020 р.) Пірат Кодексу Ле Веру зрозумів те саме:

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

І, нарешті, ось ось цей URI даних як фавікон:

<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" />
— Рунін
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.