हर गंभीर प्रोजेक्ट को ब्राउज़र टैब में साफ़ favicon, iOS के लिए ऐपल टच आइकन और ऐंड्रॉइड व PWA के लिए ऐप आइकन चाहिए। यह टूल एक ही इमेज से सब बनाने में मदद करता है: स्क्वायर लोगो अपलोड करें, साइज़ चुनें, PNG डाउनलोड करें और HTML स्निपेट साइट में कॉपी करें।
favicon और ऐप आइकन क्यों ज़रूरी हैं
- Favicon — ब्राउज़र टैब और बुकमार्क में छोटा आइकन। इसके बिना टैब सामान्य दिखता है और आपकी ब्रांड कम पहचानी जाती है।
- ऐपल टच आइकन — जब यूज़र iPhone/iPad पर साइट को होम स्क्रीन में जोड़ते हैं तब इस्तेमाल होता है। सही साइज़ (जैसे 180×180) से आइकन शार्प रहता है।
- PWA / ऐंड्रॉइड आइकन — "होम स्क्रीन में जोड़ें" और इंस्टॉल के लिए ज़रूरी। आम साइज़: 192×192 और 512×512।
एक ही स्क्वायर सोर्स इमेज सब कवर कर सकती है। जनरेटर पूरी तरह ब्राउज़र में चलता है; आपका लोगो डिवाइस से बाहर नहीं जाता।
सुझाई गई सोर्स इमेज
कम से कम 512×512 पिक्सल की स्क्वायर इमेज (PNG या SVG) इस्तेमाल करें। ज़्यादा रिज़ॉल्यूशन ठीक है; टूल स्केल कर देगा। बहुत छोटी या खिंची हुई इमेज से बचें ताकि हाई-DPI स्क्रीन पर आइकन शार्प रहें।
टूल के साथ जल्दी शुरू करें
- अपलोड — "फ़ाइल चुनें" पर क्लिक करें और अपना लोगो चुनें (PNG या SVG, स्क्वायर, 512×512 या बड़ा)।
- बैकग्राउंड — अगर लोगो में ट्रांसपैरेंसी है तो बैकग्राउंड रंग चुनें; स्निपेट में यह
theme-colorके तौर पर भी जाता है। - साइज़ — जो साइज़ चाहिए वे चुनें (favicon 16/32, Apple 180, PWA 192/512 आदि)।
- डाउनलोड — किसी प्रीव्यू पर क्लिक करके उस साइज़ को PNG में डाउनलोड करें, या सब एक साथ पाने के लिए "सभी ZIP में डाउनलोड करें"।
- स्निपेट — HTML ब्लॉक कॉपी करके साइट के
<head>में पेस्ट करें। PNG सर्वर पर अपलोड करें (जैसे/assets/icons/) और ज़रूरत हो तो स्निपेट में पाथ अपडेट करें।
फ़ाइलें कहाँ रखें
आम सेटअप:
- favicon और आइकन PNG को
/assets/icons/जैसे फ़ोल्डर में या रूट में रखें। - स्निपेट में
hrefवैल्यू इन पाथ पर पॉइंट करें (जैसे/assets/icons/favicon-32x32.png)। - PWA के लिए 192×192 और 512×512 आइकन के लिए वही पाथ के साथ
site.webmanifestजोड़ें।
संक्षेप में
Favicon और ऐप आइकन जनरेटर से एक लोगो से सभी ज़रूरी साइज़ और <head> के लिए तैयार स्निपेट मिलता है। अच्छे रिज़ॉल्यूशन की स्क्वायर इमेज इस्तेमाल करें, PNG डाउनलोड करें और स्निपेट प्रोजेक्ट में लगा दें।