Favicon erstellen
Bauen Sie aus jedem Bild eine favicon.ico, in der jede Größe steckt, die ein Browser anfragt.
Ein Favicon erstellen, ohne etwas hochzuladen
Ein Favicon ist das kleine Bild, das ein Browser im Tab, in den Lesezeichen und neben einer Verknüpfung zeigt. Die klassische Datei dafür ist favicon.ico, und die ist gar nicht ein einzelnes Bild: Der ICO-Container hält mehrere quadratische Größen bereit, und der Browser greift sich die, die er gerade braucht. Diese Seite öffnet den Bildkonverter mit ICO als Ausgabe und den üblichen vier Größen, Sie legen also ein Logo hinein und bekommen diese Datei direkt zurück.
Alles passiert in Ihrem Browser. Die Größen werden auf ein Canvas gezeichnet und der Container wird Byte für Byte in der Seite zusammengebaut – Ihr Logo verlässt den Rechner also nie, was zählt, solange das Design noch nicht öffentlich ist.
Was in der Datei steckt
| Größe | Wo der Browser sie verwendet |
|---|---|
| 16 px | Der Tab und die Lesezeichenliste |
| 32 px | Hochauflösende Bildschirme, Adressleiste, angeheftete Tabs |
| 48 px | Windows-Verknüpfungen und einige Desktop-Situationen |
| 256 px | Große Verknüpfungssymbole und alles, was das Symbol hochskaliert |
Das Menü Symbolgrößen bietet außerdem den klassischen Dreiersatz „16, 32 und 48 px“ sowie „Nur 256 px“ und „Nur 32 px“, wenn Sie genau wissen, was Sie brauchen. Weil die Größen feste Quadrate sind, gelten hier weder Qualität noch Größe ändern, und die Seite blendet beides aus.
Mit dem richtigen Bild anfangen
- Quadratisch schlägt breit. Ein nicht quadratisches Bild wird mit transparentem Rand in das Quadrat eingepasst, ein breites Logo landet also klein in der Mitte. Beschneiden Sie es vorher auf ein Quadrat, oder nehmen Sie nur die Bildmarke statt des kompletten Schriftzugs.
- Einfach schlägt detailliert. Bei 16 px ist eine Textzeile nur noch ein grauer Fleck. Die meisten wiedererkennbaren Favicons sind ein Buchstabe, eine Form oder eine Silhouette.
- Achten Sie auf Kontrast. Das Symbol sitzt auf dem Hintergrund des Browsers, und der ist im einen Design hell und im anderen dunkel. Eine Form, die nur auf Weiß funktioniert, verschwindet im Dunkelmodus.
- Groß anfangen. Geben Sie mindestens ein 256-px-Bild hinein, damit die größte Größe nicht hochgerechnet werden muss; die kleineren entstehen durch Verkleinern, und dabei geht Detail gnädig verloren.
Das Favicon auf Ihre Website bringen
Eine favicon.ico im Stammverzeichnis reicht jedem Browser, denn dort schauen alle von sich aus nach. Wer es ausdrücklich haben oder zusätzlich ein PNG ausliefern will, setzt ein link-Tag in den head der Seite: <link rel="icon" href="/favicon.ico" sizes="any">. Viele Websites stellen der .ico-Datei ein 180-px-PNG für apple-touch-icon zur Seite, das Sie hier ebenfalls erzeugen können, indem Sie die Ausgabe wieder auf PNG stellen und die Größe ändern.
Wenn nach dem Austausch weiterhin das alte Symbol erscheint, liegt das am Zwischenspeicher und nicht an einer kaputten Datei: Browser halten Favicons sehr lange fest. Ein harter Neuladevorgang oder ein angehängtes ?v=2 im link-Tag löst das.
Andere Formate aus demselben Werkzeug
Der Konverter schreibt auch PNG, JPG und WebP und kann auf eine Zielgröße in KB komprimieren. Wenn Sie wegen einer schlichten Umwandlung statt eines Symbols hier sind, starten PNG in JPG und PNG in WebP gleich mit diesen Formaten.