Favicon erstellen und einbinden
Wie man ein Favicon erstellen und einbinden kann, erklärt dieses Tutorial. Mit Tipps zu Formaten, Größen, HTML-Code sowie zur Umsetzung mit Photoshop, Illustrator und Co.
Was ist ein Favicon?
Ein Favicon ist ein kleines Symbol, das in der Adresszeile des Browsers oder in geöffneten Tabs erscheint. Dieses Icon wird ebenfalls im Favoriten-Menü bzw. in der Lesezeichenleiste vor dem entsprechenden Eintrag angezeigt. Favicons können somit zum Wiedererkennungswert der Website beitragen. Sie bieten zudem Raum für Logos, Signets und weitere Gestaltungen, um mehr Aufmerksamkeit zu erzielen.Entstehung und Geschichte des Favicons
Entstanden ist das Favicon übrigens während des „Browserkampfes“ im Jahr 1999. Die damals größten Hersteller dachten sich für ihre Browser Netscape Navigator und Microsoft Internet Explorer immer mehr Features aus, um sich von der Konkurrenz abzuheben.
Sehr aktiv beim Austüfteln neuer Funktionen erwies sich Bharat Shyam, der zur damaligen Zeit als Developer bei Microsoft tätig war. Er gilt als der Erfinder des Favicons. Bharat sorgte im März 1999 dafür, dass es im Internet Explorer möglich war, ein 16 x 16 px großes Symbol vor die Adresszeile zu setzen, um Websites besser voneinander unterscheiden zu können. Die Datei mit dem Namen favicon.ico musste lediglich im Root-Verzeichnis liegen, um vom Internet Explorer 5 erkannt zu werden. Im Dezember nahm das World Wide Web Consortium das Favicon schließlich offiziell in den Empfehlungen zu HTML 4.01 mit auf.
Favicon in HTML einbinden
Seit der Erfindung von Bharat Shyam ist viel Zeit vergangen. Die Möglichkeiten, mit denen sich heutzutage ein Favicon erstellen und einbinden lässt, sind vielfältig. Eine „Alles-in-Einem-Lösung“ beispielsweise in Form einer einzigen SVG-Datei wäre wünschenswert – gibt es jedoch nicht. Geblieben ist allerdings favicon.ico. Diese ursprüngliche Datei wird nach wie vor von gängigen Browsern wie Chrome, Firefox, Safari, IE etc. unterstützt.
Die klassische Methode für Desktop-Browser sieht demnach also wie folgt aus:
<link rel="shortcut icon" href="/favicon.ico">Diese Zeile ist im <head> der entsprechenden Website einzufügen. Der MIME-Type type="image/x-icon" kann der Form halber ergänzt werden.
Im Grunde genommen ist das .ico-Format lediglich ein Container, in dem sich mehrere Bilder abspeichern lassen. Auf diese Weise kann ein favicon.ico mehrere Größen wie beispielsweise 16 x 16 oder 32 x 32 px gleichzeitig enthalten. Für eine scharfe Darstellung (beispielsweise auf Retina-Bildschirmen) empfiehlt sich die Datei in 32 x 32 Pixeln anzulegen.
Moderne Browser sind zwar in der Lage, die Größe auf das Standardformat von 16 x 16 px runterzurechnen, haben jedoch manchmal Probleme bei der Auswahl des passenden Formats im Container. So kann es vorkommen, dass fälschlicherweise die niedrigste Auflösung verwendet wird. Um dieses zu umgehen, kann man das Favicon zusätzlich im PNG-Format erstellen. Aktuelle Browser bevorzugen diese Methode eher, da die erzeugten Dateien häufig kleiner sind. Zur Verfügung stellen lässt sich das Favicon somit wie folgt:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
Safari auf iOS setzt jedoch ein Touch-Icon voraus. Wer dafür ebenfalls ein Favicon erstellen und einbinden möchte, benötigt eine PNG-Grafik im Format 180 x 180 px.
Zu beachten ist außerdem, dass die Ecken des entsprechenden Symbols automatisch abgerundet werden, sobald das Symbol auf dem Home-Screen erscheint. Der Code für die Einbindung sieht dann wie folgt aus:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Für angeheftete Tabs gibt es für iOS ebenfalls die Möglichkeit, ein erstelltes Favicon einbinden und darstellen zu lassen. Hierfür lässt sich eine skalierbare SVG-Datei im Seitenverhältnis 1:1 verwenden. Der Syntax gestaltet sich folgendermaßen:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff">Auf Geräten mit Android / Chrome wird ebenfalls ein größeres Favicon vorausgesetzt. Die zu erstellende Datei sollte eine Größe von 192 x 192 px aufweisen und als PNG-Datei abgespeichert werden. Da Android das Web App Manifest zugrundelegt, erfolgt die Einbindung über einen kleinen Umweg:
<link rel="manifest" href="/icons/site.webmanifest">Der Inhalt dieser separat zu erstellenden Datei enthält dann die Links zu den entsprechenden Favicons:
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#fff",
"background_color": "#fff",
"display": "standalone"
}Bei theme_color und background_color kann mit Farben experimentiert werden, um beispielsweise die Flächen zu unterlegen. Unterstützt werden zudem Transparenzen in den entsprechenden PNG-Dateien.
theme-color lässt sich zudem auch als separater Meta-Tag verwenden, um gezielt die Hintergrundfarbe des Icons auf dem Home-Bildschirm einzufärben (hilfreich bei transparenten PNG-Grafiken):
<meta name="theme-color" content="#fff">Eine Besonderheit gibt es außerdem bei dem neuesten Internet Explorer und Microsoft Edge. Die Einbindung der Favicons kann über eine XML-Datei erfolgen. Somit lässt sich ein gezieltes Aussehen für Metro UI festlegen. Wer also lieber mehr Einfluss auf Kachel-Darstellung und Co. nehmen möchte, kann wie folgt vorgehen:
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-config" content="/IEconfig.xml">Wie sich der Inhalt der XML-Datei inhaltlich gestalten lässt, beschreibt Microsoft in einer ausführlichen Dokumentation zur Browser-Konfiguration.
Der komplette Code zur Einbindung von Favicons, mit dem man „auf Nummer sicher“ gehen kann, ist somit folgender:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff">
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-config" content="/IEconfig.xml">
<meta name="theme-color" content="#fff">Mit diesen Zeilen sind bereits viele Eventualitäten im Vorfeld abgedeckt. Je nach Bedarf und Ausrichtung kann selbstverständlich auf die eine oder andere Einbindung verzichtet werden.
Favicons erstellen mit Photoshop
Natürlich lassen sich auch mit Photoshop .ico-Dateien erstellen, die anschließend als Favicons verwendet werden können. Da die Bildbearbeitung allerdings von Haus aus keine Dateien im .ico-Format abspeichern kann, gibt es Abhilfe in Form eines Plugins. Das hat zwar schon einige Jahre auf dem Buckel, lässt sich jedoch mit einem Kniff auch für aktuelle Photoshop-CC-Versionen nutzen. Falls diese Methode nicht funktionieren sollte, bleibt immer noch der Weg über Favicon-Generatoren übrig, die, je nach Anbieter, einige zusätzliche Komfortfunktionen bieten.
Photoshop-Plugin für .ico-Dateien installieren
- Das Plugin ICO (Windows Icon) Format von der Website telegraphics.com.au/sw/ herunterladen.
- Einen neuen Ordner mit den Namen „File Formats“ erstellen
- Die Plugin-Datei (beginnend mit „ICOFormat“) in diesen Ordner kopieren
- Den Ordner in den Plugin-Ordner von Photoshop kopieren (unter „Programme -> Adobe -> Adobe Photoshop 2020 -> Plug-ins“ bzw. „Applications -> Adobe Photoshop 2020/Adobe Photoshop 2020.app/Contents/Required/Plug-Ins“)
- Das Plugin ist nun installiert
ICO-Datei für Favicon mit Photoshop erstellen
Da Favicons quadratisch sind, bietet es sich an, zunächst das größtmögliche Format anzulegen, das in HTML eingebunden werden soll. Diese Datei lässt sich für die weiteren Symbole, die im Rahmen der Favicon-Einbindung erstellt werden sollen, verkleinern. Das kann beispielweise 16 x 16, 32 x 32, 64 x 64 (Desktop) oder 512 x 512 Pixel (Android) sein.- Neue Datei erstellen
- Breite und Höhe gem. der maximalen Icon-Größe wählen
- Quadratisches Format unbedingt einhalten
- Farbmodus: RGB
- Auflösung: 72 px
- Mit „Speichern unter“ als .ICO-Datei oder .PNG-Datei speichern
Bei Bedarf kann man auch eine neue Ebene erstellen und diese über das Ebenen-Fenster in ein Smartobjekt konvertieren. Dann lässt sich der Inhalt dieser Ebene ähnlich wie eine Gruppe behandeln und bis zu einem bestimmten Maß skalieren bzw. über den Seitenrand hinaus verwenden.
Ein Favicon erstellen mit Illustrator
Das Erstellen von Favicons in Illustrator ähnelt dem Ablauf in Photoshop. Allerdings steht in der Software keine .ico-Erweiterung zur Verfügung. Der Umweg über einen Favicon Generator oder Konverter bleibt hier also nicht aus, sofern eine standardmäßige .ico-Datei eingebunden werden soll.
- Neue Datei im quadratischen erstellen
- RGB-Modus wählen
- Rastereffekte auf „Bildschirm (72ppi)“ setzen
- Quadratisches Format einstellen
- Mit „Speichern unter“ im PNG-8 oder ggf. SVG-Format (für Favicon-Generator) speichern
Favicon Generatoren und Konverter
Als hilfreich erweisen sich auch sogenannte Favicon Generatoren sowie entsprechende Konverter, mit denen sich Favicon-Dateien automatisch erstellen und generieren lassen. Hier kommt eine Übersicht mit einigen gängigen Tools.
Real Favicon Generator
Mit diesem Favicon Generator lassen sich Favoriten-Symbole für viele Arten von Browsern und Plattformen erstellen. Es reicht es beispielsweise aus, ein Bild im PNG-, JPG- oder SVG-Bild hochzuladen. Der Generator erstellt dann automatisch die passenden Dateien zum Einbinden in die Website. Für optimale Ergebnisse wird ein Format von 260 x 260 px empfohlen. Hilfreich ist auch die Vorschau die zeigt, wie die Icons auf den unterschiedlichen Systemen herüberkommen.
Favicon.cc Generator
Einen anderen Ansatz bietet der Generator von Favicon.cc. Das Tool erlaubt das Zeichnen eigener Favicons direkt im Browser. Hierfür stehen einige Zeichenwerkzeuge zur Verfügung, mit denen sich Icons pixelgenau umsetzen lassen. Transparente Bereiche lassen sich ebenfalls anlegen. Das Ergebnis kann sodann als .ico-Datei heruntergeladen werden.IONOS Favicon Generator
Beide Möglichkeiten in einem Tool bietet der IONOS Favicon Generator. Damit lassen sich nicht nur eigene Favicons online zeichnen. Es besteht zudem die Möglichkeit, per Bildupload eine ganze Reihe von Symbolen generieren zu lassen. 22 Favicon-Dateien in unterschiedlichen Größen liefert das Tool auf Knopfdruck.favicon.io
Die Favicon-Generatoren auf favicon.io bieten diverse Möglichkeiten, Favicons zu erstellen. Mithilfe von „PNG to ICO“ lassen sich PNG-Dateien in Icons umwandeln. „TEXT to ICO“ erstellt, wie der Name schon andeutet, Favicons aus Text. Und mit „EMOJI to ICO“ lassen sich Emojis als Favicons herunterladen.
Arinjay Shekhar Favicons
Grafisch ansprechende Favicons hält auch Arinjay Shekhar bereit. Auf der Website finden sich 40 stylische Favicons zum Herunterladen. Darunter findet man Buchstaben von A bis Z, Ziffern sowie einige weitere Symbole im PNG- und PSD-Format. Der Download wird nach dem Prinzip „Pay-What-You-Want“ unter der Creative Commons Attribution 4.0 International License bereitgestellt.
Mit dem Real Favicon Generator ging das ganze auch für einen Laien sehr gut.
Hallo!
Danke für diese sehr informative Seite!
Als Anfänger habe ich noch Fragen zu den einzufügenden Codes.
Von meiner Website habe ich einige Seiten im Root-Verzeichnis liegen, die anderen befinden sich in Ordnern.
Wie schreibe ich die Codezeilen, wenn die Seiten, auf denen sie eingefügt werden sollen, einmal im Root liegen und einmal in einem Ordner? Es geht mir da um die Slashes/Schrägstriche hinten bei den Pfadangaben. Stimmt etwas von diesen Codes?:
Bei einer Seite im Root so:
Bei einer Seite in einem Ordner so:
oder:
Über eine Antwort würde ich mich sehr freuen.
Grüße
Christopher
Oh, die Links in meinem Kommentar werden nicht abgebildet. Das sieht nun etwas komisch aus, aber ich hoffe es ist zu verstehen, was ich da meine.
Also, ob zum Beispiel vor „favicon.ico“ immer ein / hin muss oder auch mal gar keins oder sogar zwei, wie diese: /./
– Christopher