Sie haben bereits ein Logo. Was Sie brauchen, ist dieses Logo verwandelt in den Haufen winziger Icon-Dateien, den ein Browser erwartet – eine favicon.ico, eine Handvoll PNGs in bestimmten Größen, ein Web-Manifest und das HTML, um alles zu verdrahten. Diese Umwandlung ist mechanisch, und Sie können sie in etwa einer Minute erledigen, ohne etwas zu installieren.
Der Haken ist, dass sich nicht jedes Logo anmutig verkleinert. Das hier behandelt also sowohl den schnellen Weg als auch, wie Sie ein Logo korrigieren, das bei 16 Pixeln zu Matsch wird.
Die Kurzfassung
- Holen Sie Ihr Logo als quadratisches Bild – idealerweise 512×512 oder größer, auf transparentem oder solidem Hintergrund.
- Ziehen Sie es in den Favicon-Generator.
- Laden Sie den erzeugten Satz herunter und legen Sie die Dateien in Ihr Seiten-Root.
- Fügen Sie das bereitgestellte HTML-Snippet in Ihr
<head>ein.
Das ist die ganze Arbeit. Der Generator gibt favicon.ico, PNGs in 16, 32, 48, 180, 192 und 512, ein webmanifest und die exakten <link>-Tags aus – Sie schneiden also nicht sechs Bilder von Hand zu oder raten an der Manifest-Syntax.
Bereiten Sie Ihr Logo zuerst vor – hier wird Qualität gewonnen oder verloren
Ein Favicon lebt bei 16×16 im Browser-Tab. Welches Detail diese Größe nicht übersteht, ist verschwendet. Verbringen Sie zwei Minuten hier, und das Ergebnis sieht überall scharf aus.
Machen Sie es quadratisch. Favicons sind quadratisch. Ein breites, horizontales Logo bekommt Letterbox-Ränder oder wird gequetscht. Schneiden Sie auf das erkennbarste Element zu – meist die Marke oder eine einzelne Initiale – und zentrieren Sie es in einem quadratischen Rahmen.
Lassen Sie die Wortmarke weg. Ihr voller Firmenname wird bei Tab-Größe nicht leserlich sein. „Acme Corporation" wird ein grauer Fleck. Behalten Sie das Symbol oder einen einzelnen Buchstaben und lassen Sie den Tab-Titel den Namen tragen.
Prüfen Sie den Kontrast gegen beide Themes. Browser-Tabs kommen hell und dunkel. Ein dunkelblaues Icon verschwindet auf einem dunklen Tab; ein blasses Icon verschwindet auf einem hellen. Ist Ihre Marke eine flache Farbe, stellen Sie sicher, dass diese Farbe auf beiden lesbar ist. Eine dezente Kontur oder ein kleiner solider Hintergrund-Chip kann helfen.
Lassen Sie Freiraum. Fügen Sie etwas Abstand innerhalb des Quadrats hinzu, damit das Icon nicht an die Kanten drängt. Es wirkt in jedem Platz ausgewogener.
Starten Sie groß. Eine 512×512-Quelle (oder größer) gibt dem Generator sauberes Detail zum Herunterskalieren. Ein winziges Logo zuerst hochzuskalieren backt nur Unschärfe ein.
Transparenter oder solider Hintergrund?
Beides funktioniert – es hängt vom gewünschten Look ab.
- Transparent lässt den Tab- oder Startbildschirm-Hintergrund durchscheinen. Sauber und modern, und es passt sich hellen/dunklen Umgebungen an. Am besten, wenn Ihre Marke eine deutliche Form ist.
- Solider Hintergrund-Chip (ein farbiges abgerundetes Quadrat hinter der Marke) garantiert, dass das Icon lesbar ist, egal was dahinter ist. Das tun die meisten App-Icons, und es ist die sicherere Wahl, wenn Ihr Logo dünn oder kontrastarm ist.
Im Zweifel ist ein solider Chip in Ihrer Markenfarbe die robuste Option – er verschwindet nie in einem passenden Hintergrund.
Nach dem Download: wohin die Dateien gehen
Der Generator reicht Ihnen einen Satz Dateien und ein Snippet. Zwei Platzierungsregeln decken es ab:
favicon.icogeht in Ihr Seiten-Root (/favicon.ico). Browser und Windows suchen es dort namentlich, auch ohne<link>-Tag.- Alles andere kann liegen, wo Sie wollen, solange die Pfade im HTML-Snippet übereinstimmen. Die meisten legen alle ins Root und fügen das Snippet unverändert ein.
Dann ist es nur das <head>-Snippet – Icon-Links, das apple-touch-icon und die Manifest-Referenz. Einfügen, deployen, hart neu laden, und Sie sollten Ihr Logo im Tab sehen.
Warum es im Browser tun?
Weil Ihr Logo nie Ihren Rechner verlässt. Der ganze Prozess – das Bild lesen, auf jede Dimension skalieren, die .ico packen, das Manifest schreiben – passiert lokal in Ihrem Browser mit Canvas. Nichts wird auf einen Server hochgeladen, es gibt keine Anmeldung oder Wasserzeichen, und nach Ihrem ersten Besuch funktioniert das Werkzeug offline. Für ein Markenasset, das Sie womöglich noch nicht veröffentlicht haben, ist es von Drittanbieter-Servern fernzuhalten der vernünftige Standard.
Sobald Ihr Logo quadratisch, kontrastreich und klein leserlich ist, ist das Erzeugen des vollen Satzes der leichte Teil.