आपका नया app favicon के बिना अधूरा लगता है
आपने feature ship किया, database wire किया, एक असली URL पर deploy किया, और browser tab अब भी एक खाली कागज़ का पन्ना दिखा रहा है। यह एक नन्हा 16×16 का चौकोर है, और यह चुपचाप हर visitor को बता देता है कि product अभी पूरा नहीं हुआ है।
ऐसा हमेशा क्यों होता है
Favicons वह आख़िरी 1% हैं जिन्हें कोई schedule नहीं करता। किसी project को scaffold करने पर आपको मुफ़्त में एक placeholder icon मिल जाता है, इसलिए चेतावनी कभी नहीं आती, और placeholder सीधे production तक चला जाता है।
हाथ से एक ठीक-ठाक set बनाना सचमुच झंझट भरा है: एक दर्जन sizes export करो, एक ICO बनाओ, हाथ से manifest लिखो, बीस link tags paste करो। तो इसे "बाद के लिए" टाल दिया जाता है, और वह बाद कभी नहीं आता।
खाली tab आपको महँगा क्यों पड़ता है
Tab icon आपकी brand अपने सबसे छोटे रूप में है। जब किसी के पास 30 tabs खुले हों, तो favicon ही आपके tab को दोबारा ढूँढने का एकमात्र तरीका होता है। खाली वाला अदृश्य होता है।
यह मौजूद सबसे सस्ता credibility signal भी है। एक साफ़ icon "असली product" जैसा लगता है; खाली वाला "weekend prototype" जैसा लगता है, भले ही नीचे का code शानदार हो।
वह चौकोर जो सबको सचमुच दिखता है
गायब icon के संकेत
अगर आपके live site पर इनमें से कोई भी सच है, तो visitors एक अधूरा app देख रहे हैं:
Browser tab में बैठा एक खाली page-with-a-corner-fold icon।
Framework का default (Next.js का, Vite का, या Create React App का logo) production में जाता हुआ।
एक pixelated, खिंचा हुआ screenshot जिसे किसी ने चेतावनी हटाने के लिए public/favicon.ico में डाल दिया।
मेल न खाते icons: tab में एक चीज़, iOS home screen पर दूसरी, PWA install prompt में कुछ नहीं।
इसे एक step में ठीक करें
पूरी समस्या उसी पल गायब हो जाती है जब आप icons को एक manual काम मानना बंद कर देते हैं। प्रक्रिया छोटी है:
- 1
एक source चुनें
एक emoji, एक brand mark, आपकी logo file, या एक image URL।
- 2
पूरा set generate करें
favicon.ico, हर PNG size, apple-touch-icon, Android icons, और manifest.json।
- 3
इसे install करें
Files को public/ में और link tags को अपने <head> में (या app/layout.tsx में) डालें।
- 4
इसे verify करें
"हो गया" कहने से पहले जाँचें कि यह tab में, mobile पर, और install prompt में render होता है।
हाथ से, या agent से
हाथ से
यही वजह है कि इसे टाल दिया जाता है
- एक दर्जन sizes export करना।
- एक ICO बनाना।
- हाथ से एक manifest लिखना।
- बीस link tags paste करना।
अपने coding agent से करवाएँ
Start hereClaude Code, Cursor, या कोई भी MCP-aware agent
- आप favicon generator कभी खोलते ही नहीं।
- Icons बनकर सीधे repo में install हो जाते हैं: files लिखी जाती हैं, <head> patch हो जाता है।
- सब कुछ एक ही prompt से, जैसे "add a fox favicon to this app."