Deine neue App wirkt ohne Favicon unfertig
Du hast das Feature ausgeliefert, die Datenbank angeschlossen, auf eine echte URL deployt, und der Browser-Tab zeigt immer noch ein leeres Blatt Papier. Es ist ein winziges 16×16-Quadrat, und es sagt jedem Besucher leise, dass das Produkt nicht fertig ist.
Warum es immer passiert
Favicons sind das letzte 1 %, das niemand einplant. Beim Scaffolding eines Projekts bekommst du ein Platzhalter-Icon gratis, also schlägt die Warnung nie an, und der Platzhalter fährt bis in die Produktion mit.
Ein ordentliches Set von Hand zu erstellen ist echt nervig: ein Dutzend Größen exportieren, ein ICO bauen, ein Manifest von Hand schreiben, zwanzig link-Tags einfügen. Also wird es auf "später" verschoben, und später kommt nie.
Warum ein leerer Tab dich etwas kostet
Das Tab-Icon ist deine Marke in ihrer kleinsten Form. Wenn jemand 30 Tabs offen hat, ist das Favicon der einzige Weg, deinen wiederzufinden. Ein leeres ist unsichtbar.
Es ist außerdem das billigste Glaubwürdigkeitssignal, das es gibt. Ein scharfes Icon wirkt wie "ein echtes Produkt", ein leeres wie "ein Wochenendprototyp", selbst wenn der Code darunter exzellent ist.
Das Quadrat, das alle wirklich sehen
Die Anzeichen für ein fehlendes Icon
Wenn eines davon auf deiner Live-Site zutrifft, sehen die Besucher eine unfertige App:
Ein leeres Icon einer Seite mit umgeknickter Ecke, das im Browser-Tab sitzt.
Der Framework-Standard (das Logo von Next.js, Vite oder Create React App), der in die Produktion geht.
Ein verpixelter, verzerrter Screenshot, den jemand in public/favicon.ico geworfen hat, damit die Warnung verschwindet.
Icons, die nicht zusammenpassen: eins im Tab, ein anderes auf dem iOS-Homescreen, nichts im PWA-Installationsdialog.
Behebe es in einem Schritt
Das ganze Problem verschwindet in dem Moment, in dem du aufhörst, Icons als lästige Handarbeit zu behandeln. Der Ablauf ist kurz:
- 1
Wähle eine Quelle
Ein Emoji, ein Markenzeichen, deine Logo-Datei oder eine Bild-URL.
- 2
Generiere das vollständige Set
favicon.ico, jede PNG-Größe, apple-touch-icon, Android-Icons und manifest.json.
- 3
Installiere es
Leg die Dateien in public/ und die link-Tags in deinen <head> (oder app/layout.tsx).
- 4
Verifiziere es
Prüfe, ob es im Tab, auf dem Handy und im Installationsdialog rendert, bevor du es für fertig erklärst.
Von Hand oder per Agent
Von Hand
Der Grund, warum es aufgeschoben wird
- Ein Dutzend Größen exportieren.
- Ein ICO bauen.
- Ein Manifest von Hand schreiben.
- Zwanzig link-Tags einfügen.
Lass deinen Coding-Agenten das machen
Start hereClaude Code, Cursor oder ein beliebiger MCP-fähiger Agent
- Du öffnest überhaupt nie einen Favicon-Generator.
- Icons werden erstellt und direkt ins Repository installiert: Dateien geschrieben, <head> gepatcht.
- Alles aus einem einzigen Prompt wie "füg dieser App ein Fuchs-Favicon hinzu".