Text-Favicon-Icon-Generator
Recommended to use 1-2 characters for best results
Text zu Icon
Geben Sie beliebigen Text ein, generieren Sie automatisch professionelle Favicons, unterstützt vielfältige Schriften und Stile
Stilanpassung
Umfangreiche Anpassungen inklusive Schriftart, Farbe, Hintergrundform und Hintergrundbild
Echtzeit-Vorschau
WYSIWYG-Echtzeitvorschau, Änderungen sofort sichtbar
Was ist ein Favicon?
Favicon (Abkürzung für favorite icon) ist ein kleines Icon, das in Browser-Tabs, Lesezeichen und anderen Interface-Elementen angezeigt wird.
Wie man Favicons verwendet
Um ein Favicon zu Ihrer Website hinzuzufügen, müssen Sie:
- Mit unserem Tool Favicons generieren und als ZIP herunterladen.
- ZIP entpacken und alle Dateien im Root Ihrer Seite ablegen.
- Im <head>-Bereich Ihrer Seite die entsprechenden Link-Tags hinzufügen.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">HTMLFavicon-Formate erklärt
ICO-Format (.ico)
Traditionelles Favicon-Format, kompatibel mit allen Browsern inklusive älterer Internet Explorer-Versionen.
PNG-Format (.png)
Modernes Browserformat mit transparentem Hintergrund, kleine Dateigröße.
Android Chrome-Icons
192x192 und 512x512 für PWA auf Android-Geräten.
Apple Touch-Icons
180x180 für iOS-Geräte, Apple versieht automatisch mit Rundungen und Glanz.
Text-Favicons entwerfen, die bei 16px lesbar bleiben
Text-Favicons stehen und fallen mit der Tab-Größe. Bei einem Text-zu-Favicon-Generator zählen diese Parameter mehr als bei jedem bildbasierten Werkzeug – was im 512px-Preview scharf aussieht, kann in einem echten Browser-Tab zu einem unleserlichen Klecks werden.
Schriftfamilie
Schwere serifenlose Schriften (Arial Black, Helvetica Bold, Futura) überstehen 16×16 am besten. Die feinen Striche von Serifen-, Schreib- und Schmalschriften verschwinden in Tab-Größe oft komplett, selbst wenn sie im Preview knackig wirken.
Zeichenanzahl
Ein Buchstabe ist ideal. Ein Zweibuchstaben-Monogramm funktioniert, wenn Sie die Schriftgröße eine Stufe reduzieren; drei oder mehr Zeichen sind in einem 16-Pixel-Tab unlesbar – längeren Text heben Sie sich für das 180×180 Apple-Touch-Icon auf.
Vordergrund-/Hintergrundkontrast
Ziel ist ein Kontrastverhältnis über 7:1. Tabs rendern in hellen und dunklen Browser-Themes: Mittelgrauer Text auf transparentem Hintergrund verschwindet in einem davon, gefüllte Formen mit weißem Text bleiben in beiden lesbar.
Hintergrundform
Ein Eckradius von 15-20 % wirkt bei jeder Größe wie ein modernes App-Icon. Vollständig transparente Hintergründe wirken im Preview sauber, schweben aber unlesbar über dunklen Tab-Leisten – prüfen Sie beide Themes vor dem Veröffentlichen.
Abstand (Padding)
Halten Sie das Glyph innerhalb von 60-70 % der Canvas. Browser zeichnen Favicons kleiner als die Nenngröße (bei hochauflösenden Displays ein 16px-Icon in einem größeren Slot) – randnahe Glyphen werden visuell beschnitten.