AI से app icons जोड़ें: कोई manual step नहीं
पुराना तरीका: एक generator खोलो, image upload करो, zip download करो, unzip करो, files को public/ में copy करो, बीस link tags हाथ से paste करो। नया तरीका: अपने agent से कहो "add a favicon" और यह repo में आ जाता है, head patch हो जाता है, हो गया।
पूरी प्रक्रिया कैसे चलती है
- 1
आप कहते हैं
Claude Code, Cursor, या किसी भी MCP-aware agent में एक वाक्य। तैयार करने के लिए कोई asset नहीं।
- 2
यह generate करता है
favicon.ico, हर PNG size, apple-touch, Android icons, theme-aware light/dark, और manifest.json।
- 3
यह install करता है
Files आपकी static dir में लिखी जाती हैं, सही <head> tags आपके layout में जुड़ जाते हैं, हाथ से कुछ भी move करने की ज़रूरत नहीं।
इसे जोड़ने के दो तरीके
दोनों एक-बार के setup के अलावा zero-config हैं, और दोनों files को सीधे आपके project में लिखते हैं।
विकल्प A: appicons skill
Open source, आपके agent में जोड़ा गया
- Agent को सिखाता है कि intent को कैसे एक icon set में बदलकर install करना है।
- आप बस इससे बात करते हैं, चुनने के लिए कोई formats या sizes नहीं।
- अंदर ही अंदर यह आपके शब्दों को एक source में resolve करता है, favicontools.com API को call करता है, और नतीजे को public/ में unpack कर देता है।
विकल्प B: Favicon Tools MCP server
दो tools, आपके agent के toolbelt में जोड़े गए
- options खोजने के लिए search_inputs, set बनाने के लिए generate_iconset।
- हर file के लिए CDN URLs देता है, साथ ही paste करने के लिए तैयार head snippet।
- default रूप से पूरा per-stage set लौटाता है (एक साफ़ production icon, साथ ही badge वाले staging/dev variants), ताकि agent उसी call में per-environment icons wire कर सके।
Skill से बात करना
"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."चार prompts, जो सभी एक पूरे, installed icon set में resolve हो जाते हैं।
MCP server जोड़ना
// .mcp.json
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}एक entry, और agent के पास दोनों tools आ जाते हैं। per-stage default का मतलब है कि per-environment icons उसी call में वापस आ जाते हैं।
आप इसे सादी भाषा में बताते हैं
आप कभी icon formats या sizes नहीं चुनते। आप बताते हैं कि आपको क्या चाहिए; agent उसे एक source से map कर देता है।
| आप क्या कहते हैं | Agent क्या इस्तेमाल करता है |
|---|---|
| एक emoji या vibe | noto:fox या twemoji:rocket जैसा एक Iconify name |
| एक brand / product | simple-icons:stripe, logos:github-icon |
| आपका अपना logo | file path, जैसे ./public/logo.svg |
| एक image URL | URL, server-side पर rasterize की गई |
"हो गया" कैसा दिखता है
| क्या आता है | विवरण |
|---|---|
| Icon files | सभी public/ में (या Next.js के लिए app/ में)। |
| Head tags | एक पूरा <head> block, या layout metadata, जो इन्हें reference करता है। |
| manifest.json | आपके असली app name और start_url के साथ। |
| पुराना favicon.ico | हटा दिया गया, ताकि cache placeholder न परोसे। |