App-Icons mit KI hinzufügen: ohne manuelle Schritte
Der alte Weg: einen Generator öffnen, ein Bild hochladen, ein Zip herunterladen, es entpacken, Dateien nach public/ kopieren, zwanzig link-Tags von Hand einfügen. Der neue Weg: Sag deinem Agenten "füg ein Favicon hinzu" und es landet im Repository, der head ist gepatcht, fertig.
So läuft das Ganze ab
- 1
Du fragst
Ein Satz in Claude Code, Cursor oder einem beliebigen MCP-fähigen Agenten. Keine Assets vorzubereiten.
- 2
Er generiert
favicon.ico, jede PNG-Größe, apple-touch, Android-Icons, theme-abhängig hell/dunkel und manifest.json.
- 3
Er installiert
Die Dateien werden in dein Static-Verzeichnis geschrieben, die richtigen <head>-Tags werden deinem Layout hinzugefügt, nichts von Hand zu verschieben.
Zwei Wege, es einzubinden
Beide sind abgesehen von einem einmaligen Setup Zero-Config, und beide schreiben die Dateien direkt in dein Projekt.
Option A: die appicons-Skill
Open Source, in deinen Agenten eingebunden
- Bringt dem Agenten bei, aus deiner Absicht ein Icon-Set zu machen und es zu installieren.
- Du redest einfach mit ihm, ohne Formate oder Größen auswählen zu müssen.
- Unter der Haube löst er deine Formulierung in eine Quelle auf, ruft die favicontools.com-API auf und entpackt das Ergebnis nach public/.
Option B: der MCP-Server von Favicon Tools
Zwei Tools, ergänzt im Werkzeugkasten deines Agenten
- search_inputs, um Optionen zu entdecken, generate_iconset, um das Set zu erzeugen.
- Liefert CDN-URLs für jede Datei plus ein fertig einfügbares head-Snippet.
- Liefert standardmäßig ein vollständiges Set pro Stage (ein sauberes Produktions-Icon plus mit Badge versehene Staging-/Dev-Varianten), sodass der Agent im selben Aufruf Icons pro Umgebung einrichten kann.
Mit der Skill sprechen
"Add a fox favicon to this app."
"Generate app icons for this site from our logo at public/logo.svg."
"Give this project a proper favicon using the React logo."
"Make me a favicon from https://example.com/mark.png."Vier Prompts, die alle zu einem vollständigen, installierten Icon-Set führen.
Den MCP-Server hinzufügen
// .mcp.json
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}Ein Eintrag, und der Agent hat beide Tools. Die Voreinstellung pro Stage sorgt dafür, dass Icons pro Umgebung aus demselben Aufruf zurückkommen.
Du beschreibst es in einfachem Deutsch
Du wählst nie Icon-Formate oder -Größen aus. Du sagst, was du willst; der Agent bildet das auf eine Quelle ab.
| Was du sagst | Was der Agent verwendet |
|---|---|
| Ein Emoji oder eine Vibe | Ein Iconify-Name wie noto:fox oder twemoji:rocket |
| Eine Marke / ein Produkt | simple-icons:stripe, logos:github-icon |
| Dein eigenes Logo | Der Dateipfad, z. B. ./public/logo.svg |
| Eine Bild-URL | Die URL, serverseitig gerastert |
Wie "fertig" aussieht
| Was landet | Detail |
|---|---|
| Icon-Dateien | Alle in public/ (oder app/ bei Next.js). |
| Head-Tags | Ein vollständiger <head>-Block oder Layout-Metadaten, die darauf verweisen. |
| manifest.json | Mit dem echten Namen deiner App und der start_url. |
| Altes favicon.ico | Entfernt, damit der Cache nicht den Platzhalter ausliefert. |