SVG से ICO कन्वर्टर

फ़ेविकॉन बनाने के लिए SVG सबसे अच्छा सोर्स है: हर आइकन साइज़ किसी बड़े बिटमैप को छोटा करके नहीं, बल्कि सीधे वेक्टर से नए सिरे से बनता है। इसलिए 16 px वाला वर्ज़न भी उतना ही साफ़ रहता है जितना पिक्सल ग्रिड में संभव है।

या JPG, JPEG, JPE … फ़ाइलें यहाँ ड्रop करें ·

प्रति फ़ाइल अधिकतम 95 MB· अधिकतम 20 फ़ाइलें· 30 मिनट बाद हटा दी जाती हैं

आउटपुट

इसमें बदलें

फ़ाइलें हमारे सर्वर पर प्रोसेस होती हैं और 30 मिनट बाद हटा दी जाती हैं।

क्वालिटी और रंग

एनिमेटेड इनपुट

इस फ़ॉर्मैट में सिर्फ़ एक इमेज होती है। एनिमेशन रखना हो तो GIF या WebP आउटपुट चुनें।

आइकन साइज़

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

आउटपुट रीसाइज़ करें

आउटपुट इमेज रीसाइज़ करें

मूल डाइमेंशन रखें, या एक साइड डालें और आस्पेक्ट रेशियो बना रहेगा।

मेटाडेटा और कलर प्रोफ़ाइल

ऑटो ओरिएंट

EXIF में सहेजे ओरिएंटेशन से इमेज घुमाएँ ताकि वह हर जगह सीधी दिखे।

मेटाडेटा हटाएँ

GPS लोकेशन, कैमरा डेटा और कमेंट हटाएँ। कलर प्रोफ़ाइल को नीचे अलग से रखा जा सकता है।

कलर प्रोफ़ाइल रखें

एम्बेडेड ICC प्रोफ़ाइल रखें ताकि कन्वर्ट करने के बाद भी रंग सटीक रहें।

कलर स्पेस

स्क्रीन और वेब के लिए sRGB सही है। प्रिंट वर्कफ़्लो के लिए मूल रखें; ग्रेस्केल रंग हटा देता है।

DPI टैग

dpi

सिर्फ़ मेटाडेटा, 0 मूल मान रखता है। प्रिंटर और कुछ पोर्टल यह संख्या पढ़ते हैं; इससे पिक्सल डाइमेंशन नहीं बदलते।

इस टूल का उपयोग कैसे करें

1
SVG लोगो अपलोड करें
पूरा वर्डमार्क नहीं, सिर्फ़ मार्क या मोनोग्राम इस्तेमाल करें। चौकोर viewBox से सबसे साफ़ नतीजा मिलता है।
2
सभी आइकन साइज़ रहने दें
आइकन साइज़ में शुरुआत में सभी साइज़ (16–256) चुना होता है, जो हर रेज़ोल्यूशन को एक ही .ico में रखता है। सिर्फ़ तभी एक साइज़ चुनें जब कोई प्रोग्राम ठीक एक ही साइज़ माँगे।
3
ICO में कन्वर्ट करें दबाएँ
फ़ाइल को favicon.ico नाम से अपनी साइट के रूट फ़ोल्डर में सेव करें, या किसी Windows शॉर्टकट को इसी पर पॉइंट करें।

उत्तर

favicon के लिए SVG को ICO में कैसे बदलें?

SVG अपलोड करें, आइकन साइज़ को सभी साइज़ (16–256) पर रहने दें और ICO में कन्वर्ट करें दबाएँ। आपको एक .ico मिलेगी जिसमें हर रेज़ोल्यूशन वेक्टर से बनाया गया होगा और पारदर्शिता बरकरार रहेगी।

SVG से ICO कन्वर्टर: वेक्टर सही सोर्स क्यों है

.ico फ़ॉर्मेट Windows के शुरुआती वर्शनों से आया है, और favicon.ico की परंपरा 1999 के Internet Explorer 5 से, जो हर बुकमार्क की गई साइट के रूट में इसी नाम की फ़ाइल ढूँढता था। ICO एक छोटा कंटेनर है: एंट्रियों की डायरेक्टरी, जिसमें हर एंट्री अलग चौकोर बिटमैप होती है, इसलिए एक फ़ाइल में 16 px का टैब आइकन और 256 px का डेस्कटॉप आइकन साथ-साथ रह सकते हैं। Windows Vista ने अधिकतम साइज़ 256 × 256 कर दिया और इन बड़ी एंट्रियों को PNG के रूप में रखने की अनुमति दी।

क्योंकि हर एंट्री अपना अलग बिटमैप है, आइकन की क्वालिटी इस पर निर्भर करती है कि हर साइज़ कैसे बनाया गया। PNG से हर साइज़ उन्हीं पिक्सल का छोटा किया हुआ रूप होता है। SVG से हर साइज़ पाथ का नया रेंडर होता है, जिसमें एंटी-एलियासिंग उसी ग्रिड के हिसाब से निकाली जाती है। 16 × 16 px पर, जहाँ लोगो के पास सिर्फ़ 256 पिक्सल होते हैं, यह फ़र्क़ साफ़ दिखता है।

1:1

16 × 16 px

16 × 16

ब्राउज़र टैब, बुकमार्क और हिस्ट्री लिस्ट।

1:1

32 × 32 px

32 × 32

हाई-डेंसिटी स्क्रीन के टैब, Windows टास्कबार शॉर्टकट।

1:1

64 × 64 px

64 × 64

स्केल किए गए डेस्कटॉप व्यू और पिन किए गए आइटम।

1:1

128 × 128 px

128 × 128

फ़ाइल मैनेजर में बड़े प्रीव्यू।

1:1

256 × 256 px

256 × 256

ICO की सबसे बड़ी एंट्री; Explorer के अतिरिक्त बड़े आइकन।

SVG

Scalable Vector Graphics

SVG एक XML-आधारित वेक्टर फ़ॉर्मेट है, जिसे W3C ने 2001 में मानकीकृत किया। यह पिक्सल की जगह आकृतियों, पाथ और टेक्स्ट को बताता है, इसलिए किसी भी साइज़ पर तीखा रहता है और लोगो व आइकन के लिए आमतौर पर बहुत छोटा होता है। यह ट्रांसपेरेंसी, CSS स्टाइलिंग, स्क्रिप्टिंग और एनिमेशन को सपोर्ट करता है, और हर ब्राउज़र इसे सीधे रेंडर करता है। SVG फ़ोटो के लिए उपयुक्त नहीं है, और जटिल इलस्ट्रेशन रेंडर होने में धीमे हो सकते हैं। Illustrator, Inkscape, Figma और ब्राउज़र इसे खोल और एडिट कर सकते हैं।

कंप्रेशन: –
ट्रांसपेरेंसी (पारदर्शिता): हाँ
एनिमेशन: हाँ
शुरुआत का वर्ष: 2001 · W3C

SVG कन्वर्टर

ICO

Windows आइकन

ICO Microsoft का आइकन फ़ॉर्मैट है, जो Windows प्रोग्राम आइकन और वेबसाइट फ़ेविकॉन के लिए इस्तेमाल होता है। एक .ico फ़ाइल में अलग-अलग साइज़ की कई इमेज हो सकती हैं, जैसे 16×16, 32×32, 48×48 और 256×256 पिक्सल, ताकि सिस्टम सबसे सही साइज़ चुन सके। हर इमेज बिटमैप या PNG डेटा के रूप में रखी जा सकती है और पूरी अल्फ़ा ट्रांसपेरेंसी सपोर्ट करती है। ICO फ़ोटो या बड़े आर्टवर्क के लिए नहीं है। ब्राउज़र, Windows और ज़्यादातर आइकन एडिटर इसे पढ़ सकते हैं।

कंप्रेशन: लॉसलेस
ट्रांसपेरेंसी (पारदर्शिता): हाँ
एनिमेशन: नहीं
शुरुआत का वर्ष: Microsoft

ICO कन्वर्टर

लोग SVG को ICO में इसलिए बदलते हैं क्योंकि उनका लोगो वेक्टर में है, जबकि वेबसाइट रूट, Windows शॉर्टकट या डेस्कटॉप ऐप को अब भी एक .ico फ़ाइल चाहिए जिसमें कई बिटमैप साइज़ हों।

SVG को ICO में बदलने से पहले SVG तैयार करें

करें	न करें
viewBox को चौकोर रखें, जैसे `0 0 512 512`।	ऐसी बहुत पतली रेखाओं पर निर्भर न रहें जो 32 px से नीचे गायब हो जाती हैं।
थोड़ा मार्जिन छोड़ें ताकि मार्क आइकन के किनारे को न छुए।	चौड़ा वर्डमार्क न रखें, वह पतले धब्बे जैसा बन जाता है।
टेक्स्ट को आउटलाइन में बदल दें ताकि फ़ॉन्ट न बदले।	SVG के अंदर बाहरी इमेज या वेब फ़ॉन्ट का रेफ़रेंस न दें।
पूरा नाम नहीं, सिंबल या शुरुआती अक्षर इस्तेमाल करें।	लोगो के पीछे सफ़ेद आयत न जोड़ें, जब तक वह गहरे टैब में भी न चाहिए।

कन्वर्टर सिर्फ़ वही रेंडर करता है जो SVG में लिखा है, इसलिए लिंक की गई एसेट और एम्बेड न किए गए फ़ॉन्ट लोड नहीं हो सकते। Figma, Illustrator और Inkscape जैसे डिज़ाइन टूल टेक्स्ट को पाथ के रूप में एक्सपोर्ट कर सकते हैं; ऐसा करने पर अक्षर हर जगह आपके ब्रांड जैसे ही दिखेंगे।

.ico बन जाने के बाद Apple touch आइकन के लिए 180 px का PNG और वेक्टर favicon सपोर्ट करने वाले ब्राउज़र के लिए SVG भी जोड़ें; SVG को PNG में बदलें किसी भी साइज़ में PNG बना देता है। अगर आपका लोगो बिटमैप में है, तो PNG को ICO में बदलें पिक्सल से यही काम करता है।

SVG को ICO में बदलें: सवाल-जवाब

PNG के बजाय SVG से ICO कन्वर्टर क्यों इस्तेमाल करें?

PNG को हर आइकन साइज़ के लिए छोटा करना पड़ता है, और छोटा करने से किनारे धुंधले हो जाते हैं। SVG को सीधे 16, 32, 64, 128 और 256 px पर रेंडर किया जाता है, इसलिए हर साइज़ के किनारे अपने पिक्सल ग्रिड के हिसाब से तीखे रहते हैं।

अगर साइट पर SVG आइकन है, तो क्या ब्राउज़र को अब भी favicon.ico चाहिए?

Chrome और Firefox link टैग से दिया गया SVG favicon पढ़ लेते हैं, लेकिन कई ब्राउज़र, फ़ीड रीडर और क्रॉलर अब भी डिफ़ॉल्ट रूप से साइट रूट से /favicon.ico माँगते हैं। दोनों रखने से सब जगह काम चलता है।

अगर मेरा SVG चौकोर नहीं है तो क्या होगा?

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

क्या ICO में ट्रांसपेरेंट बैकग्राउंड बना रहता है?

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

क्या Windows प्रोग्राम या फ़ोल्डर आइकन के लिए SVG को ICO में बदल सकते हैं?

हाँ, वही फ़ाइल चलती है। Windows बड़े और अतिरिक्त बड़े Explorer व्यू के लिए 256 px की इमेज पढ़ता है, और लिस्ट व टास्कबार के लिए छोटी एंट्री।

16 px पर मेरा आइकन खाली-सा क्यों दिखता है?

पतली रेखाएँ और छोटा टेक्स्ट उस साइज़ पर गायब हो जाते हैं। 512 यूनिट के आर्टबोर्ड में 2 यूनिट की रेखा 16 px के आइकन में एक पिक्सल से काफ़ी कम चौड़ी बनती है। रेखाएँ मोटी करें या favicon के लिए कोई सरल मार्क इस्तेमाल करें।

SVG से ICO कन्वर्टर

इमेज कन्वर्टर