Favicons neben externen Links

Wenn wir keinen benutzerdefinierten CSS-Selektor für jede einzelne Website erstellen, für die wir dies tun wollen, kann CSS nicht den `href` von Links extrahieren und ihn verwenden, um ein Favicon neben dem Link zu platzieren. Aber wenn wir ein kleines bisschen JavaScript einbeziehen, können wir es schaffen.

Die „Ich wünschte“-Nur-CSS-Technik

Was schön wäre, ist, wenn Sie einfachen semantischen HTML wie diesen hätten

<a href="https://github.com">GitHub</a>

Und dann könnten Sie alles abrufen, was Sie benötigen, um ein Hintergrundbild des Favicons mit einem Dienst wie getFavicon einzufügen.

/* Fair warning, this doesn't work */

a[href^="http://"]::before {
  content: url(https://g.etfv.co/ + attr(href));
}

Vielleicht wäre die Syntax nicht genau so, aber etwas Ähnliches. Der Punkt ist, dass Sie die `url()`-Syntax nicht in solche Teile in CSS aufteilen können.

Googles Favicon-Dienst

Google hat seinen eigenen Favicon-Dienst, den Sie nutzen können. Zum Beispiel

https://www.google.com/s2/u/0/favicons?domain=css-tricks.com

Automatisierung

Der Trick ist, dass Sie nur den Hostnamen und die TLD benötigen und nichts anderes. Ich habe gesucht und einen einfachen Regex gefunden, um dies aus jeder URL zu extrahieren. Wir brauchen das, da Links nicht immer (oder sogar meistens) die Wurzel von Websites sind.

function getDomain(url) {
  return url.match(/:\/\/(.[^/]+)/)[1];
}

Mit diesen Dingen und jQuery finden wir alle Links und wenden das Favicon als Hintergrundbild an. Die Prüfung auf externe Links ist sehr rudimentär, aber es gibt robustere Methoden hier, falls nötig.

$("a[href^='http']").each(function() {
  $(this).css({
    background: "url(http://www.google.com/s2/favicons?domain=" + getDomain(this.href) + ") left center no-repeat",
    "padding-left": "20px"
  });    
});

Dann erinnerte mich @travis daran, dass man einfach `this.hostname` anstelle des schicken Regex verwenden kann. Also

/* Nothing else needed */
$("a[href^='http']").each(function() {
  $(this).css({
    background: "url(https://www.google.com/s2/favicons?domain=" + this.hostname + ") left center no-repeat",
    "padding-left": "20px"
  });    
});

Ich bin mir nicht sicher, wie die Browserunterstützung für `hostname` ist, ob sie genauso gut ist wie `href` oder schlechter, ich weiß es nicht.

getFavicon-Methode

@seanodotcom zeigte mir einen weiteren ähnlichen Dienst namens getFavicon.

Er wird von Google AppEngine gehostet, ist aber nicht Googles eigener Dienst. Ich fand ihn etwas langsamer. Aber der Vorteil ist, dass Sie sich überhaupt nicht mit Hostnamen auseinandersetzen müssen, Sie geben ihnen einfach die vollständige URL.

Dann wird es also

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(https://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});​

Demo ansehen

Performance?

Wie Sie sicher wissen, ist die Anzahl der HTTP-Anfragen, die eine Seite stellt, ein wichtiger Faktor für die Performance. Jedes kleine Bild in diesen Techniken ist eine einzelne Seitenanfrage.

@yuritkanchenko wies mich darauf hin, dass es einen coolen Favicon-Dienst gibt, der die Favicons für Sie automatisch sprite, sodass Sie bei einer Anfrage bleiben können.

Zum Beispiel

http://favicon.yandex.net/favicon/google.com/yandex.ru/css-tricks.com

Ich bin ehrlich, ich bin nicht die zusätzliche Meile gegangen und habe das benötigte JavaScript geschrieben, um alle Links zu finden, die Domänen zu verketten, die Anfrage zu stellen und dann die Bilder als Sprite anzuwenden, aber ich bin sicher, Sie könnten das ziemlich schnell erstellen, wenn Sie es wirklich bräuchten.