favicon.ico कैसे बनाएं (मल्टी-साइज) PNG या SVG से

एक तेज, मल्टी-साइज favicon.ico बनाएं जो हर ब्राउज़र और टैब बार में काम करता है

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

ICO फॉर्मेट फेविकॉन के लिए सबसे विश्वसनीय विकल्प बना हुआ है क्योंकि यह एक सिंगल फाइल में कई इमेज साइज को बंडल कर सकता है। जब ब्राउज़र को टैब बार के लिए 16x16 आइकन की आवश्यकता होती है, तो यह ICO फाइल से 16x16 इमेज खींचता है। जब ऑपरेटिंग सिस्टम को टास्कबार शॉर्टकट के लिए 32x32 आइकन की आवश्यकता होती है, तो यह 32x32 संस्करण खींचता है। यह सुनिश्चित करता है कि आपका फेविकॉन हमेशा हर साइज पर तेज दिखता है, बजाय एक सिंगल रिज़ॉल्यूशन से ऊपर या नीचे स्केल किया जाए।

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

चरण 1: अपनी सोर्स इमेज तैयार करें

एक महान फेविकॉन एक महान सोर्स इमेज से शुरू होता है। आपके इनपुट की गुणवत्ता सीधे आपके आउटपुट की गुणवत्ता निर्धारित करती है, इसलिए कुछ भी बदलने से पहले इसे सही करने में एक पल बिताने लायक है।

वर्गाकार इमेज का उपयोग करें। फेविकॉन हमेशा वर्गों के रूप में प्रदर्शित होते हैं, इसलिए आपका सोर्स वर्गाकार या बहुत करीब होना चाहिए। यदि आपका लोगो ऊंचाई से अधिक चौड़ा है, तो इसे वर्गाकार हिस्से में क्रॉप करने या पूर्ण वर्डमार्क के बजाय सरलीकृत मार्क का उपयोग करने पर विचार करें।

उपलब्ध उच्चतम रिज़ॉल्यूशन के साथ शुरू करें। कम से कम 256x256 पिक्सेल की इमेज Any2ICO को 16x16 से 256x256 तक हर फेविकॉन साइज के लिए साफ सोर्स डेटा देती है।

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

SVG काम करता है, लेकिन चेतावनियों के साथ। Any2ICO SVG फाइलें स्वीकार करता है और कन्वर्जन के दौरान उन्हें रास्टराइज़ करता है। हालांकि, बाहरी फॉन्ट संदर्भों, लिंक्ड इमेजेज, या जटिल CSS वाले SVG ब्राउज़र में रास्टराइज़ होने पर अपेक्षित रूप से रेंडर नहीं हो सकते हैं।

SVG समस्याएं

बाहरी फॉन्ट, लिंक्ड स्टाइलशीट, या बाहरी इमेज संदर्भों पर निर्भर SVG फाइलें कन्वर्जन के दौरान सही ढंग से रेंडर नहीं हो सकती हैं। बदलने से पहले, अपने SVG को ब्राउज़र टैब में खोलें ताकि पुष्टि हो सके कि यह अपने आप सही ढंग से प्रदर्शित होता है। यदि फॉन्ट गलत दिखाई देते हैं, तो पहले अपने वेक्टर एडिटर में टेक्स्ट को आउटलाइन में बदलें।

चरण 2: Any2ICO के साथ मल्टी-साइज ICO में बदलें

अपनी सोर्स इमेज तैयार होने के साथ, ठीक से संरचित मल्टी-साइज ICO फाइल में इसे बदलने के लिए Any2ICO पर जाएं।

अपनी इमेज अपलोड करें। अपनी PNG, SVG, JPG, WebP, GIF, BMP, या AVIF फाइल को कन्वर्टर क्षेत्र पर ड्रैग और ड्रॉप करें।

अपने ICO साइज चुनें। Any2ICO आपको चुनने देता है कि ICO फाइल में कौन से साइज एम्बेड करने हैं: 16, 32, 48, 64, 128, और 256 पिक्सेल।

अपना स्केलिंग मोड चुनें। यदि आपका सोर्स पूरी तरह से वर्गाकार नहीं है, तो contain चुनें या cover।

बैकग्राउंड सेट करें। यदि आपके सोर्स में पारदर्शिता है और आप इसे रखना चाहते हैं, तो transparent बैकग्राउंड चुनें।

अपना ICO डाउनलोड करें। convert बटन पर क्लिक करें और जेनरेट किया गया favicon.ico फाइल डाउनलोड करें।

अभी ICO में बदलें

चरण 3: सही फेविकॉन साइज चुनें

हर साइज समान रूप से महत्वपूर्ण नहीं है।

साइज	शामिल करें?	क्यों
16x16	हां (आवश्यक)	ब्राउज़र टैब, एड्रेस बार, और इतिहास।
32x32	हां (आवश्यक)	Windows टास्कबार शॉर्टकट, उच्च-DPI स्क्रीन पर ब्राउज़र टैब।
48x48	अनुशंसित	Windows डेस्कटॉप शॉर्टकट।
64x64	वैकल्पिक	उच्च-रिज़ॉल्यूशन संदर्भों में Windows साइट आइकन।
128x128	वैकल्पिक	Chrome Web Store आइकन।
256x256	वैकल्पिक	बड़े आइकन दृश्यों के लिए Windows।

चरण 4: अपनी साइट पर फेविकॉन टैग जोड़ें

एक बार जब आपके पास अपनी favicon.ico फाइल हो, तो आपको इसे अपने सर्वर पर रखने और ब्राउज़रों को बताने की आवश्यकता है कि इसे कहां खोजना है।

फाइल को अपने डोमेन की रूट में रखें। अपनी favicon.ico फाइल को अपने वेब सर्वर की रूट डायरेक्टरी में सहेजें।

अपने HTML head में एक link टैग जोड़ें।

<link rel="icon" href="/hi/favicon.ico" sizes="any">

सत्यापित करें कि यह काम करता है। अपनी साइट को ब्राउज़र में खोलें और टैब आइकन की जांच करें।

सारांश

उचित मल्टी-साइज favicon.ico बनाना एक चार-चरण प्रक्रिया है: उच्च-गुणवत्ता वर्गाकार सोर्स इमेज तैयार करें, Any2ICO का उपयोग करके सही साइज के साथ इसे ICO में बदलें, साइज चुनें जो आपके दर्शकों से मेल खाते हैं, और अपने HTML head में एक सरल <link> टैग जोड़ें।

अभी अपना फेविकॉन बनाएं