PNG से ICO: एक साफ favicon.ico बनाएं

PNG फेविकॉन निर्माण के लिए सबसे लोकप्रिय शुरुआती बिंदु है, और अच्छे कारण के लिए। PNG फाइलें पारदर्शिता का समर्थन करती हैं, तेज किनारों को साफ तरीके से संभालती हैं, और लगभग हर डिजाइन टूल का मूल निर्यात फॉर्मेट हैं। समस्या यह है कि ब्राउज़र और ऑपरेटिंग सिस्टम PNG को सीधे favicon.ico फाइल के रूप में स्वीकार नहीं करते हैं। ICO फॉर्मेट एक विशेष कंटेनर है जो एक सिंगल फाइल के अंदर कई इमेज साइज रख सकता है, जिससे सिस्टम प्रत्येक संदर्भ के लिए स्वचालित रूप से सर्वोत्तम रिज़ॉल्यूशन चुन सकता है।

Any2ICO के साथ, PNG को मल्टी-साइज ICO में बदलने में एक मिनट से कम समय लगता है। आप अपनी इमेज अपलोड करते हैं, जिन साइज की आपको आवश्यकता है उन्हें चुनते हैं, चुनते हैं कि इमेज को कैसे स्केल किया जाना चाहिए और किस बैकग्राउंड का उपयोग करना है, और तैयार ICO डाउनलोड करते हैं। पूरा कन्वर्जन Canvas API का उपयोग करके आपके ब्राउज़र में चलता है, इसलिए आपकी फाइलें आपके डिवाइस पर रहती हैं और कभी भी रिमोट सर्वर पर अपलोड नहीं की जाती हैं।

यह गाइड प्रक्रिया के हर चरण के माध्यम से आपका मार्गदर्शन करती है। आप सीखेंगे कि फेविकॉन बनाम Windows डेस्कटॉप आइकन के लिए कौन से साइज शामिल करने हैं, contain बनाम cover स्केलिंग का उपयोग कब करें, और बैकग्राउंड रंग को कैसे संभालें। अंत तक आपके पास एक पेशेवर, मल्टी-साइज ICO फाइल होगी जो आपकी वेबसाइट या एप्लिकेशन में ड्रॉप करने के लिए तैयार होगी।

चरण-दर-चरण: PNG को ICO में बदलें

किसी भी PNG को साफ, मल्टी-साइज ICO फाइल में बदलने के लिए इन चार चरणों का पालन करें।

चरण 1 — अपना PNG अपलोड करें

किसी भी आधुनिक ब्राउज़र में Any2ICO कन्वर्टर खोलें। अपनी PNG फाइल को अपलोड क्षेत्र पर ड्रैग करें, या अपने डिवाइस से ब्राउज़ करने के लिए क्लिक करें। आप अपने क्लिपबोर्ड से इमेज भी पेस्ट कर सकते हैं, URL दर्ज कर सकते हैं, या Google Drive या OneDrive से इम्पोर्ट कर सकते हैं। Any2ICO 10 MB तक PNG फाइलें स्वीकार करता है।

चरण 2 — आइकन साइज चुनें

चुनें कि ICO फाइल में कौन से पिक्सेल साइज को एम्बेड करना है। Any2ICO 16, 32, 48, 64, 128, और 256 पिक्सेल प्रदान करता है। एक मानक वेबसाइट फेविकॉन के लिए, कम से कम 16, 32, और 48 चुनें। यदि आइकन Windows शॉर्टकट या एप्लिकेशन आइकन के रूप में भी उपयोग किया जाएगा, तो 64, 128, और 256 भी जोड़ें। आप अधिकतम संगतता के लिए सभी छह चुन सकते हैं।

चरण 3 — स्केलिंग और बैकग्राउंड चुनें

स्केलिंग के तहत, पूरी इमेज को आइकन फ्रेम के अंदर फिट करने के लिए Contain चुनें (लोगो और चित्रों के लिए सर्वश्रेष्ठ) या फ्रेम को पूरी तरह से भरने के लिए Cover, यदि आवश्यक हो तो किनारों को क्रॉप करें (फोटो और फुल-ब्लीड ग्राफिक्स के लिए सर्वश्रेष्ठ)। फिर बैकग्राउंड को Transparent पर सेट करें यदि आपके PNG में अल्फा चैनल है, या White यदि आप ठोस बैकड्रॉप पसंद करते हैं।

चरण 4 — कन्वर्ट करें और डाउनलोड करें

Convert पर क्लिक करें। Any2ICO तुरंत आपके ब्राउज़र में ICO फाइल जेनरेट करता है। सिंगल .ico फाइल डाउनलोड करें और इसे अपनी वेबसाइट की रूट में favicon.ico के रूप में रखें, या इसे जहां भी आपका ऑपरेटिंग सिस्टम आइकन फाइल की अपेक्षा करता है वहां उपयोग करें। यदि आपने कई इमेज बदली हैं, तो Any2ICO उन्हें स्वचालित रूप से ZIP आर्काइव में बंडल करता है।

आपको कौन से साइज शामिल करने चाहिए?

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

16x16 क्लासिक फेविकॉन साइज है। ब्राउज़र इसे टैब, बुकमार्क बार और इतिहास सूचियों में प्रदर्शित करते हैं। यह न्यूनतम है जिसे आपको शामिल करना चाहिए।

32x32 का उपयोग उच्च-DPI (रेटिना) डिस्प्ले पर ब्राउज़रों द्वारा और छोटे शॉर्टकट आइकन के लिए Windows द्वारा किया जाता है। इसे 16x16 के साथ शामिल करने से ब्राउज़र को तेज स्क्रीन पर 16-पिक्सेल संस्करण को स्केल करने से रोकता है।

48x48 Windows टास्कबार में और कुछ ब्राउज़र संदर्भों में दिखाई देता है जिन्हें थोड़ा बड़े आइकन की आवश्यकता होती है। यह वेब उपयोग के लिए आवश्यक तिकड़ी को पूरा करता है।

64x64, 128x128, और 256x256 मुख्य रूप से Windows डेस्कटॉप शॉर्टकट, एप्लिकेशन आइकन, और उच्च-रिज़ॉल्यूशन डिस्प्ले के लिए प्रासंगिक हैं। यदि आपका ICO केवल वेबसाइट फेविकॉन के रूप में काम करेगा, तो आप फाइल को छोटा रखने के लिए इन्हें छोड़ सकते हैं। यदि आइकन डेस्कटॉप पर उपयोग किया जा सकता है, तो सर्वोत्तम उपस्थिति के लिए उन्हें शामिल करें।

कहां प्रत्येक साइज प्रदर्शित होता है इसके गहरे विवरण के लिए, हमारी फेविकॉन साइज के लिए गाइड देखें।

स्केलिंग: Contain बनाम Cover

जब आपका सोर्स PNG पूरी तरह से वर्गाकार नहीं है, या जब यह लक्ष्य आइकन साइज से बिल्कुल मेल नहीं खाता है, तो Any2ICO को इमेज को वर्ग आइकन फ्रेम में कैसे फिट किया जाए इसके लिए एक नियम की आवश्यकता होती है। वह नियम स्केलिंग मोड है।

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

Cover इमेज को तब तक स्केल करता है जब तक कि यह आइकन फ्रेम को पूरी तरह से भर न दे। यदि सोर्स वर्गाकार नहीं है, तो अतिप्रवाह किनारों को क्रॉप किया जाता है। यह मोड फोटो, बनावट, या फुल-ब्लीड बैकग्राउंड के लिए उपयोगी है जहां आप कोई पैडिंग और कोई खाली स्थान नहीं चाहते हैं।

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

बैकग्राउंड: Transparent बनाम White

बैकग्राउंड सेटिंग नियंत्रित करती है कि जब आइकन फ्रेम पूरी तरह से कवर नहीं होता है तो आपकी इमेज के पीछे क्या दिखाई देता है — या तो क्योंकि सोर्स में अल्फा चैनल (पारदर्शिता) है या क्योंकि Contain स्केलिंग ने पैडिंग जोड़ी है।

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

White किसी भी गैर-इमेज क्षेत्र को ठोस सफेद से भरता है। यह तब उपयोगी है जब आपका सोर्स PNG सफेद कैनवास पर डिज़ाइन किया गया था और पारदर्शिता अवांछित किनारों को उजागर करेगी, या जब आइकन ऐसे संदर्भ में दिखाई देगा जो पारदर्शिता का अच्छी तरह से समर्थन नहीं करता है।

एक नियम के रूप में: यदि आपके PNG में पहले से ही पारदर्शी बैकग्राउंड है और छोटे साइज पर अच्छा दिखता है, तो बैकग्राउंड को Transparent पर रखें। यदि डिज़ाइन सफेद परिवेश पर निर्भर करता है या आप किनारों के आसपास दृश्य कलाकृतियां देखते हैं, तो White पर स्विच करें।