Favicon-Generator
Zieh dein Logo in den Favicon-Generator, und du bekommst alle Favicon-Dateien, vom 16-Pixel-Icon im Browser-Tab bis zum App-Icon mit 512 Pixeln, dazu das HTML zum Einfügen. Alles passiert in deinem Browser, dein Bild wird also nie hochgeladen.
Qwyzzle
Summit Roasters
Fox EsportsZieh dein Logo hierher
PNG, JPG, WebP oder SVG. Am besten quadratisch, ab 512 px.
Erstellt in deinem Browser. Dein Bild wird nie hochgeladen.
Was ein Favicon ist und wo es auftaucht
Ein Favicon ist das kleine quadratische Icon, das für deine Website steht. Der Name ist kurz für „favorite icon“: Der erste Browser, der eins anzeigte, setzte es neben deine Lesezeichen, die dort „Favoriten“ hießen.
Du siehst es in Browser-Tabs neben dem Seitentitel, 16 Pixel breit oder 32 auf einem schärferen Bildschirm. Es markiert deine Website auch in den Lesezeichen und im Verlauf. Speichert jemand deine Website auf dem Startbildschirm seines Smartphones, wird es zum App-Icon. Und Google zeigt es in den Suchergebnissen neben dem Namen deiner Website.
Überall hat es dieselbe Aufgabe: zwischen anderen Icons auf einen Blick erkannt zu werden.
Warum aus einem Favicon mehrere Dateien werden
Jeder dieser Orte kam zu einer anderen Zeit dazu und verlangt seine eigene Datei. Der Favicon-Generator oben erstellt sie alle aus einem einzigen Bild.
Browser-Tabs, Lesezeichen und Verlauf nutzen favicon.ico, eine einzige Datei mit Versionen in 16, 32 und 48 Pixeln. Es ist das älteste Format: Wenn eine Seite kein Icon angibt, suchen Browser bis heute im Hauptverzeichnis der Website nach favicon.ico.
Startest du mit einem SVG, bekommst du zusätzlich favicon.svg. Browser, die SVG-Icons darstellen können, nehmen dann diese Datei. Weil sie aus Formen statt aus Pixeln besteht, bleibt sie auf jedem Bildschirm scharf.
iPhones und iPads nutzen apple-touch-icon.png mit 180 × 180 Pixeln, wenn jemand deine Website zum Startbildschirm hinzufügt. Ein iPhone füllt transparente Flächen mit Schwarz, deshalb bekommt dieses Icon immer einen festen Hintergrund: deine Farbe oder Weiß, wenn du „Transparent“ gewählt hast.
Android-Smartphones und Websites, die aus dem Browser heraus als App installiert werden, nutzen icon-192.png und icon-512.png. Sie finden die beiden über site.webmanifest: eine kleine Textdatei, die Browsern sagt, wo die größeren Icons liegen und wie deine Website heißt (falls du im Tool einen Namen eingegeben hast).
Die einzelnen PNGs von 16 bis 48 Pixeln sind eine Reserve für Dienste, die ein PNG verlangen. Für die Suchergebnisse liest Google die Icon-Links im HTML deiner Startseite.
So baust du die Favicon-Dateien in deine Website ein
Bearbeitest du die Dateien deiner Website selbst oder macht das jemand für dich, sind es zwei Schritte.
Erstens: Entpacke den Download und leg die Dateien ins Hauptverzeichnis deiner Website, also in den obersten Ordner, in dem auch die Startseite liegt. Zum Testen hängst du /favicon.ico an die Adresse deiner Website: Das Icon sollte sich öffnen.
Zweitens: Füge die HTML-Zeilen aus der README (das Tool zeigt sie auch an) in den Head-Bereich deiner Seiten ein. Das ist der Abschnitt oben im HTML, in dem der Seitentitel steht. Es gibt je eine Zeile für die ICO-Datei, das Apple-Touch-Icon und das Manifest, dazu eine für das SVG, falls du eins hast.
Meist teilen sich alle Seiten eine Seitenvorlage, du fügst die Zeilen also nur einmal ein. Lösch vorher alte Icon-Zeilen, sonst greifen Browser womöglich weiter zum alten Icon.
Mit einem Website-Baukasten sparst du dir beide Schritte: Lade icon-512.png in der Einstellung für das Website-Icon hoch, und der Baukasten fügt das HTML für dich ein.
So funktioniert dein Logo auch mit 16 Pixeln
Bei 16 × 16 besteht dein ganzes Icon aus 256 winzigen Farbquadraten. Die meisten Logos wurden nicht dafür gezeichnet.
Fang mit dem Symbol an, nicht mit dem Namen: Quetschst du einen Namen mit acht Buchstaben in 16 Pixel, bleiben jedem Buchstaben zwei Pixel Breite. Kein Symbol? Dann nimm den Anfangsbuchstaben, groß und kräftig. Fette Buchstaben überstehen das Verkleinern viel länger als dünne.
Dann nimm Details raus. Sehr dünne Linien und kleine Lücken verschwimmen mit ihrer Umgebung, und ein Slogan wird zum Klecks.
Entscheidend ist Hell gegen Dunkel, nicht die Farben selbst. Je nach Browser-Design sind Tabs hell oder dunkel, und ein marineblaues Icon verschwindet in einer dunklen Tab-Leiste. Ist dein Logo dunkel, gib ihm im Tool einen hellen Hintergrund, oder umgekehrt.
Der Rand, also der Platz zwischen deinem Logo und der Kante des Quadrats, ist ein Kompromiss. Zu viel Rand, und das Logo schrumpft im Tab. Zu wenig, und ein iPhone, das Icons auf dem Startbildschirm abrundet, schneidet die Ecken deines Logos ab.
Schau dir zum Schluss die Vorschauen im hellen und dunklen Tab oben in echter Größe an, ohne hineinzuzoomen. Unser kostenloser Logo-Checker geht noch weiter: Er verkleinert dein Logo auf 32 Pixel und misst, wie viel Detail übrig bleibt.
Wann du dein Logo neu zeichnen solltest, statt es zu verkleinern
Manchmal ist nichts zu retten. Bei einer detailreichen Illustration oder einem 3D-Look, der von Schattierungen lebt, sind die Details das Design, und bei 16 Pixeln sind sie weg. Dieses Tool kann dein Logo skalieren, aber nicht neu zeichnen.
Ein schlechtes Logo ist es deshalb nicht, nur eins für größere Flächen. Zeichne bewusst eine kleine Version: ein vereinfachtes Symbol oder deinen Anfangsbuchstaben in deiner Markenschrift. Behalte deine Farben und etwas von der Form, dann bringen die Leute beides zusammen. Wir nehmen jedes Mal lieber einen klaren Anfangsbuchstaben als eine verschwommene Miniatur.
Du brauchst ein neues Logo? Unser KI-Logo-Generator gestaltet eins aus deinem Markennamen, auf Wunsch mit einer kurzen Beschreibung. Bei Logos aus unseren Logo-Vorlagen ist das Symbol als eigene Datei dabei, wenn sie eins haben, und zu jedem Logo, das du bei uns kaufst, gehören seine Favicon-Dateien.
Fragen zu Favicons
Er ist kostenlos, ohne Anmeldung und ohne Wasserzeichen. Und dein Bild bleibt bei dir: Das Tool arbeitet komplett in deinem Browser. Es erstellt alle Größen und das ZIP direkt auf deinem Gerät, und das Bild wird nie an unsere Server geschickt. Du kannst es also auch mit einem Logo nutzen, das du noch niemandem gezeigt hast.
Quadratisch und mindestens 512 Pixel an jeder Seite. Das größte Icon im Set hat 512 Pixel, also muss ein kleineres PNG, JPG oder WebP gestreckt werden, und die großen Icons werden unscharf. Das Tool sagt dir, wenn das passiert. Ein SVG hat diese Grenze nicht: Es besteht aus Formen statt aus Pixeln und bleibt deshalb in jeder Größe scharf. Ein breites Logo füllt nur einen schmalen Streifen des Quadrats, starte also mit deinem Symbol oder Anfangsbuchstaben.
Am besten alle drei, denn verschiedene Browser und Smartphones verlangen verschiedene Dateien, und das HTML aus dem Tool sagt jedem Gerät, welche Datei es nehmen soll. Die ICO-Datei versteht jeder Browser. Die PNGs sind für Smartphones und installierte Apps, dazu kommen Reserven in den kleinen Größen. Das SVG, das du bekommst, wenn du mit einem SVG startest, bleibt in Browsern, die es unterstützen, auf jedem Bildschirm scharf.
Wahrscheinlich zeigt dein Browser eine gespeicherte Kopie. Browser halten Favicons viel länger fest als den Rest einer Seite, deshalb kann das alte Icon bleiben, obwohl die neuen Dateien schon online sind. Probier ein vollständiges Neuladen, das die Seite ohne ihre gespeicherten Dateien lädt: Strg+Umschalt+R unter Windows, Cmd+Umschalt+R auf dem Mac (Wahltaste+Cmd+R in Safari). Hilft das nicht, öffne die Adresse deiner Website mit /favicon.ico am Ende und lade diese Seite neu, oder schau in einem privaten Fenster nach. Die Browser anderer Leute ziehen mit der Zeit nach.
In die Einstellungen des Baukastens statt in einen Ordner. Die meisten Website-Baukästen und Shopsysteme haben eine Einstellung für das Website-Icon oder Favicon, in der du ein quadratisches PNG hochlädst. Nimm icon-512.png, die größte Datei im ZIP, damit der Baukasten genug Material für die kleineren Größen hat. Verlangt die Einstellung eine bestimmte Größe, nimm die passende Datei. Baukästen fügen das HTML für dich ein, die README kannst du also überspringen.
Google übernimmt ein neues Favicon, wenn sein Crawler, also das Programm, das Webseiten für Google liest, deine Startseite das nächste Mal besucht. Einen festen Zeitplan dafür gibt es nicht. Google braucht ein quadratisches Bild und den Icon-Link im HTML deiner Startseite, prüf also, ob beides da ist. Was Google danach wann anzeigt, entscheidet Google selbst, gib dem Ganzen also etwas Zeit.
Noch kein Logo? Erstell dir eins.
Gestalte es mit unserem KI-Logo-Generator oder mit einer Vorlage im Logo-Maker. Jedes Logo, das du bei DepthLogo herunterlädst, bringt seine Favicons schon mit.