फैविकॉन कैसे बनाएं.

Favicon / ICO Generator खोलें और Image चुनें। एक PNG, JPG, JPEG, WebP या GIF अपलोड करें, या Try a sample चुनें। कार्य उदाहरण favicon-orbit.png का उपयोग करता है, जो पारदर्शी कोनों वाला 512 × 512 पिक्सेल का बैंगनी ऑर्बिट मार्क है। इनपुट 202,491 बाइट्स है।

बिना तैयार लोगो वाले ब्रांड के लिए, टूल पेज पर टेक्स्ट चुनें। एक या दो अक्षर दर्ज करें और जारी रखें चुनें। एडिटर Modern sans, Classic serif और Monospace फोंट प्रदान करता है, साथ ही अलग टेक्स्ट और बैकग्राउंड रंग भी। तीन अक्षरों तक स्वीकार किए जाते हैं, लेकिन छोटे आकारों में अतिरिक्त अक्षरों को पहचानना मुश्किल हो सकता है।

मूल कलाकृति को रखें। जनरेटर नई आइकन फ़ाइलें बनाता है और स्रोत को ओवरराइट नहीं करता है। GIF इनपुट एनिमेटेड फैविकॉन के बजाय एक स्थिर आइकन बन जाता है।

मोनोग्राम के लिए, Font मेनू तीन शामिल शैलियों के साथ शुरू होता है। समर्थित डेस्कटॉप ब्राउज़र पर सिस्टम फ़ॉन्ट का उपयोग करें चुनें और अपने डिवाइस पर इंस्टॉल किए गए फोंट जोड़ने के लिए एक्सेस की अनुमति दें। आस-पास के फोंट की तुलना करने के लिए पिछले और अगले शेवरॉन का उपयोग करें, या एक परिवार चुनें और लाइव प्रीव्यू का निरीक्षण करें, विशेष रूप से 16 पिक्सेल पर। फोंट आपके डिवाइस पर रहते हैं; शामिल शैलियाँ बिना अनुमति के काम करती हैं।

एडिटर हल्के और गहरे ब्राउज़र टैब के साथ-साथ सामान्य आइकन आकारों पर प्रीव्यू प्रदर्शित करता है। पहले 16-पिक्सेल उदाहरण की जाँच करें; यह सबसे सख्त परीक्षण है कि क्या निशान पहचानने योग्य रहता है। Apple Touch प्रीव्यू 180-पिक्सेल एक्सपोर्ट का प्रतिनिधित्व करता है और वर्कस्पेस में छोटा प्रदर्शित होता है।

फोन पर, Settings खोलें। Create from को Uploaded image पर और Image fit को पूरी छवि दिखाएं पर छोड़ दें। इस नमूने के लिए, Space around content को 0 पर सेट करें और पारदर्शी पृष्ठभूमि को सक्षम करें। स्रोत में पहले से ही अपना गोल बैंगनी आकार और स्पष्ट मार्जिन है, इसलिए इसे अतिरिक्त रंगीन बैकग्राउंड की आवश्यकता नहीं है।

एक अलग स्रोत के साथ, पूरी छवि दिखाएं अपने किनारों को रखता है, जबकि Fill the icon उन्हें क्रॉप कर सकता है। Rounded square, Square और Circle बाहरी आकार को परिभाषित करते हैं। पारदर्शी पृष्ठभूमि स्पष्ट क्षेत्रों को सुरक्षित रखता है लेकिन फोटो में पहले से खींचे गए अपारदर्शी बैकग्राउंड को हटा नहीं सकता है। हर फ्रेमिंग बदलाव के बाद सबसे छोटे प्रीव्यू की समीक्षा करें।

Download के अंतर्गत, इस उदाहरण के लिए Website icon package (ZIP) चुनें। नमूने के लिए Website name को My website पर छोड़ दें, या अपने प्रोजेक्ट के लिए इसे वास्तविक ब्रांड नाम से बदलें। इस नाम का उपयोग site.webmanifest में किया जाता है; इसे छवि पर टेक्स्ट के रूप में नहीं जोड़ा जाता है।

Start चुनें। ब्राउज़र favicon.ico के सात-फ्रेम वाला एक पैकेज बनाता है जिसमें 16, 24, 32, 48, 64, 128 और 256 पिक्सेल पर वर्गाकार छवियां होती हैं। यह PNG आइकन भी 16, 32, 48, 180, 192 और 512 पिक्सेल पर बनाता है, साथ ही एक मैनिफेस्ट और इंस्टॉलेशन निर्देश भी देता है। परिणाम हर आइकन के लिए अलग डाउनलोड बटन के बजाय एक ZIP फ़ाइल है।

यदि आपको केवल एक क्लासिक favicon.ico की आवश्यकता है, तो इसके बजाय Multi-size ICO चुनें। यह तब उपयोगी होता है जब कोई वेबसाइट प्लेटफ़ॉर्म ICO अपलोड स्वीकार करता है और उसे अलग पैकेज की आवश्यकता नहीं होती है।

Download करने पर website-icons.zip सेव हो जाती है। वास्तविक उदाहरण में नौ फ़ाइलें हैं और यह 304,351 बाइट्स की है। ऊपर दी गई तुलना में निर्यात किए गए ICO से निकाले गए वास्तविक 256-पिक्सेल फ्रेम के बगल में 512-पिक्सेल स्रोत दिखाया गया है, न कि सिम्युलेटेड ब्राउज़र स्क्रीनशॉट।

ZIP को एक्सट्रैक्ट करें, आइकन फ़ाइलों को अपनी वेबसाइट रूट पर अपलोड करें और INSTALL.txt पढ़ें। इसमें ICO, PNG आइकन, Apple Touch आइकन और वेब मैनिफेस्ट के लिए HTML लिंक टैग शामिल हैं। यदि आप फ़ाइलों को सबफ़ोल्डर में रखते हैं, तो HTML पथ और site.webmanifest के अंदर आइकन पथ दोनों को अपडेट करें।

अपनी साइट को एक नए ब्राउज़र टैब में और उन डिवाइसों पर जांचें जिनकी आपको परवाह है। ब्राउज़र फ़ेविकॉन को कैश कर सकते हैं, इसलिए पुराना आइकन तुरंत यह साबित नहीं करता कि इंस्टॉलेशन विफल हो गया है। एडिटर को रिफ्रेश करने से पहले स्रोत छवि और डाउनलोड किए गए पैकेज को सुरक्षित रखें, क्योंकि रिफ्रेश करने पर आप मुख्य टूल पेज पर वापस आ जाएंगे।