Ist es nicht albern, dass ein winziges Favicon noch eine HTTP-Anfrage benötigt? Wie kann ich das Favicon in ein Sprite einfügen?

305

Jeder weiß, wie man einen favicon.ico-Link in HTML einrichtet:

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

Aber ich finde es einfach albern, dass Sie für ein winziges Mehrbyte-Symbol noch eine weitere HTTP-Anfrage benötigen . Also fragte ich mich, wie ich dieses Image zu einem Teil eines Sprites machen könnte (z. B. background-position=0px -200px;), um diese wertvolle HTTP-Anfrage zu beschleunigen und zu speichern. Wie kann ich dies mit meinem Logo und anderen Kunstwerken in ein vorhandenes Sprite-Bild integrieren?

Der Roboter, auf den favicon.icoArtikel 31 in der Wasserfallgrafik zeigt, ist mein Haustier ZAM. Er ist normalerweise glücklicher und hat einen guten Grund, mich wissen zu lassen, dass es Zeit für einige kreative Upgrades im Web ist, obwohl er und ich uns nicht über sein Outfit einig sind, was ich heute für ein bisschen albern halte ...

Geben Sie hier die Bildbeschreibung ein

javascript html css performance favicon Sam
quelle
47
Ist es nicht albern, dass es noch keine Möglichkeit gibt, .css / .js / .png / .html in einem einzigen optimierten Stream zu kombinieren? Sie hätten gedacht, jemand hätte sich diese Idee inzwischen ausgedacht
RichardTheKiwi
9
@ Richard related: Multipart-Antworten und Google haben eine Initiative für ein neues, optimiertes Webprotokoll , das dieses Problem löst. Ich habe seinen Namen vergessen ... Bearbeiten : Es heißt SPDY . Aber das liegt natürlich weit in der Zukunft.
Pekka
9
@Richard aka cyberkiwi, Sie können alles in eine HTML-Datei mit data:Werten für Bilder und Skripten inline einfügen .
zzzzBov
39
Übrigens, netter Skizzenmann :)
Fatih Acet
18
+1 für die Skizze :)
Giuliano

Antworten:

140

Eine geringfügige Verbesserung der Antwort von @ yc besteht darin, das base64-codierte Favicon aus einer JavaScript-Datei zu injizieren, die normalerweise ohnehin verwendet und zwischengespeichert wird, und das Standardverhalten des Browsers beim Anfordern zu unterdrücken, favicon.icoindem ihm eine Daten-URI in das entsprechende metaTag eingegeben wird.

Diese Technik vermeidet die zusätzliche http-Anforderung und funktioniert nachweislich in neueren Versionen von Chrome, Firefox und Opera unter Windows 7. Sie scheint jedoch zumindest in Internet Explorer 9 nicht zu funktionieren.

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
quelle
3
+1 schöner zwischengespeicherter Durchbruch @Marcel. PS Die Zeichen in HTTP Headers Responsemeiner .ico-Datei haben fast die gleiche Größe wie mein Symbol !! Wie gefällt dir das?
Sam
2
@ Sam: Ich habe festgestellt, dass base64 eines PNG-Äquivalents der Datei favicon.ico des Stapelüberlaufs halb so groß ist. Schön und kompakt.
Marcel
1
eeehm ich bin mir nicht sicher ob ich verstehe was du meinst: 'datei war halb so groß wie ...? PNG-Datei wie icon.png? oder meinst du, das base64-äquivalent davon ist kleiner, wenn sein png anstelle von symbol formatiert oder gif formatiert ist? neugierig. Prost Kumpel!
Sam
1
@ Sam: Ich habe die base64 dieses PNG mit der base64 dieser ICO-Datei verglichen . Die PNG-Version, wie sie in meinem obigen Beispielcode verwendet wird, ist halb so groß.
Marcel
1
Oh, ich verstehe, das macht Ihre Base 64-Antwort und die allgemeine Verwendung des Base64-PNG-Formats zur bevorzugten Wahl, oder?
Sam
149

Ich denke, dass dies größtenteils nicht zu einer weiteren HTTP-Anforderung führt, da diese normalerweise nach dem ersten Zugriff im Cache des Browsers gespeichert werden.

Dies ist tatsächlich effizienter als jede der vorgeschlagenen "Lösungen".

James Anderson
quelle
53
Dies ist die einzig vernünftige Antwort. Dies ist kein Problem, das nicht behoben werden muss.
JoDG
1
James, meine Lösung ist wirklich nur eine Möglichkeit, aber eine, die ich niemals jemandem empfehlen würde. Es scheint jedoch, dass die meisten Browser zu Beginn einer neuen Browsersitzung eine neue HTTP-Anforderung für das Favicon ausgeben. Und es gibt nicht immer eine 304 zurück.
Yahel
4
Der Browser führt auch dann noch einen HEAD-Aufruf durch, wenn er sich im Browser-Cache befindet, sodass Sie weiterhin den Overhead einer HTTP-Anforderung haben.
Dietbuddha
3
Eigentlich hängt alles vom Browser ab. Die meisten von ihnen suchen an einigen Stellen immer nach einem Favicon, auch wenn die Seite es nicht erwähnt, und rufen bei jeder Aktualisierung einen HEAD-Aufruf auf.
David Costa
14
Das Favicon benötigt wie jede gute statische Ressource einen langen, ablaufenden Header. Damit werden auch die HEAD-Aufrufe unterdrückt.
Paul Alexander
102

Sie können einen Daten-URI ausprobieren. Keine HTTP-Anfrage!

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

Wenn Ihre Seiten nicht statisch zwischengespeichert sind, kann Ihr Favicon nicht zwischengespeichert werden. Abhängig von der Größe Ihres Favicon-Bildes kann Ihr Quellcode dadurch aufgebläht werden.

Daten-URI-Favoriten scheinen in den meisten modernen Browsern zu funktionieren. Ich habe es in neueren Versionen von Chrome, Firefox und Safari auf einem Mac. Scheint im Internet Explorer und möglicherweise in einigen Versionen von Opera nicht zu funktionieren.

Wenn Sie sich Sorgen um den alten Internet Explorer machen (und dies sollten Sie heutzutage wahrscheinlich nicht sein), können Sie einen bedingten Kommentar zum Internet Explorer einfügen, der die eigentliche Datei favicon.ico auf herkömmliche Weise lädt, da dies anscheinend bei älteren Internet Explorer nicht der Fall ist unterstützt Daten-URI-Favicons

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. Fügen Sie die Datei favicon.ico in Ihr Stammverzeichnis ein, um Browser abzudecken, die sie in beiden Fällen anfordern, da Sie bei diesen Browsern die HTTP-Anforderung möglicherweise nicht mit einer 404-Antwort verschwenden, wenn sie bereits prüfen, was Sie tun .

Sie können auch einfach das Favicon einer anderen beliebten Site verwenden, deren Favicon wahrscheinlich zwischengespeichert wird http://google.com/favicon.ico, damit es aus dem Cache bereitgestellt wird.

Wie Kommentatoren bereits betont haben, bedeutet dies nicht , dass Sie dies tun sollten, da einige Browser favicon.ico unabhängig von den von uns entwickelten Tricks anfordern. Der Aufwand, den Sie auf diese Weise einsparen würden, wäre im Vergleich zu den Einsparungen, die Sie durch das Zippen, das Verwenden von in Zukunft abgelaufenen Headern für statischen Inhalt, das Minimieren von JavaScript-Dateien, das Einfügen von Hintergrundbildern in Sprites oder Daten-URIs erzielen würden, winzig , statische Dateien von einem CDN usw. bereitstellen

Yahel
quelle
1
@ Pekka Ja, es ist keine wirklich praktische Lösung, da das zusätzliche Bytegewicht des Daten-URI auf nicht zwischengespeicherten Seiten wahrscheinlich das Gewicht dieser HTTP-Anforderung überwiegen würde. Möglicherweise kann OP das Favicon asynchron in das DOM einspeisen.
Yahel
4
@Sam Es tut mir leid, ich verstehe, was @yc jetzt bedeutet, mein Fehler. Natürlich können Sie <link rel>über JavaScript perfekt auf das Element im Browser zugreifen, das sollte möglich sein. Ich habe sogar ein Spiel gesehen , das auf diese Weise programmiert wurde ... aber es scheint auch nicht im IE zu funktionieren, und es wird wahrscheinlich nicht die Standard- /favicon.icoSuchanforderung verhindern
Pekka
2
@ Pekka, ich verstehe. PS das ist ein unberechenbares Spiel! Schämt meinen gesamten Bildschirm, denn alles, was Sie brauchen, sind 16 x 16 Pixel, haha. Dieser Hyperlink eröffnet einige Möglichkeiten, was mit diesem Favicon tatsächlich möglich ist.
Sam
3
Im Falle einer fehlenden Favicon-Deklaration fordern alle Browser automatisch die Standard-URL /favicon.icoan, um sie blind zu finden. Wenn Sie also das Favicon weglassen <link>(um es später über Javascript hinzuzufügen), werden Sie die Dinge wahrscheinlich nur noch schlimmer machen.
Már Örlygsson
2
Verwenden Sie einfach favicon.ico, um Ihr transparentes
GIF
21

Sie könnten base64-codiertes Favicon verwenden, wie:

<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
quelle
1
Hinweis: Die in dieser Antwort verwendete Base64-codierte Zeichenfolge ist eine PNG-Datei und funktioniert nicht mit IE10 oder älter.
Geschwister
2
Für den Fall, dass jemand wissen will, dass es sich um den Linux-Pinguin handelt.
Martlark
17

Ich habe auf dieser Seite eine interessante Lösung gefunden . Es ist deutsch, aber Sie werden den Code verstehen können.

Sie fügen die base64-Daten des Symbols in ein externes Stylesheet ein, damit es zwischengespeichert wird. Im Kopf Ihrer Website müssen Sie das Favicon mit einer ID definieren, und das Favicon wird background-imageim Stylesheet für diese ID als festgelegt.

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

und das 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
quelle
8
Eine Person mit 74.947 Ruf sagte irgendwo auf dieser Seite: "Sie können nicht!" ... Dann sagte eine andere Person mit weniger als 50 Ruf: "Sie können!" Bedeutet dies, dass das Streben nach Lösungen und das konkrete Streben nach Innovation keine Verbindungen oder Beziehungen zu dem gewonnenen Ruf haben? ... Na dann ist das einfach genial!
Sam
4
Ich habe gerade bestätigt, dass diese Lösung nicht funktioniert - zumindest nicht in Chrome 10 und Firefox 3.6 unter Windows
Már Örlygsson
13
Ich habe gerade bestätigt, dass diese Lösung funktioniert - zumindest in Chrome 10.0.648 auf W7 64-Bit und in FF 4.0 auf W7 64-Bit
Sam
4
LOL, ich habe bestätigt, dass die beiden obigen Aussagen widersprüchlich erscheinen, trotz der leicht unterschiedlichen Versionsnummern bezweifle ich, dass sich das Verhalten von Chrome so stark geändert hat. Firefox hat es vielleicht von 3.6 auf 4 geschafft, aber es ist unwahrscheinlich, dass Chrome 10 bei einem kleinen Update so viel geändert hat.
Dyasta
Ich kann bestätigen , dass dies funktioniert auf Chrome 83 und Firefox ESR 68 auf Ubuntu 20.04, und ich kann bestätigen , dass es nicht funktioniert , den Hit auf /favicon.ico zu verhindern. Sie erhalten also das Image, verhindern jedoch nicht die zusätzliche SSL-Verbindung. Da dies das Ziel war, ist dies ein Misserfolg.
Wil
14

Guter Punkt und nette Idee, aber unmöglich. Ein Favicon muss eine einzelne, separate Ressource sein. Es gibt keine Möglichkeit, es mit einer anderen Bilddatei zu kombinieren.

Pekka
quelle
1
Vielleicht bin ich blind, aber der einzige Ort, an dem ich das Favicon der Google-Suche sehe, ist ein Sprite: google.com/search?q=foo
Yahel
4
@yc google.com/favicon.ico ist der Ort, an dem Browser automatisch nachschlagen
Pekka
3
@yc du bist nicht blind, du hast dich dort oben als einer sehr kreativen Antwort würdig erwiesen ... wie Pekka bereits betonte, werden die /favicon.icoBrowser automatisch nachsehen. Jetzt kommt die wirklich schlechte Nachricht: Wenn das Favicon NICHT vorhanden ist, bedeutet dies eine Fehlerstrafe 404, die ebenfalls eine leichte Verzögerung verursacht !! Es scheint kein Entkommen aus diesem Favicon-Dungeon zu geben. Sie sind so winzig, aber so mächtig ... verdammt :)
Sam
Siehe meine Antwort stackoverflow.com/questions/5199902/… für den richtigen Weg, um den richtigen Weg zu beschleunigen.
Matt Joiner
8
Es sollte beachtet werden, dass dies realistisch gesehen eine einmalige Anfrage sein sollte, so ziemlich für immer. Wie bei allem anderen machen lange Cache-Timer und korrekte 301, die vom Server zurückgegeben werden, die Favicon-Anfrage zu einem strittigen Punkt (es sei denn, es existiert nicht - yikes!).
Kevin Peno
9

Ist es wirklich wichtig?

Viele Browser laden das Favicon mit niedriger Priorität, damit es das Laden der Seite ohnehin nicht blockiert. Ja, es ist eine zusätzliche Anforderung, aber es befindet sich nicht auf einem kritischen Pfad.

Die akzeptierte Lösung ist schrecklich, da bis zum Abrufen und Ausführen des JS alle unten aufgeführten DOM-Elemente für das Rendern blockiert werden und die Anzahl der Anforderungen nicht verringert wird!

Andy Davies
quelle
8

Die richtige Lösung ist die Verwendung von HTTP-Pipelining .

HTTP-Pipelining ist eine Technik, bei der mehrere HTTP-Anforderungen an einen einzelnen Socket geschrieben werden, ohne auf die entsprechenden Antworten zu warten. Pipelining wird nur in HTTP / 1.1 unterstützt, nicht in 1.0.

Es ist erforderlich, dass Server dies unterstützen, aber nicht unbedingt teilnehmen.

Für das HTTP-Pipelining müssen sowohl der Client als auch der Server dies unterstützen. HTTP / 1.1-konforme Server sind erforderlich, um Pipelining zu unterstützen. Dies bedeutet nicht, dass Server Pipeline-Antworten benötigen, sondern dass sie nicht ausfallen müssen, wenn ein Client Pipeline-Anforderungen auswählt.

Viele Browser-Clients tun dies nicht, wenn sie sollten.

HTTP-Pipelining ist in den meisten Browsern deaktiviert.

  • In Opera ist das Pipelining standardmäßig aktiviert. Mithilfe von Heuristiken wird der Grad des verwendeten Pipelining abhängig vom angeschlossenen Server gesteuert.
  • Internet Explorer 8 leitet keine Anfragen weiter, da Bedenken hinsichtlich fehlerhafter Proxys und Head-of-Line-Blockierung bestehen.
  • Mozilla-Browser (wie Mozilla Firefox, SeaMonkey und Camino) unterstützen Pipelining, sind jedoch standardmäßig deaktiviert. Es werden einige Heuristiken verwendet, insbesondere um das Pipelining für IIS-Server zu deaktivieren.
  • Konqueror 2.0 unterstützt Pipelining, ist jedoch standardmäßig deaktiviert. [Zitieren erforderlich]
  • Google Chrome unterstützt kein Pipelining.

Ich würde empfehlen, dass Sie versuchen, das Pipelining in Firefox zu aktivieren und es dort zu versuchen, oder einfach Opera (shudder) verwenden.

Matt Joiner
quelle
7
Pipelining einer Optimierung in der Transportschicht. Es handelt sich immer noch um einen separaten HTTP-Roundtrip für das Favicon, worum es in der Frage geht.
Már Örlygsson
@ Már Örlygsson das ist nicht richtig. Eine Hin- und Rückfahrt bedeutet, dass der Kunde eine Anfrage stellen und dann warten muss, bis die Anfrage bearbeitet und die Antwort heruntergeladen wurde. Pipelining bedeutet, dass die Anfrage bereits gesendet wird, während noch auf den Abschluss der vorherigen Anfrage gewartet wird. Während also dieselben Schritte ausgeführt werden, ist die Verzögerung, die sie verursacht, nicht dieselbe ...
Peter
1
Sam kann das Pipelining nicht in allen Browsern seiner Besucher aktivieren. In diesem Sinne wird diese Website durch diese Lösung nicht schneller geladen - außer für ihn persönlich.
Már Örlygsson
3
@ Már Örlygsson und seine Aufsteiger: Es wird nicht in der Transportschicht gemacht. In realen Modellen erfolgt dies alles in der Anwendungsschicht. Theoretisch sollte sich das Pipelining auf der Sitzungsebene befinden.
Matt Joiner
4
Ich werde diese Semantik nicht mit Ihnen diskutieren. Die Tatsache gilt immer noch, dass Sam kein "Pipelining" (so ordentlich es ist) verwenden kann, um das Laden seiner Website für seine Besucher zu beschleunigen, da die Piplining-Unterstützung A) fleckig ist, wie Sie selbst betonen, und B) sich jeweils anmeldet einzelner Benutzer.
Már Örlygsson
6

Keine wirkliche Antwort auf die Frage, aber nur um die Antworten von Marcel und Yahoo zu ergänzen, biete ich eine elegante Lösung für das 404-Favicon-Problem.

Da einige Apps und Browser nicht auf favicon.com prüfen und das Symbol nicht im Site-Stammverzeichnis gefunden wird, können Sie einfach auf die Anfrage mit dem 204- Antwortheader antworten .

Apache Beispiele:

Apache Option eins (und mein Favorit), einfacher Einzeiler in Ihren .htacces oder .conf:

Redirect 204 /favicon.ico

Apache Option zwei:

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

Zur weiteren Lektüre gibt es einen schönen Blog-Beitrag von Stoyan Stefanov unter http://www.phpied.com/204-no-content/

Anthony Hatzopoulos
quelle
Ja, aber da die Anfrage gestellt wird und das Favicon oft sinnvoll verwendet wird, lohnt es sich meiner Meinung nach, das Symbol anstelle einer leeren Antwort bereitzustellen. Wenn Sie das Symbol über gzip komprimieren, wird es ohnehin oft auf eine einzelne TCP-Paketgröße gebracht
Andy Davies,
5

Es ist eine großartige Idee, aber wenn Google es nicht auf seiner Homepage getan hat, kann ich wetten, dass es (derzeit) nicht möglich ist

cusimar9
quelle
13
Google ist großartig, aber so zu denken scheint kontraproduktiv und erstickend. Es gibt immer neue, bessere und sehr mögliche Wege, Dinge zu tun, und Sie müssen nicht für einen Branchenführer arbeiten, um sie zu entwickeln.
Syntaxfehler
9
Offensichtlich bekommt Google ihre Ideen von SO, nicht umgekehrt;)
user123444555621
3
Gute Antwort, wenn Google ihre Seite schneller machen könnte, würden sie.
David d C e Freitas
5

Es tut mir leid, aber Sie können das Favicon nicht mit einer anderen Ressource kombinieren.

Dies bedeutet, dass Sie grundsätzlich zwei Möglichkeiten haben:

  1. Wenn Sie mit der Tatsache vertraut sind, dass Ihre Site kein Favicon hat, können Sie nur hrefauf eine Ressource ohne Symbole verweisen, die bereits geladen wird (z. B. ein Stylesheet, eine Skriptdatei oder sogar eine Ressource, die vom Vorabrufen profitiert .)
    (Meine kurzen Tests zeigen, dass dies in den meisten, wenn nicht allen gängigen Browsern funktioniert.)

  2. Akzeptieren Sie die zusätzliche HTTP-Anforderung und stellen Sie sicher, dass in Ihrer Favicon-Datei aggressive HTTP-Cache-Steuerungsheader festgelegt sind.
    (Wenn Sie andere Websites unter Ihrer Kontrolle haben, können Sie sogar das Favicon für diese Website - zusammen mit anderen statischen Ressourcen - vorab laden.)

PS Kreative Lösungen, die nicht funktionieren :

  • Der seltsame CSS-Daten-Uri-Trick (verlinkt von Kommentator Felix Geenen) funktioniert nicht .
  • Die Verwendung von Javascript zur Durchführung einer verzögerten Injektion des Favicon- <link>Elements (wie vom Benutzer @yc vorgeschlagen) wird die Situation wahrscheinlich nur verschlimmern - indem es zu zwei HTTP-Anforderungen führt.
Már Örlygsson
quelle
1
andere Lösungen, die nicht funktionieren: mehrere Symbole in einem .ico und die Verwendung des ico in einem Bild-Tag in der Hoffnung, dass dort ein anderes Bild als als Favicon angezeigt wird. Das Favicon mit einer anderen Datei zusammenfügen.
Markijbema
3

Sie können 8-Bit-PNG anstelle des ICO-Formats für einen noch geringeren Datenbedarf verwenden. Sie müssen lediglich "data: image / png" anstelle von "data: image / x-icon" verwenden. MIME-Header:

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

Das Attribut "Typ" kann "Bild / PNG" oder "Bild / X-Symbol" sein, beide funktionieren für mich.

Sie können ICO mit gimp in 8-Bit-PNG konvertieren oder konvertieren:

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

und codieren Sie die PNG-Binärdatei mit dem Befehl base64 in den Base64-String:

base64 favicon.png
andrej
quelle
2

Hier ist der einfachste Weg:

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

Welches Symbol repräsentiert es? Antworte und stimme unten zu!

rjobidon
quelle
1
Das Apfelsymbol?
Styfle
2

Killerlösung im Jahr 2020

Diese Lösung kommt notwendigerweise neun Jahre, nachdem die Frage ursprünglich gestellt wurde, da die meisten Browser bis vor kurzem nicht in der Lage waren, Favoriten im .svgFormat zu verarbeiten.

Das ist nicht mehr der Fall.

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

1) Wählen Sie SVG als Favicon-Format

Derzeit , im Juni 2020, können diese Browser SVG-Favicons verarbeiten :

  • Chrom
  • Feuerfuchs
  • Kante
  • Oper
  • Chrome für Android
  • KaiOS Browser

Beachten Sie, dass diese Browser immer noch nicht:

  • Safari
  • iOS Safari
  • Firefox für Android

Vor diesem Hintergrund können wir ein SVG-Favicon sicher verwenden .

2) Präsentieren Sie die SVG als Daten-URI

Das Hauptziel hierbei ist die Vermeidung von HTTP-Anfragen.

Wie andere Lösungen bereits erwähnt haben, besteht eine ziemlich clevere Möglichkeit darin, einen Daten-URI anstelle einer HTTP-URL zu verwenden .

SVGs (insbesondere kleine SVGs) eignen sich perfekt für Daten-URIs, da letztere einfach Klartext sind (mit potenziell mehrdeutigen Zeichen prozentual codiert) und erstere als XML als lange Klartextzeile (mit einem Hauch von etwas) ausgeschrieben werden können von Prozentcodes) unglaublich einfach.

3) Die gesamte SVG ist ein Emoji

Im Dezember 2019 erkannte Leandro Linares als einer der Ersten, dass es sich lohnt, zu experimentieren, um herauszufinden, ob ein Favicon aus einem Emoji erstellt werden kann, seit Chrome zusammen mit Firefox SVG Favicons unterstützt.

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

Linares Vermutung war richtig.

Einige Monate später (März 2020) erkannte Code Pirate Lea Verou dasselbe:

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

Und Favicons waren nie wieder die gleichen.

4) Implementieren Sie die Lösung selbst:

Hier ist eine einfache 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>

Und hier ist das gleiche SVG wie ein Daten-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

Und zum Schluss noch die Daten-URI als 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) Weitere Tricks

Da das Favicon ein SVG ist, können beliebig viele Filtereffekte (sowohl SVG als auch CSS) darauf angewendet werden.

Zum Beispiel können wir neben dem obigen White Unicorn Favicon ganz einfach ein Black Unicorn Favicon erstellen, indem wir den Filter anwenden:

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

Schwarzes Einhorn 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'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
Rounin
quelle