आपके पास पहले से एक लोगो है। आपको चाहिए वह लोगो नन्ही आइकन फ़ाइलों के ढेर में बदला हुआ जिनकी एक ब्राउज़र उम्मीद करता है — एक favicon.ico, ख़ास साइज़ पर कुछ PNG, एक वेब मैनिफ़ेस्ट, और उन सबको जोड़ने वाली HTML। वह कन्वर्ज़न यांत्रिक है, और आप इसे कुछ भी इंस्टॉल किए बिना करीब एक मिनट में कर सकते हैं।
पेच यह है कि हर लोगो सुंदरता से छोटा नहीं होता। तो यह तेज़ रास्ता और ऐसे लोगो को कैसे ठीक करें जो 16 पिक्सेल पर धब्बा बन जाता है — दोनों कवर करता है।
छोटा वर्ज़न
- अपना लोगो एक वर्गाकार इमेज के रूप में पाएँ — आदर्श रूप से 512×512 या बड़ा, किसी पारदर्शी या ठोस बैकग्राउंड पर।
- इसे Favicon Generator में डालें।
- बनाया गया सेट डाउनलोड करें और फ़ाइलें अपनी साइट रूट में डालें।
- दिया गया HTML स्निपेट अपने
<head>में पेस्ट करें।
यही पूरा काम है। जेनरेटर favicon.ico, 16, 32, 48, 180, 192, और 512 पर PNG, एक webmanifest, और सटीक <link> टैग आउटपुट करता है — इसलिए आप छह इमेजें हाथ से क्रॉप नहीं कर रहे या मैनिफ़ेस्ट सिंटैक्स का अंदाज़ा नहीं लगा रहे।
पहले अपना लोगो तैयार करें — यहीं क्वालिटी जीती या हारी जाती है
एक फ़ेविकॉन ब्राउज़र टैब में 16×16 पर रहता है। जो भी डिटेल उस साइज़ को न झेल सके वह बर्बाद है। यहाँ दो मिनट बिताएँ और नतीजा हर जगह तीखा दिखता है।
इसे वर्गाकार बनाएँ। फ़ेविकॉन वर्गाकार होते हैं। एक चौड़ा, क्षैतिज लोगो लेटरबॉक्स या दबा हुआ हो जाएगा। सबसे पहचानने योग्य तत्व तक क्रॉप करें — आम तौर पर निशान या एक अकेला आद्याक्षर — और इसे एक वर्ग फ़्रेम में केंद्रित करें।
वर्डमार्क छोड़ें। आपकी कंपनी का पूरा नाम टैब साइज़ पर पढ़ने योग्य नहीं होगा। "Acme Corporation" एक धूसर धब्बा बन जाता है। प्रतीक, या एक अकेला अक्षर रखें, और नाम को टैब टाइटल ढोने दें।
दोनों थीम के ख़िलाफ़ कंट्रास्ट जाँचें। ब्राउज़र टैब हल्के और गहरे में आते हैं। एक गहरा-नेवी आइकन किसी गहरे टैब पर ग़ायब हो जाता है; एक फीका आइकन किसी हल्के पर ग़ायब हो जाता है। अगर आपका निशान एक सपाट रंग है, तो पक्का करें कि वह रंग दोनों पर पढ़ा जाए। एक हल्की आउटलाइन या एक छोटा ठोस बैकग्राउंड चिप मदद कर सकता है।
साँस लेने की जगह छोड़ें। वर्ग के अंदर थोड़ी पैडिंग जोड़ें ताकि आइकन किनारों से न ठुँसे। यह हर स्लॉट में ज़्यादा संतुलित दिखेगा।
बड़े से शुरू करें। एक 512×512 (या बड़ा) सोर्स जेनरेटर को छोटा करने के लिए साफ़ डिटेल देता है। किसी नन्हे लोगो को पहले बड़ा करना बस धुँधलापन पका देता है।
पारदर्शी या ठोस बैकग्राउंड?
दोनों काम करते हैं — यह उस लुक पर निर्भर करता है जो आप चाहते हैं।
- पारदर्शी टैब या होम-स्क्रीन बैकग्राउंड को आर-पार दिखने देता है। साफ़ और आधुनिक, और यह हल्के/गहरे परिवेश के अनुकूल होता है। तब सबसे अच्छा जब आपका निशान एक अलग आकार हो।
- ठोस बैकग्राउंड चिप (निशान के पीछे एक रंगीन गोल वर्ग) गारंटी देता है कि आइकन पढ़ा जाए चाहे उसके पीछे कुछ भी हो। यही ज़्यादातर ऐप आइकन करते हैं, और यह ज़्यादा सुरक्षित चुनाव है अगर आपका लोगो पतला या कम-कंट्रास्ट हो।
शक हो तो अपने ब्रांड रंग में एक ठोस चिप मज़बूत विकल्प है — यह कभी किसी मेल खाते बैकग्राउंड में ग़ायब नहीं होता।
डाउनलोड करने के बाद: फ़ाइलें कहाँ जाती हैं
जेनरेटर आपको फ़ाइलों का एक सेट और एक स्निपेट सौंपता है। दो प्लेसमेंट नियम इसे कवर करते हैं:
favicon.icoआपकी साइट रूट (/favicon.ico) पर जाता है। ब्राउज़र और Windows इसे वहाँ बिना किसी<link>टैग के भी नाम से ढूँढते हैं।- बाक़ी सब कुछ जहाँ आप चाहें रह सकता है जब तक HTML स्निपेट में पथ मेल खाएँ। ज़्यादातर लोग उन सबको रूट पर डालते हैं और स्निपेट को जैसा है वैसे पेस्ट करते हैं।
फिर बस <head> स्निपेट है — आइकन लिंक, apple-touch-icon, और मैनिफ़ेस्ट संदर्भ। पेस्ट करें, डिप्लॉय करें, हार्ड-रिफ़्रेश करें, और आपको टैब में अपना लोगो दिखना चाहिए।
इसे ब्राउज़र में क्यों करें?
क्योंकि आपका लोगो कभी आपकी मशीन नहीं छोड़ता। पूरी प्रक्रिया — इमेज पढ़ना, हर आयाम पर रिसाइज़ करना, .ico पैक करना, मैनिफ़ेस्ट लिखना — Canvas का इस्तेमाल करके आपके ब्राउज़र में लोकल रूप से होती है। कुछ भी किसी सर्वर पर अपलोड नहीं होता, कोई साइन-अप या वॉटरमार्क नहीं, और आपकी पहली विज़िट के बाद टूल ऑफ़लाइन काम करता है। किसी ऐसे ब्रांड एसेट के लिए जिसे आपने शायद अभी प्रकाशित नहीं किया, इसे तीसरे-पक्ष के सर्वरों से दूर रखना समझदारी भरा डिफ़ॉल्ट है।
एक बार आपका लोगो वर्गाकार, उच्च-कंट्रास्ट, और छोटा पढ़ने योग्य हो जाए, तो पूरा सेट बनाना आसान हिस्सा है।