SVG को ICO में बदलें

यहाँ आप SVG को ICO में बदलते हैं, मुफ़्त और बिना खाते के: फ़ाइल ऊपर छोड़िए और कुछ ही सेकंड में नतीजा डाउनलोड के लिए तैयार मिलेगा। कन्वर्ज़न आपके अपने ब्राउज़र के भीतर होता है, इसलिए फ़ाइल कभी अपलोड नहीं होती। यह Windows, macOS और Linux पर वैसे ही चलता है जैसे iPhone और Android पर, और कनेक्शन काट देने पर भी चलता रहता है।

कहाँ चलता है आपके ब्राउज़र में। फ़ाइल कभी अपलोड नहीं होती।
नए सिरे से बना ICO के काम करने का तरीक़ा SVG से अलग है। यह किसी लॉसी कोडेक जैसा धीरे-धीरे होने वाला नुक़सान नहीं है: ICO जो कुछ व्यक्त कर सकता है, वह हूबहू उतर आता है — और जिसका वहाँ कोई समतुल्य नहीं, वह पूरी तरह रह जाता है।
फ़ाइल आकार की सीमा हर फ़ाइल 100 MB तक, मुफ़्त, बिना खाते के।

एक बार में 100 फ़ाइलें। फ़ॉर्मेट अलग-अलग हों तो भी चलेगा।

SVG से ICO

आइकन बनाने के लिए वेक्टर ही सही चीज़ है

ज़्यादातर आइकन बदलाव किसी ऐसी चीज़ से शुरू होते हैं जो पहले ही एक बार रेंडर हो चुकी है — कोई PNG निर्यात, कोई स्क्रीनशॉट, कोई मिली हुई JPEG। हर एक अपने बनाने वाले का रिज़ॉल्यूशन और उसकी ख़ामियाँ लिए होता है, और उसे आइकन आकार तक घटाना उन्हें बढ़ा देता है। SVG इनमें से कुछ नहीं ढोता: यह निर्देश है, इसलिए रेंडरर निशान को ठीक आइकन जितने आकार पर ताज़ा बनाता है।

मतलब किनारे दो बार नहीं, एक ही बार एंटीअलायस होते हैं, वक्र गणना से बनते हैं, दोबारा नमूना लेने से नहीं। अगर आपके पास वेक्टर है, इसे इस्तेमाल कीजिए।

जो फ़ाइल मिलती है वह तयशुदा तीन आकार लिए होती है

ICO ऐसा कंटेनर है जो एक ही निशान को कई आकार में रखने के लिए बना है, ताकि Windows टास्कबार में साफ़ 16-पिक्सल और डेस्कटॉप पर साफ़ 256-पिक्सल रूप दिखा सके, बिना किसी को खींचे। यहाँ लिखी फ़ाइल यही करती है: «Icon sizes» नियंत्रण सेट तय करता है, तयशुदा 16, 32 और 48 है, हर एक अपना अल्फ़ा चैनल लिए अलग PNG।

दो सौ छप्पन इस फ़ॉर्मेट की अपनी छत है, यहाँ का चुनाव नहीं। एंट्री अपनी चौड़ाई एक बाइट में दर्ज करती है, जो 255 पर रुक जाती है, इसलिए विनिर्देश शून्य को 256 के अर्थ में सुरक्षित रखता है। एंट्री सबसे बड़ी से लिखी जाती हैं, क्योंकि जो डिकोडर डायरेक्टरी अनदेखा करे वह आमतौर पर जो पहले मिले वही लेता है।

सोलह पिक्सल पर ब्राउज़र इस तस्वीर के साथ क्या करता है

तयशुदा सेट के साथ, वह कुछ खींचता नहीं: वह डायरेक्टरी पढ़ता है, पहले से 16 पिक्सल की एंट्री ढूँढता है, और उसी को खींचता है। यही वह फ़र्क़ है जिसके लिए कंटेनर बना, और यह दिखता है — किसी ब्राउज़र के सामान्य फ़िल्टर से तुरंत घटाई 256-पिक्सल तस्वीर हर वह जमावट खो देती है जो निशान को साफ़ बनाती थी।

कोई भी व्यवस्था निशान को दोबारा बना नहीं सकती। यहाँ का 16-पिक्सल एंट्री 256-पिक्सल रेंडर को घटाकर बना है, SVG को 16 पर दोबारा नहीं रेंडर किया गया, इसलिए एक-पिक्सल की लकीर अब भी धुँधली होती है।

टैब में टिकने वाला निशान डिज़ाइन करना

यह सीमा कड़ी है और इसी के हिसाब से डिज़ाइन करना ठीक रहता है, इससे लड़ने के बजाय। सोलह गुणा सोलह कुल 256 पिक्सल है, जो इस वाक्य के अक्षरों से भी कम है। जिसे पढ़ने के लिए तीन से ज़्यादा अलग आकृतियाँ चाहिए वह पढ़ा नहीं जाएगा।

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

अल्फ़ा चैनल SVG से आइकन तक पूरा जाता है

आइकन के भीतर की तस्वीर PNG है, इसलिए अल्फ़ा चैनल पूरे रास्ते आता है: resvg आरेखण को ख़ाली पर रेंडर करता है, पिक्सल पारदर्शिता रखते हैं, और PNG उसे सहेजता है। गोल निशान चौकोर सफ़ेद पाने की जगह अपने गोल कोने रखता है।

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

SVG को भी फ़ेविकॉन के रूप में प्रकाशित कीजिए

आधुनिक ब्राउज़र सीधे SVG फ़ेविकॉन स्वीकार करते हैं, और जहाँ यह समर्थित है वहाँ यह पूरी तरह बेहतर है: एक छोटी फ़ाइल, हर आकार पर तीखी, और आरेखण के भीतर मीडिया क्वेरी से गहरे रंग स्कीम के अनुसार बदल सकती है। अब आम व्यवस्था है मार्कअप में घोषित SVG और बाक़ी सब के लिए जड़ में बैठा ICO।

इससे आइकन छोड़ देने का कारण नहीं बनता। /favicon.ico का अनुरोध ब्राउज़र HTML कुछ भी कहे बिना करते हैं, और साथ में फ़ीड रीडर, लिंक प्रीव्यूअर और कोई भी HTML न पढ़ने वाले क्रॉलर।

साइट की जड़, और उसकी ओर इशारा करने वाला मार्कअप

फ़ाइल जड़ में favicon.ico की तरह रखिए। यह अकेला ठिकाना अपने-आप होने वाले अनुरोध को सँभालता है और इसमें कोई मार्कअप की ज़रूरत नहीं — यही वजह है कि यह इर्द-गिर्द वेब के बदलने के बावजूद तीस साल टिका रहा।

फिर बाक़ी साफ़-साफ़ घोषित कीजिए: SVG के लिए rel="icon" और type="image/svg+xml" वाला link एलिमेंट, और iOS के लिए 180-पिक्सल apple-touch-icon PNG, जो बाक़ी दोनों को अनदेखा करता है।

टैब में अब भी पुराना आइकन दिखता है

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

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

बदलने से पहले viewBox चौकोर कीजिए

यह बदलाव कुछ काटता नहीं। आरेखण अपने ही अनुपात में रेंडर होता है, और हर आइकन एंट्री उसे चौकोर कैनवस के बीचोबीच सबसे बड़े पैमाने पर रखकर बनाई जाती है — इसलिए चौड़ा viewBox ऊपर-नीचे पारदर्शी जगह से भरा जाता है, खींचा नहीं जाता। कुछ बिगड़ता नहीं, पर तीन गुना चौड़ा निशान आधे वर्ग में सिमटा दिखता है।

इसे SVG में ठीक कीजिए। viewBox को चौकोर सेट कीजिए और निशान को उचित मार्जिन के साथ अंदर रखिए।

एक ही पास में निशानों का पूरा फ़ोल्डर आइकन बनाना

पूरा सेट छोड़ दीजिए। हर आरेखण अलग-अलग रेंडर और रैप होता है और नतीजे ZIP बनकर लौटते हैं, जो कई साइट या उत्पाद चलाने वाले किसी भी ब्रांड सिस्टम के लिए आम काम है।

हर फ़ाइल को एक जैसा बर्ताव और एक जैसा आकार सेट मिलता है, इसलिए बैच लौटता है। जो एक जैसा नहीं रहता वह है कितना हिस्सा हर वर्ग में भरता है: चौड़े viewBox वाला आरेखण पारदर्शी जगह से घिरा रहता है और अपने सही चौकोर पड़ोसी के बग़ल में एक आकार छोटा दिखता है।

SVG को ICO में ऐसे बदलें

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

SVG या ICO: क्या बदलता है

SVG और ICO की तुलना
	SVG	ICO
पूरा नाम	Scalable Vector Graphics	Windows आइकॉन
फ़ाइल एक्सटेंशन	.svg	.ico
मीडिया टाइप	image/svg+xml	image/x-icon
कंप्रेशन	बिना कंप्रेशन	बिना नुक़सान — कुछ छोड़ा नहीं जाता
पहली बार प्रकाशित	2001	1985
प्रकाशक	W3C	Microsoft
विनिर्देश	SVG 1.1	—
लाइसेंस	खुला मानक	प्रकाशित, मानकीकृत नहीं
आज की स्थिति	मौजूदा	सीमित उपयोग
बिट डेप्थ	—	8
रंग जो यह दर्ज कर सकता है	RGB	RGB, इंडेक्स्ड पैलेट
सबसे बड़ी इमेज	—	हर तरफ़ 256 px
ब्राउज़र में खुलता है	हर ब्राउज़र	हर ब्राउज़र
इसकी जगह विचारणीय	PNG, PDF	PNG

क्या खो जाता है

SVG आकृतियों का वर्णन करता है और ICO बिंदु सँभालता है। नतीजा उसी नाप पर साफ़ है जिस पर वह बना, उससे बड़े पर नहीं: बाद में बढ़ाने पर बीच के बिंदु सिर्फ़ गढ़े जा सकते हैं — इसीलिए यहाँ निर्यात की नाप बाक़ी ज़्यादातर कन्वर्ज़न से ज़्यादा मायने रखती है।

क्या बचा रहता है

पारदर्शिता बनी रहती है। SVG और ICO — दोनों अल्फ़ा चैनल सँभालते हैं: काटा हुआ हिस्सा कटा ही रहता है और उसके पीछे कुछ भरा नहीं जाता।

नतीजा खोलना

दोनों तरफ़ के प्रोग्राम अलग हैं: SVG फ़ाइल Inkscape, Adobe Illustrator और Figma में खुलती है और ICO फ़ाइल GIMP और IcoFX में — यानी नतीजा जिसके पास जाएगा, उसे दूसरी सूची में से कोई प्रोग्राम चाहिए होगा।

फ़ाइल का आकार और गुणवत्ता

ICO उन्हीं सैंपल को क़रीब आधी जगह में बाँध देता है। कुछ जाता नहीं — खोलने पर SVG फ़ाइल बिट-दर-बिट वापस मिलती है — और इसी से यह उस हर चीज़ के लिए बेहतर जगह बन जाता है जिसे आप सँभालकर रखना चाहते हैं।

कौन-सा फ़ॉर्मेट किस काम के लिए है

SVG W3C का फ़ॉर्मेट है, जो 2001 में आया। यह SVG 1.1 में तय किया गया है, और अगर फ़ाइल को उस औज़ार से ज़्यादा जीना है जिसने उसे लिखा, तो यह बात क़ीमती है।

ICO Microsoft का है और 1985 से चला आ रहा है। GIMP और IcoFX इस फ़ॉर्मेट को पढ़ लेते है।

ICO 1985 में आया और SVG 2001 में। किसी को सौंपने के लिए आम तौर पर पुराना वाला ज़्यादा सुरक्षित रहता है; नया वाला वही काम कम बाइट में कर देता है।

SVG से ICO: आम सवाल

क्या मेरी SVG फ़ाइल कहीं अपलोड होती है?

नहीं। यह कन्वर्ज़न पूरी तरह आपके ब्राउज़र में होता है, इसलिए फ़ाइल आपके डिवाइस से बाहर नहीं जाती। आप ख़ुद जाँच सकते हैं: डेवलपर टूल्स का नेटवर्क टैब खोलिए और कुछ बदल कर देखिए। आपको पेज ख़ुद दिखेगा और आँकड़ों तथा विज्ञापन के वे अनुरोध दिखेंगे जिनसे इस सेवा का ख़र्च निकलता है — और एक भी ऐसा अनुरोध नहीं जो आपकी फ़ाइल साथ ले जा रहा हो। इस जोड़ी के पीछे resvg है, Rust में लिखा एक सख़्त SVG रेंडरर; आपका ब्राउज़र इसे एक बार उतारता है और फिर सहेज कर रखता है।

क्या SVG को ICO में बदलना मुफ़्त है?

हाँ। न खाता, न वॉटरमार्क, और न कोई रोज़ का कोटा जो ख़त्म हो: यह आपकी अपनी मशीन पर चलता है, इसलिए आप जितनी बार चाहें लौट सकते हैं। ब्राउज़र 100 MB तक की फ़ाइलें सँभालता है, एक बार में 100। resvg आपकी अपनी मशीन पर उतरता है और वहीं चलता है — इसीलिए उस पर कोई गिनती नहीं है।

SVG को ICO में बदलने पर क्या गुणवत्ता जाती है?

SVG और ICO सामग्री का वर्णन बुनियादी तौर पर अलग-अलग तरीक़ों से करते हैं। इसलिए यह कन्वर्ज़न नक़ल नहीं, पुनर्निर्माण है: ईमानदार, पर बाइट-दर-बाइट एक जैसा नहीं।

SVG से बनी ICO फ़ाइल बाद में बड़ी की जा सकती है?

क्या ICO बिना कुछ खोए छोटा पड़ता है?

SVG से ICO जाने पर क्या पारदर्शिता बची रहती है?

इन फ़ॉर्मेट के बारे में और

ये आँकड़े कहाँ से आए

इस पेज पर SVG और ICO के बारे में जो कहा गया है, वह जाँचा जा सकता है, और ये रहे वे दस्तावेज़ जो उसे तय करते हैं।

Scalable Vector Graphics (SVG) 2
W3C — SVG बिना धुँधलाए क्यों बढ़ता है और पिक्सेल वाले फ़ॉर्मेट क्यों नहीं