फ़ेविकॉन जनरेटर
एक बार इमेज अपलोड करें, हर ज़रूरी फ़ेविकॉन साइज़ डाउनलोड करें: ब्राउज़र टैब, iOS होम स्क्रीन और Android/PWA आइकन, साथ ही उन्हें इस्तेमाल करने के लिए HTML.
इमेज चुनने के लिए क्लिक करें, या उसे यहां खींचकर लाएं
चौकोर इमेज सबसे अच्छा काम करती है. आपकी डिवाइस पर ही रहती है, कुछ भी अपलोड नहीं होता.
आपको क्या मिलता है
एक .zip जिसमें ब्राउज़र टैब के लिए 16×16, 32×32 और 48×48 PNG, iOS होम स्क्रीन के लिए 180×180 apple-touch-icon, और Android और PWA मैनिफ़ेस्ट के लिए 192×192 / 512×512 PNG होते हैं, साथ ही एक टेक्स्ट फ़ाइल जिसमें आपकी साइट के <head> में पेस्ट करने के लिए बिल्कुल सही <link> टैग होते हैं.
यह कैसे काम करता है
आपकी इमेज को पहले सबसे बड़े सेंटर्ड स्क्वायर में क्रॉप किया जाता है जो उसमें फिट हो सके, फिर drawImage() की एक ही कॉल उस स्क्वायर को क्रॉप करके तय साइज़ के कैनवस पर एक साथ स्केल कर देती है, इसलिए नॉन-स्क्वायर इमेज खिंचती नहीं, बल्कि क्रॉप होकर निकलती हैं. यह छह बार होता है, हर साइज़ के लिए एक: 16, 32, 48, 180, 192 और 512 पिक्सल, और हर कैनवस को PNG के रूप में एक्सपोर्ट किया जाता है. ज़िप आर्काइव जावास्क्रिप्ट में बाइट-बाय-बाइट जोड़ा जाता है, बिना किसी सर्वर-साइड कंप्रेशन के, और इसमें एक टेक्स्ट फ़ाइल भी होती है जिसमें आपकी साइट के <head> में पेस्ट करने के लिए सही <link> टैग होते हैं.
आपको .ico फ़ाइल नहीं दिखेगी: सभी आधुनिक ब्राउज़र सीधे PNG आइकॉन स्वीकार करते हैं. जनरेट किए गए साइज़ में से, 32x32 आधुनिक स्क्रीन पर ब्राउज़र टैब के लिए है, 180x180 iOS होम-स्क्रीन शॉर्टकट के लिए इस्तेमाल होता है, और 192x192 व 512x512 दोनों साइज़ प्रोग्रेसिव वेब ऐप स्पेसिफिकेशन को चाहिए. एक आइकॉन जो 512px पर शानदार लगता है, अक्सर 16px पर धुंधला हो जाता है, इसलिए बारीक डिटेल की बजाय बोल्ड, साफ़, हाई-कॉन्ट्रास्ट शेप को तरजीह दें.
आपकी ड्रॉप की गई इमेज पूरी तरह आपके ब्राउज़र की मेमोरी में डिकोड, क्रॉप, रीसाइज़ और कंप्रेस होती है, इस पेज पर कोई अपलोड स्टेप है ही नहीं. जनरेट करते समय नेटवर्क टैब देखें: बस तैयार ज़िप फ़ाइल मेमोरी से आपके डाउनलोड फ़ोल्डर में जाती है.
सामान्य प्रश्न
.ico फ़ाइल क्यों नहीं?
मॉडर्न ब्राउज़र, iOS और Android सभी सीधे PNG फ़ेविकॉन सपोर्ट करते हैं, और इस डाउनलोड में हर साइज़ यही है. .ico फ़ाइल पहले कई साइज़ को एक कंटेनर में बंडल करती थी, लेकिन अब यह ज़रूरी नहीं, शामिल किया गया HTML स्निपेट ब्राउज़र को हर संदर्भ के लिए सही PNG की तरफ़ इशारा करता है.
मुझे कौन-सी इमेज अपलोड करनी चाहिए?
चौकोर इमेज सबसे अच्छा काम करती है और साफ़-सुथरी क्रॉप होती है. गैर-चौकोर इमेज को रीसाइज़ करने से पहले अपने आप बीच से चौकोर आकार में क्रॉप कर दिया जाता है, इसलिए आपके लोगो का ज़रूरी हिस्सा केंद्र के पास होना चाहिए.
क्या मेरी इमेज कहीं अपलोड होती है?
नहीं, हर साइज़ canvas API का इस्तेमाल करके आपके ब्राउज़र में लोकली जनरेट होता है. कुछ भी सर्वर पर नहीं भेजा जाता.