Czy to nie głupie, że mały favicon wymaga jeszcze jednego żądania HTTP? Jak mogę umieścić favicon w ikonce?

306

Wszyscy wiedzą, jak skonfigurować link favicon.ico w HTML:

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

Ale myślę, że to głupie, że dla małej kilku bajtowej ikony potrzebujesz jeszcze jednego żądania HTTP . Zastanawiałem się więc, jak mogę uczynić ten obraz częścią duszka (np. background-position=0px -200px;), Aby przyspieszyć i zapisać to cenne żądanie HTTP. Jak mogę zamienić to w istniejący obraz duszka z moim logo i innymi dziełami sztuki?

Robot wskazujący na favicon.iconumer 31 na wykresie wodospadu jest moim zwierzakiem ZAM. Zazwyczaj jest szczęśliwszy i ma rację, mówiąc mi, że nadszedł czas na kilka kreatywnych ulepszeń w Internecie, chociaż on i ja nie zgadzamy się co do jego stroju, który wydaje mi się dziś trochę głupi ...

wprowadź opis zdjęcia tutaj

javascript html css performance favicon Sam
źródło
47
Czy to nie głupie, że nie ma jeszcze sposobu na połączenie .css / .js / .png / .html w jeden zoptymalizowany strumień? Można by pomyśleć, że ktoś wpadłby na ten pomysł
RichardTheKiwi
9
@Richard powiązane: Odpowiedzi Multipart i Google mają inicjatywę dotyczącą nowego, zoptymalizowanego protokołu internetowego, który to rozwiązuje, zapomniałem jego nazwy ... Edytuj : Nazywa się SPDY . Ale oczywiście jest to daleko w przyszłości.
Pekka
9
@Richard aka cyberkiwi, możesz umieścić wszystko w pliku HTML z data:wartościami obrazów i skryptów.
zzzzBov,
39
btw, fajny szkicownik :)
Fatih Acet
18
+1 za szkic :)
Giuliano

Odpowiedzi:

140

Niewielkim ulepszeniem odpowiedzi @ yc jest wstrzykiwanie favikonu zakodowanego w base64 z pliku JavaScript, który i tak normalnie byłby używany i buforowany, a także tłumienie standardowego zachowania przeglądarki polegającego na wysyłaniu favicon.icodo niego identyfikatora URI danych w odpowiednim metaznaczniku.

Ta technika pozwala uniknąć dodatkowego żądania HTTP i potwierdzono, że działa w najnowszych wersjach Chrome, Firefox i Opera w systemie Windows 7. Jednak nie działa przynajmniej w Internet Explorerze 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. */

Demo: turi.co/up/favicon.html

Marcel
źródło
3
+1 piękny przełom w pamięci podręcznej @Marcel. PS Znaki w HTTP Headers Responsemoim pliku .ico mają prawie taki sam rozmiar mojej ikony !! Jak ci się to podoba?
Sam
2
@Sam: Zauważyłem, że base64 ekwiwalentu PNG pliku favicon.ico stosu przepełnienia stosu jest o połowę mniejszy. Ładne i kompaktowe.
Marcel
1
eeehm nie jestem pewien czy rozumiem, co masz na myśli: plik był o połowę mniejszy niż ...? Plik PNG jak icon.png? czy masz na myśli, że base64 jego odpowiednik jest mniejszy, gdy jego format PNG jest sformatowany zamiast ikony sformatowanej lub gif? ciekawy. Zdrowie przyjacielu!
Sam
1
@Sam: Porównywałem base64 tego PNG z base64 tego pliku ICO . Wersja PNG, użyta w powyższym przykładowym kodzie, jest o połowę mniejsza.
Marcel
1
och, rozumiem, to sprawia, że ​​twoja baza 64 odpowiada, a ogólne użycie formatu base64 PNG jest wtedy preferowanym wyborem, prawda?
Sam
147

Myślę, że w większości przypadków nie powoduje to kolejnego żądania HTTP, ponieważ zwykle są one zrzucane do pamięci podręcznej przeglądarki po pierwszym dostępie.

Jest to faktycznie bardziej wydajne niż którekolwiek z proponowanych „rozwiązań”.

James Anderson
źródło
52
To jedyna sensowna odpowiedź. To nie jest problem, który nie wymaga naprawy.
JoDG,
1
James, moje rozwiązanie jest naprawdę tylko możliwością, ale takiej, której nigdy nie poleciłbym komuś. Wygląda jednak na to, że większość przeglądarek wyda nowe żądanie HTTP dla favicon na początku nowej sesji przeglądarki. I nie zawsze zwraca 304.
Yahel
4
Przeglądarka nadal będzie wykonywać połączenie HEAD, nawet jeśli znajduje się w pamięci podręcznej przeglądarki, więc nadal będziesz mieć narzut związany z żądaniem HTTP.
dietbuddha,
3
Właściwie wszystko zależy od przeglądarki. Większość z nich zawsze szuka favikonu w niektórych lokalizacjach, nawet jeśli strona nie wspomina o nim i wykonuje połączenie HEAD przy każdym odświeżeniu.
David Costa
14
Favicon potrzebuje długiego, wygasającego nagłówka, tak jak każdego dobrego zasobu statycznego. Dzięki temu nawet połączenia HEAD są tłumione.
Paul Alexander
102

Możesz spróbować URI danych. Brak żądania HTTP!

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

Jeśli twoje strony nie mają buforowania statycznego, twój favicon nie będzie mógł być buforowany, a w zależności od rozmiaru obrazu favicon, twój kod źródłowy może się w pewnym sensie rozdęć.

Ulubione dane URI wydają się działać w większości nowoczesnych przeglądarek; Mam go działającego w najnowszych wersjach Chrome, Firefox i Safari na komputerze Mac. Wydaje się, że nie działa w przeglądarce Internet Explorer i prawdopodobnie w niektórych wersjach Opery.

Jeśli martwisz się o Old IE (i prawdopodobnie nie powinieneś być w dzisiejszych czasach), możesz dołączyć komentarz warunkowy IE, który załaduje rzeczywisty plik favicon.ico w tradycyjny sposób, ponieważ wydaje się, że starszy Internet Explorer nie obsługa danych URI Favicons

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. Dołącz plik favicon.ico do katalogu głównego, aby zakryć przeglądarki, które będą tego żądały w obu przypadkach, ponieważ w przypadku tych przeglądarek, jeśli sprawdzają już bez względu na to, co robisz, równie dobrze możesz nie zmarnować żądania HTTP odpowiedzią 404 .

Możesz także po prostu użyć favicon innej popularnej witryny, która prawdopodobnie będzie mieć buforowany favicon, na przykład http://google.com/favicon.icow taki sposób, aby był obsługiwany z pamięci podręcznej.

Jak zauważyli komentatorzy, to, że możesz to zrobić, nie oznacza, że ​​powinieneś, ponieważ niektóre przeglądarki wymagają favicon.ico niezależnie od sztuczek, które wymyślimy. Ilość narzutu, który byś zaoszczędził, robiąc to, byłaby niewielka w porównaniu z oszczędnościami, które można uzyskać dzięki robieniu takich rzeczy jak gzipping, używanie w przyszłości nagłówków wygasających dla zawartości statycznej, minimalizowanie plików JavaScript, umieszczanie obrazów tła w duszkach lub URI danych , serwowanie plików statycznych poza CDN itp.

Yahel
źródło
1
@Pekka tak, to nie jest tak naprawdę praktyczne rozwiązanie, ponieważ dodatkowy identyfikator URI danych na niebuforowanych stronach prawdopodobnie przewyższyłby wagę tego żądania HTTP. Być może OP może wstrzyknąć favicon do DOM asynchronicznie.
Yahel,
4
@Sam Przepraszam, rozumiem, co teraz oznacza @yc, mój błąd. Oczywiście możesz uzyskać doskonały dostęp do <link rel>elementu w przeglądarce za pomocą JavaScript, co powinno być możliwe. Widziałem nawet tak zaprogramowaną grę ... jednak wydaje się, że nie działa ona również w IE i prawdopodobnie nie zapobiegnie domyślnemu /favicon.icożądaniu wyszukiwania
Pekka
2
@Pekka, rozumiem. PS to niesamowita gra! Powoduje wstyd całego mojego ekranu, ponieważ wszystko, czego potrzebujesz, to haha ​​16 x 16 pikseli. To hiperłącze otwiera pewne możliwości tego, co jest faktycznie możliwe z tym faviconem.
Sam
3
W przypadku braku deklaracji favicon wszystkie przeglądarki automatycznie zażądają domyślnego adresu URL, /favicon.icopróbując go zlokalizować. Jeśli więc pominiesz favicon <link>(a później dodasz go przez Javascript), prawdopodobnie pogorszysz sytuację.
Már Örlygsson,
2
Wystarczy użyć favicon.ico do przechowywania przezroczystego
gifa
21

Możesz użyć favicon w formacie base64, takich jak:

<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
źródło
1
Wskazówka: ciąg zakodowany w base64 użyty w tej odpowiedzi jest plikiem PNG i nie będzie działać z IE10 lub starszą wersją.
sibbl
2
Na wypadek, gdyby ktoś chciał wiedzieć, to pingwin linux.
Martlark,
16

Znalazłem ciekawe rozwiązanie na tej stronie . To jest niemiecki, ale będziesz w stanie zrozumieć kod.

Umieszczasz dane base64 ikony w zewnętrznym arkuszu stylów, aby był buforowany. W nagłówku witryny musisz zdefiniować favicon za pomocą identyfikatora, a favicon jest ustawiony jako background-imageaw arkuszu stylów dla tego identyfikatora.

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

i 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>
Felix Geenen
źródło
8
Jedna osoba o reputacji 74,947 powiedziała gdzieś na tej stronie: „Nie możesz!” ... Następnie inna osoba o mniej niż 50 reputacjach powiedziała: „Możesz!” Czy to oznacza, że ​​dążenie do rozwiązań i konkretne innowacyjne dążenie nie ma powiązań ani relacji z zyskaną reputacją? ... Cóż, to jest po prostu niesamowite!
Sam
4
Właśnie potwierdziłem, że to rozwiązanie nie działa - przynajmniej nie w Chrome 10 i Firefox 3.6 w systemie Windows
Már Örlygsson
13
Właśnie potwierdziłem, że to rozwiązanie działa - przynajmniej w Chrome 10.0.648 na W7 64-bitowym oraz w FF 4.0 na W7 64
Sam
4
LOL, potwierdziłem, że powyższe dwa stwierdzenia wydają się sprzeczne, pomimo nieco różnych numerów wersji wątpię, by zachowanie Chrome zmieniło się tak bardzo. Firefox może zrobił z 3,6 do 4, ale mało prawdopodobne, że Chrome 10 zmienił się tak bardzo po drobnej aktualizacji.
dyasta
Mogę potwierdzić, że działa to w Chrome 83 i Firefox ESR 68 w systemie Ubuntu 20.04, i mogę potwierdzić, że nie działa, aby zapobiec trafieniu w /favicon.ico. Otrzymujesz obraz, ale nie uniemożliwiasz dodatkowego połączenia SSL. Ponieważ taki był cel, jest to porażka.
Wil
14

Dobry punkt i fajny pomysł, ale niemożliwy. Favicon musi być pojedynczym, oddzielnym zasobem. Nie ma możliwości połączenia go z innym plikiem obrazu.

Pekka
źródło
1
Może jestem ślepy, ale jedynym miejscem, w którym widzę favicon wyszukiwarki Google, jest ikona: google.com/search?q=foo
Yahel
4
@yc google.com/favicon.ico to miejsce, w którym przeglądarki automatycznie go sprawdzą
Pekka
3
@yc nie jesteś ślepy, udowodniłeś, że jesteś godny bardzo kreatywnej odpowiedzi na górze ... jak już zauważył Pekka, miejsca, w /favicon.icoktórych przeglądarki będą automatycznie wyszukiwać. Teraz nadchodzą prawdziwe złe wiadomości: jeśli favicon NIE istnieje, oznacza to karę 404 za błąd, która spowoduje również niewielkie opóźnienie !! Wydaje się, że nie ma ucieczki z tego favicon dungeonu. Są takie małe, ale o tak potężne ... cholera :)
Sam
Zobacz moją odpowiedź stackoverflow.com/questions/5199902/..., aby znaleźć właściwy sposób przyspieszenia.
Matt Joiner,
8
Należy zauważyć, że realistycznie powinno to być jednorazowe żądanie, prawie na zawsze. Jak wszystko inne, długie liczniki pamięci podręcznej i odpowiednie 301 zwracane przez serwer sprawią, że favicon zażąda spornego punktu (chyba że nie istnieje - tak!).
Kevin Peno,
9

Czy to naprawdę ma znaczenie?

Wiele przeglądarek ładuje favicon jako niski priorytet, aby i tak nie blokował ładowania strony, więc tak, jest to dodatkowe żądanie, ale nie jest na żadnej krytycznej ścieżce.

Przyjęte rozwiązanie jest okropne, ponieważ dopóki JS nie zostanie pobrane i wykonane, wszystkie elementy DOM poniżej zostaną zablokowane do renderowania i nie zmniejszy to liczby żądań!

Andy Davies
źródło
8

Właściwym rozwiązaniem jest użycie potokowania HTTP .

Potokowanie HTTP to technika polegająca na zapisywaniu wielu żądań HTTP w jednym gnieździe bez oczekiwania na odpowiednie odpowiedzi. Potokowanie jest obsługiwane tylko w HTTP / 1.1, a nie w wersji 1.0.

Wymagane jest, aby serwery go obsługiwały, ale niekoniecznie partipate.

Potokowanie HTTP wymaga obsługi zarówno klienta, jak i serwera. Do obsługi potoków wymagane są serwery zgodne z HTTP / 1.1. Nie oznacza to, że serwery są zobowiązane do potokowania odpowiedzi, ale nie muszą zawieść, jeśli klient zdecyduje się potokować żądania.

Wielu klientów przeglądarki tego nie robi, kiedy powinno.

Potokowanie HTTP jest wyłączone w większości przeglądarek.

  • Opera ma domyślnie włączone potokowanie. Wykorzystuje heurystykę do kontrolowania poziomu stosowanego potoku w zależności od podłączonego serwera.
  • Internet Explorer 8 nie obsługuje potoków z powodu obaw związanych z błędnymi serwerami proxy i blokowaniem „head-of-line”.
  • Przeglądarki Mozilla (takie jak Mozilla Firefox, SeaMonkey i Camino) obsługują potokowanie, jednak domyślnie są wyłączone. Używa heurystyki, szczególnie do wyłączania potokowania serwerów IIS.
  • Konqueror 2.0 obsługuje potokowanie, ale jest domyślnie wyłączony. [Potrzebne źródło]
  • Google Chrome nie obsługuje potokowania.

Polecam spróbować włączenia potoku w Firefoksie i wypróbować go tam lub po prostu użyć Opery (wzdrygnąć).

Matt Joiner
źródło
7
Rurociągi optymalizacja wykonana w warstwie transportowej. Nadal wiąże się to z osobnym zwrotem HTTP dla favicon, o co pyta pytanie.
Már Örlygsson,
@ Már Örlygsson, który nie jest poprawny. Podróż w obie strony oznacza, że ​​klient musi złożyć żądanie, a następnie poczekać na przetworzenie żądania i pobranie odpowiedzi. Przetwarzanie potokowe oznacza, że ​​żądanie zostanie już wysłane, czekając jeszcze na zakończenie poprzedniego żądania, więc podczas wykonywania tych samych kroków opóźnienie, które spowoduje, nie będzie takie samo ...
Peter
1
Sam nie może włączyć potokowania we wszystkich przeglądarkach użytkowników, więc w tym sensie to rozwiązanie nie przyspieszy ładowania strony - z wyjątkiem jego osobiście.
Már Örlygsson,
3
@ Már Örlygsson i jego upvoters: Nie odbywa się to w warstwie transportu. W rzeczywistych modelach wszystko to odbywa się w warstwie aplikacji. Teoretycznie potokowanie powinno odbywać się w warstwie sesji.
Matt Joiner,
4
Nie będę się z tobą kłócił. Wciąż utrzymuje się fakt, że Sam nie może „korzystać z potokowania” (jak to jest porządnie), aby przyspieszyć ładowanie swojej witryny dla odwiedzających, ponieważ obsługa potokowania jest A) nierówna, jak sam wskazujesz, i B) opt-in przez każdego indywidualny użytkownik.
Már Örlygsson,
6

Naprawdę nie odpowiedź na pytanie, ale po prostu jako uzupełnienie odpowiedzi udzielonych przez Marcela i Yahelca , oferuję eleganckie rozwiązanie problemu 404 favicon.

Ponieważ niektóre aplikacje i przeglądarki nie sprawdzają favicon.com, a jeśli ikona nie znajduje się w katalogu głównym witryny, możesz po prostu odpowiedzieć na żądanie za pomocą nagłówka odpowiedzi 204 .

Przykłady Apache:

Opcja Apache pierwsza (i moja ulubiona), prosta jedna linijka w twoich .htacces lub .conf:

Redirect 204 /favicon.ico

Druga opcja Apache:

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

Do dalszej lektury jest miły wpis na blogu autorstwa Stoyana Stefanova na stronie http://www.phpied.com/204-no-content/

Anthony Hatzopoulos
źródło
Tak, ale kiedy prośba jest składana, a favicon jest często używany w znaczący sposób, uważam, że warto podać ikonę zamiast pustej odpowiedzi. Kompresowanie ikony za pomocą gzip i tak często powoduje jej rozmiar do jednego pakietu TCP
Andy Davies
5

To świetny pomysł, ale jeśli Google nie zrobił tego na swojej stronie głównej, założę się, że nie można (obecnie) zrobić

cusimar9
źródło
13
Google jest świetny, ale takie myślenie wydaje się nieproduktywne i duszne. Zawsze są nowe, lepsze i bardzo możliwe sposoby robienia rzeczy i nie musisz pracować, aby lider branży je wymyślił.
Błąd składni
8
Oczywiście Google czerpie swoje pomysły z SO, a nie na odwrót;)
user123444555621,
3
Dobra odpowiedź, jeśli Google mógłby przyspieszyć swoją stronę, zrobiliby to.
David d C e Freitas
4

Przykro mi, ale nie możesz połączyć favicon z innym zasobem.

Oznacza to, że masz zasadniczo dwie opcje:

  1. Jeśli nie masz favikonu w swojej witrynie - możesz mieć na hrefmyśli zasób niebędący ikoną, który jest już ładowany (np. Arkusz stylów, plik skryptu lub nawet jakiś zasób, który korzysta z wcześniejszego pobrania .)
    (Moje krótkie testy wskazują, że działa to w większości, jeśli nie we wszystkich głównych przeglądarkach).

  2. Zaakceptuj dodatkowe żądanie HTTP i upewnij się, że plik favicon ma ustawione agresywne nagłówki HTTP kontrolujące pamięć podręczną.
    (Jeśli masz inne witryny pod kontrolą, możesz nawet sprawić, że podstępnie załadują favicon dla tej witryny - wraz z innymi statycznymi zasobami).

Kreatywne rozwiązania PS , które nie będą działać :

  • Dziwna sztuczka CSS data-uri (do której prowadzi komentator Felix Geenen) nie działa .
  • Użycie Javascript do wykonania opóźnionego wstrzyknięcia <link>elementu favicon (zgodnie z sugestią użytkownika @yc) prawdopodobnie tylko pogorszy sytuację - powodując dwa żądania HTTP.
Már Örlygsson
źródło
1
inne rozwiązania, które nie działają: wiele ikon w .ico i użycie ico w tagu obrazu w nadziei, że wyświetli tam inne zdjęcie niż jako favicon. Łączenie ulubionych z innym plikiem.
markijbema 17.03.11
3

Możesz użyć 8-bitowego formatu PNG zamiast formatu ICO, aby uzyskać jeszcze mniejszy ślad danych. Jedyne, co musisz zmienić, to użyć „data: image / png” zamiast „data: image / x-icon” Nagłówek typu MIME:

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

Atrybut „type” może być „image / png” lub „image / x-icon”, oba działają dla mnie.

Możesz przekonwertować ICO do 8-bitowego png za pomocą gimp lub przekonwertować:

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

i kodujemy dane binarne PNG do ciągu base64 za pomocą polecenia base64:

base64 favicon.png
andrej
źródło
2

Oto najprostszy sposób:

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

Jaką ikonę to reprezentuje? Odpowiedz i głosuj poniżej!

rjobidon
źródło
1
Ikona jabłka?
styfle
2

Rozwiązanie Killer w 2020 roku

To rozwiązanie koniecznie pojawia się dziewięć lat po tym, jak pytanie zostało pierwotnie zadane, ponieważ do niedawna większość przeglądarek nie była w stanie obsługiwać ulubionych .svgformatów.

Tak już nie jest.

Zobacz: https://caniuse.com/#feat=link-icon-svg

1) Wybierz SVG jako format Favicon

Obecnie, w czerwcu 2020 roku, te przeglądarki mogą obsługiwać SVG Favicons :

  • Chrom
  • Firefox
  • Krawędź
  • Opera
  • Chrome na Androida
  • Przeglądarka KaiOS

Pamiętaj, że te przeglądarki nadal nie mogą:

  • Safari
  • iOS Safari
  • Firefox na Androida

Mając powyższe na uwadze, możemy z pewnością korzystać z SVG Favicon .

2) Przedstaw SVG jako identyfikator URI danych

Głównym celem jest uniknięcie żądań HTTP.

Jak wspomniano w innych rozwiązaniach, całkiem sprytnym sposobem na to jest użycie URI danych zamiast adresu URL HTTP .

Pliki SVG (szczególnie małe pliki SVG) doskonale nadają się do identyfikatorów URI danych, ponieważ ten ostatni jest po prostu tekstem jawnym (z dowolnymi potencjalnie niejednoznacznymi znakami zakodowanymi procentowo), a ten pierwszy, będący XML, może być zapisany jako długa linia tekstu jawnego (z drobnym rozproszeniem) kodów procentowych) niezwykle prosto.

3) Cały plik SVG to emoji

W grudniu 2019 r.Leandro Linares był jednym z pierwszych, którzy zdali sobie sprawę, że odkąd Chrome dołączył do Firefoksa, wspierając SVG Favicons, warto eksperymentować, aby sprawdzić, czy favicon można utworzyć z emoji:

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

Przeczucie Linares było słuszne.

Kilka miesięcy później (marzec 2020 r.) Code Pirate Lea Verou zrozumiała to samo:

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

I favikony już nigdy nie były takie same.

4) Samodzielne wdrożenie rozwiązania:

Oto prosty plik 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>

A oto ten sam plik SVG jak identyfikator URI danych :

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

I na koniec oto ten identyfikator URI danych jako 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) Więcej sztuczek

Ponieważ Favicon jest SVG, można do niego zastosować dowolną liczbę efektów filtrów (zarówno SVG, jak i CSS).

Na przykład, obok Favicon Białego Jednorożca powyżej, możemy łatwo zrobić Favikona Czarnego Jednorożca , stosując filtr:

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

Favicon Czarnego Jednorożca:

<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
źródło