Von Google+ kennt man es: Jedem veröffentlichten Link wird das Favicon der verlinkten Website vorangestellt. Mit jQuery und Googles Favicon-Service lässt sich diese Art der Linkdarstellung schnell und einfach für die eigene Website nachbauen.

Google-Service: Favicon extrahieren

Um Favicons innerhalb des HTML-Dokumentes nutzen zu können, müssen diese zunächst aus der Website extrahiert werden. Da man nicht davon ausgehen kann, dass Favicons immer unter „/favicon.ico“ zu finden sind, muss die richtige Datei entweder im Quelltext manuell gesucht werden oder man setzt auf einen Dienst, der das übernimmt.

Links mit vorangestellten Favicons

Mit Googles Favicon-Service werden Favicons extrahiert und ins PNG-Format umgewandelt. Dem Service wird lediglich die URL der Website mitgeteilt, von der man das Favicon abholen möchte. Anschließend wird das Favicon als PNG-Datei herausgegeben:

http://www.google.com/s2/u/0/favicons?domain=drweb.de

jQuery: Favicon jedem externen Link voranstellen

Mit ein paar wenigen Zeilen JavaScript lassen sich nun die so zu erhaltenden Favicons bei externen Links per jQuery automatisch voranstellen :

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

[Code von CSS-Tricks/Chris Coyier]

Über den Ausdruck „a[href^='http']“ werden nur A-Elemente berücksichtigt, deren Attribut „href“ mit der Zeichenfolge „http“ beginnt. Damit spricht man alle externen Links an.

Anschließend weist das JavaScript diesen Elementen zwei CSS-Eigenschaften zu. Das Favicon wird im A-Element als Hintergrundgrafik angezeigt. Zusätzlich wird ein Abstand definiert, damit der Text nicht bereits mit der Hintergrundgrafik beginnt, sondern erst danach.

Ist für eine Website kein Favicon definiert, wird standardmäßig eine Weltkugel als Grafik dargestellt – wie es auch bei Google+ der Fall ist.

Alternative zu Googles Favicon-Service

Alternativ zu Googles Favicon-Service kann auch der Dienst getFavicon genutzt werden. Er funktioniert ähnlich wie Googles Service. Allerdings extrahiert getFavicon das Favicon nicht nur auf der Basis einer Domain, sondern einer ganzen URL:

http://g.etfv.co/http://www.drweb.de/

Zwar gibt es bei den meisten Websites ein Favicon für alle Seiten. Allerdings kommt es auch vor, dass eine Website unterschiedliche Favicons für unterschiedliche Seiten bereitstellt. Bei getFavicon wird sichergestellt, dass immer das richtige Favicon ausgewählt wird.

Auch hierbei wird für den Fall, dass kein Favicon gefunden wird, eine Weltkugel als Ersatz dargestellt.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (156)