# तस्वीर से ICO — favicon, Windows और macOS आइकन बनाइए

एक तस्वीर भीतर। ब्राउज़र, Windows या Mac जो भी साइज़ माँगे, वह सब बाहर।

> PNG, JPEG या SVG को अपने ब्राउज़र में ही असली कई-साइज़ वाली .ico या macOS की .icns में बदलिए। favicon, Windows ऐप आइकन, Mac ऐप आइकन, और साथ में वे Apple तथा Android फ़ाइलें जो किसी साइट को चाहिए। कुछ भी अपलोड नहीं होता।

यह पेज एक इंटरैक्टिव टूल है जो पूरी तरह आपके ब्राउज़र में चलता है, https://abox.tools/hi/image-to-ico/ पर — आप इसे जो भी देते हैं, वह कहीं अपलोड नहीं होता। आगे वह सब कुछ है जो यह पेज इस टूल के बारे में शब्दों में कहता है; इसे इस्तेमाल करने के लिए यह पता खोलें।

## यह टूल तस्वीरें **कभी अपलोड नहीं करता**। यहाँ कोई सर्वर है ही नहीं।

आकार घटाना और खुद आइकन फ़ाइलें बनाना, दोनों आपके अपने ब्राउज़र में होते हैं। तस्वीर उसी कैनवस से खींची जाती है जो आपके ब्राउज़र में पहले से आता है, और हर कंटेनर उन्हीं पिक्सलों से जुड़ता है, यानी Windows की `.ico` और macOS की `.icns`, दोनों `src/ico.js` तथा `src/icns.js` की उन कुछ सौ पंक्तियों से जिन्हें आप पढ़ सकते हैं। इस टूल में किसी भी तरह की कोई नेटवर्क सुविधा है ही नहीं, इसलिए यहाँ से कुछ मँगाया भी नहीं जा सकता और भेजा भी नहीं जा सकता। और मान लीजिए कोई रास्ता होता भी, तो इस पेज के दूसरी तरफ़ ऐसा कोई सर्वर ही नहीं है जिसे लोगो भेजा जा सके।

- ✗ कोई अपलोड नहीं
- ✗ कोई खाता नहीं
- ✗ कोई वॉटरमार्क नहीं
- ✓ ऑफ़लाइन चलता है
- ✓ ओपन सोर्स

## बिना कुछ अपलोड किए .ico फ़ाइल कैसे बनाएँ

1. **तस्वीर चुनिए।** कोई PNG, JPEG, WebP या SVG पिकर पर छोड़ दीजिए, या कई चुनकर सबको एक साथ बदल डालिए। वर्गाकार सबसे आसान रहती है, और 256 पिक्सल से ऊपर की किसी भी तस्वीर में हर साइज़ के लिए काफ़ी ब्योरा होता है। ब्राउज़र उसे सीधे आपकी डिस्क से पढ़ता है, और इस दौरान कुछ भी कहीं नहीं भेजा जाता।
2. **जो फ़ाइलें चाहिए, वे चुनिए।** Windows और ब्राउज़र `.ico` पढ़ते हैं, और Mac `.icns` पढ़ता है, दूसरी की तरफ़ देखता तक नहीं। इनमें से कोई एक चुनिए, या दोनों, अगर आप जो बना रहे हैं वह दोनों जगह जाता है। वेबसाइट को Apple, Android और टाइल वाली अतिरिक्त तस्वीरें भी चाहिए, और वही तीसरा डिब्बा है।
3. **बताइए कि आइकन किस काम के लिए है।** वेबसाइट के favicon के लिए 16, 32 और 48 पिक्सल। Windows ऐप्लिकेशन को 256 भी चाहिए। और जिस ऐप्लिकेशन को high-DPI लैपटॉप पर ठीक दिखना है उसे वे बीच के साइज़ चाहिए जो Windows 125% और 150% स्केलिंग पर माँगता है। जो काम से मेल खाए वह चुनिए, या साइज़ खुद चुन लीजिए। सूची का हर साइज़ बताता है कि उसे माँगता कौन है। `.icns` में ऐसा कोई चुनाव है ही नहीं, क्योंकि Apple ठीक दस खाने तय करता है और दसों भीतर जाते हैं।
4. **आकार और बैकग्राउंड को सँभालिए।** आइकन वर्गाकार होता है और ज़्यादातर लोगो नहीं। खाली जगह भरिए तो पूरी तस्वीर ऊपर-नीचे जगह के साथ बची रहती है, क्रॉप कीजिए तो बीच का हिस्सा लिया जाता है, और खींचिए तो उसका आकार बिगड़ जाता है। पारदर्शिता पारदर्शिता ही रहती है, जब तक आप उसके पीछे बैठने को कोई रंग न चुन लें।
5. **डाउनलोड से पहले 16 पिक्सल वाला देख लीजिए।** आइकन सबसे ज़्यादा इसी साइज़ पर देखा जाएगा, और यही वह जगह है जहाँ पतली लकीरें और छोटे अक्षर गायब हो जाते हैं। प्रीव्यू का हर वर्ग आपकी अपनी फ़ाइल से, अपने असली साइज़ पर खींचा जाता है। सबसे छोटा वाला धब्बा भर लगे, तो इलाज कोई और सेटिंग नहीं, कोई सरल ड्रॉइंग है।
6. **फ़ाइलें ले जाइए।** एक .ico जिसमें हर साइज़ भीतर है, और आपने वही माँगा हो तो `favicon.ico` नाम के साथ, क्योंकि ब्राउज़र यही पता ढूँढ़ते हैं। आपने वह डिब्बा चुना हो तो बगल में एक .icns भी, Mac ऐप्लिकेशन बंडल में जाने के लिए तैयार। वेबसाइट वाला सेट भी चुन लीजिए, और आपको Apple, Android तथा Windows टाइल की तस्वीरें, मैनिफ़ेस्ट, और अपने पेज में चिपकाने लायक HTML का टुकड़ा भी मिल जाता है। एक अकेली फ़ाइल से ज़्यादा जो कुछ भी हो, वह एक ही ZIP में उतरता है।

## विस्तार से

[ऐसा favicon कैसे बनाएँ जो सोलह पिक्सल पर भी पढ़ा जाए](https://abox.tools/hi/guides/make-a-favicon/): favicon.ico को असल में कौन-कौन से साइज़ चाहिए, iPhone, Android और Mac कौन-सी अतिरिक्त फ़ाइलें माँगते हैं, और पोस्टर पर जँचने वाला लोगो सोलह पिक्सल पर गायब क्यों हो जाता है।

## बॉक्स में और भी टूल

- [तस्वीर से data URI](https://abox.tools/hi/image-to-data-uri/): पूरी तस्वीर, टेक्स्ट की एक पंक्ति में। सीधे CSS या HTML में चिपका दीजिए।
- [SVG से तस्वीर](https://abox.tools/hi/svg-to-image/): साइज़ बताइए। वेक्टर के पास खोने को अपना कोई साइज़ है ही नहीं।
- [तस्वीर से SVG](https://abox.tools/hi/image-to-svg/): एक आकार, एक आउटलाइन। जो नहीं होना चाहिए, उस पर बस उँगली रख दीजिए।
- [ऊँचाई तुलना चार्ट](https://abox.tools/hi/compare-heights/): ऊँचाइयाँ टाइप कीजिए, तस्वीर ले जाइए। इसे बनाने के लिए कुछ भी बाहर नहीं भेजा जाता।

## सवाल

### क्या मेरी तस्वीर कहीं अपलोड होती है?

नहीं। तस्वीर को डिकोड करने और उसका आकार घटाने का काम आपका अपना ब्राउज़र आपके अपने हार्डवेयर पर करता है, और .ico उन्हीं पिक्सलों से इसी पेज से आए कोड के ज़रिए जुड़ती है। इस टूल में किसी भी तरह की कोई नेटवर्क सुविधा है ही नहीं, यानी यह न कभी कुछ मँगाता है, न कभी कुछ भेजता है। और पेज की `Content-Security-Policy` उन सारे पतों के नाम गिना देती है जिनसे यह संपर्क कर सकता है, जिनमें से एक भी इस साइट का नहीं है।

### favicon.ico में कौन-कौन से साइज़ होने चाहिए?

16, 32 और 48, और यह पसंद का मामला नहीं है। 16 वह है जो ब्राउज़र टैब में खींचता है, 32 वह जो Windows डेस्कटॉप शॉर्टकट के लिए इस्तेमाल करता है और कई ब्राउज़र बुकमार्क के लिए, और 48 वह साइज़ है जिस पर Google किसी साइट का आइकन पढ़ता है। इससे बड़ा कुछ भी .ico के भीतर नहीं, उसके बगल में PNG के रूप में रहना चाहिए, और यहाँ का वेबसाइट सेट यही बनाता है।

### Windows ऐप्लिकेशन आइकन को कौन-से साइज़ चाहिए?

16, 32, 48 और 256, यानी वही जो Visual Studio की अपनी डिफ़ॉल्ट app.ico में होते हैं। 16 टाइटल बार और Explorer के छोटे व्यू के लिए, 32 डेस्कटॉप और टास्कबार के लिए, 48 Explorer के मझोले आइकनों के लिए, और 256 स्टार्ट मेन्यू तथा अतिरिक्त-बड़े व्यू के लिए। high-DPI डिस्प्ले पर Windows 20, 24, 40, 64 और 96 भी माँगता है, और वे न मिलें तो अपने पास मौजूद सबसे नज़दीकी साइज़ से उन्हें दोबारा नमूना लेकर बना लेता है। “हर स्केल” वाला विकल्प उन्हें भीतर रख देता है।

### फ़ाइल उस तस्वीर से बड़ी क्यों है जिससे मैंने शुरू किया था?

क्योंकि .ico एक तस्वीर नहीं, कई तस्वीरें हैं, और छोटी वाली बिना कंप्रेस किए सहेजी जाती हैं ताकि उन्हें कोई भी पढ़ सके। 32x32 की प्रविष्टि उसमें जो भी हो, ठीक 4,264 बाइट की होती है, और बिना कंप्रेस वाली 256x256 की प्रविष्टि 264 KB की। इसीलिए 64 से ऊपर के साइज़ डिफ़ॉल्ट रूप से PNG के रूप में रखे जाते हैं। “हर साइज़ के लिए PNG” चुनने पर सबसे छोटी फ़ाइल बनती है, और हर साइज़ के लिए बिना कंप्रेस वाला चुनने पर सबसे ज़्यादा जगहों पर चलने वाली।

### PNG और बिना कंप्रेस वाली प्रविष्टियों में क्या फ़र्क है?

सिर्फ़ यह कि .ico के भीतर पिक्सल सहेजे कैसे जाते हैं। बिना कंप्रेस वाली प्रविष्टि Windows की मूल व्यवस्था है, यानी एक बिटमैप हेडर, उलटे रखे पिक्सल, और एक-बिट वाला पारदर्शिता मास्क, और Windows का अब तक निकला हर संस्करण उसे पढ़ सकता है। PNG प्रविष्टि आइकन के भीतर ठूँसी गई पूरी PNG फ़ाइल है, जो बड़े साइज़ों पर तीन से दस गुना छोटी पड़ती है, पर Windows Vista के बाद ही समझी जाने लगी। डिफ़ॉल्ट हर एक को वहीं इस्तेमाल करता है जहाँ वह जीतती है, यानी 64 पिक्सल तक बिना कंप्रेस वाली, और उससे ऊपर PNG।

### क्या यह 256 पिक्सल से बड़ा आइकन बना सकता है?

नहीं, और कोई नहीं बना सकता। फ़ॉर्मैट हर भुजा को एक ही बाइट में सहेजता है, और 0 पहले से बुक है, क्योंकि उसका मतलब 256 होता है। छत यही है, इसलिए 512 पिक्सल की तस्वीर वाली .ico कोई बड़ा आइकन नहीं, टूटी हुई फ़ाइल है। आपको 512 चाहिए, तो आपको PNG चाहिए, और वेबसाइट वाला सेट Android तथा वेब ऐप की स्प्लैश स्क्रीन के लिए वही शामिल करता है।

### क्या यह पारदर्शिता बचाए रखता है?

हाँ, दोनों तरह की प्रविष्टियों में, और अल्फ़ा चैनल के बगल में वह पुराना एक-बिट वाला मास्क भी लिख देता है, ताकि अल्फ़ा पढ़ने के लिए बहुत पुराना सॉफ़्टवेयर भी काला डिब्बा खींचने के बजाय आइकन को काटकर दिखाए। अकेली फ़ाइल जिसे जान-बूझकर अपारदर्शी बनाया जाता है वह वेबसाइट सेट का Apple touch icon है। iOS उसे अपनी टाइल पर चढ़ाता है और पारदर्शिता को काला कर देता है, इसलिए उसे आपके बैकग्राउंड रंग पर चपटा कर दिया जाता है, जो डिफ़ॉल्ट रूप से सफ़ेद है।

### मेरा लोगो चौड़ा वर्डमार्क है। उसका क्या होगा?

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

### वेबसाइट सेट में क्या है, और क्या मुझे वह पूरा चाहिए?

सात PNG, एक web app manifest, एक browserconfig.xml और चिपकाने लायक HTML का एक टुकड़ा। आपको ये इसलिए चाहिए कि .ico सिर्फ़ ब्राउज़रों और Windows को ढकती है, उसके आगे कुछ नहीं। iPhone की होम स्क्रीन अपने ही एक नाम से 180 पिक्सल की PNG पढ़ती है, Android और हर इंस्टॉल प्रॉम्प्ट मैनिफ़ेस्ट पढ़ता है, और स्टार्ट मेन्यू पर पिन की गई टाइल वह XML पढ़ती है। इनमें से कोई भी .ico के भीतर नहीं झाँकेगा। सब कुछ यहीं, आपकी मशीन पर बनता है, और ZIP में एक नोट भी रहता है जो बताता है कि कौन-सी फ़ाइल किस काम की है।

### क्या यह macOS का आइकन भी बना सकता है?

हाँ। *macOS आइकन* पर निशान लगाइए, और आपको `.ico` के बगल में, या उसकी जगह, एक `.icns` मिल जाती है। यह उसी विचार का अलग कंटेनर है, और दोनों में से कोई भी सिस्टम दूसरे वाली नहीं पढ़ेगा। Windows को .ico चाहिए और Mac ऐप्लिकेशन बंडल को .icns। वहाँ साइज़ चुनने की बात ही नहीं है, क्योंकि Apple ठीक दस खाने प्रकाशित करता है, यानी 16, 32, 64, 128, 256, 512 और 1024 पिक्सल, जिनमें से तीन नीचे वाले साइज़ के Retina संस्करण के रूप में दोबारा आते हैं। दसों भीतर जाते हैं, सात रेंडर से खींचकर, और इसीलिए .icns बड़ी फ़ाइल होती है।

### .icns फ़ाइल का इस्तेमाल कैसे करूँ?

ऐप्लिकेशन के लिए वह बंडल में `YourApp.app/Contents/Resources/` पर जाती है और `Info.plist` में `CFBundleIconFile` के नीचे उसका नाम लिखा जाता है। Mac के हर पैकेजिंग टूल में इसके लिए खाना होता है। बाकी किसी भी चीज़ के लिए, Finder में फ़ाइल चुनिए, Command-C दबाइए, फिर जिस फ़ोल्डर या डिस्क इमेज को बदलना है उस पर Get Info कीजिए, ऊपर बाएँ कोने के छोटे आइकन पर क्लिक कीजिए और Command-V दबा दीजिए।

### क्या यह .icns वही है जो iconutil बनाता है?

वही दस खाने, वही चार-अक्षरी प्रकार, और हर एक में PNG, यानी वही जो `iconutil` किसी `.iconset` फ़ोल्डर से बनाता है। एक फ़र्क जान-बूझकर रखा गया है। Apple का टूल एक `TOC` तत्व भी लिखता है, यानी आगे आने वाले प्रकारों और लंबाइयों की एक अनुक्रमणिका। वह फ़ॉर्मैट का हिस्सा नहीं, बस एक अनुकूलन है, और जिस रीडर के पास वह न हो वह तत्वों को सिरे से सिरे तक चलकर उसी जवाब पर पहुँच जाता है। गलत अनुक्रमणिका उसके न होने से भी बुरी है, इसलिए उसे छोड़ दिया गया है।

### क्या मैं एक साथ कई तस्वीरें बदल सकता हूँ?

हाँ। सूची की हर तस्वीर उन्हीं सेटिंग से अपनी अलग .ico बनती है, और पूरा ढेर एक ही ZIP में उतरता है, हर तस्वीर के लिए एक फ़ोल्डर के साथ। वरना उनमें से दो का नाम favicon.ico होता और एक दूसरी के ऊपर लिख जाती। आपने जो भी नतीजे चुने हैं, वे हर तस्वीर के लिए बनते हैं। किसी भी पंक्ति पर क्लिक करके उस तस्वीर को प्रीव्यू में ले आइए।

### क्या यह मुफ़्त है, और क्या इसके लिए खाता बनाना पड़ेगा?

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

### क्या यह ऑफ़लाइन चलता है?

हाँ। पेज एक बार लोड कर लीजिए, फिर इंटरनेट काट दीजिए, यह चलता रहेगा। कुछ अपलोड नहीं हो रहा, यह साबित करने का सबसे आसान तरीका भी यही है। जो टूल आपका लोगो बदलने के लिए कहीं भेजता, वह प्लग निकालते ही रुक जाता।

## प्राइवेसी का यह दावा कैसे जाँचा जा सकता है

- **आपके लोगो के जाने के लिए कोई जगह ही नहीं है।** यह पेज जिन-जिन पतों से संपर्क कर सकता है, Content-Security-Policy उन सबके नाम गिना देती है, और उनमें से एक भी इस साइट का नहीं है। यहाँ ऐसा कोई एंडपॉइंट है ही नहीं जहाँ आपकी फ़ाइलें जमा हो सकें, और होता भी तो कोड में ऐसा कुछ नहीं है जो उन्हें भेजता।
- **यहाँ कुछ भी कहीं से कुछ नहीं मँगाता।** `src/` में कहीं भी न `fetch` है, न `XMLHttpRequest`, न `sendBeacon`। आकार घटाना कैनवस पर एक `drawImage` भर है, और हर आइकन उन्हीं पिक्सलों के आगे `src/ico.js` या `src/icns.js` का लिखा एक हेडर, इसी पेज में।
- **फ़ाइल का ब्योरा उसके अपने बाइटों से बनता है।** तैयार आइकन के बगल में दिखती साइज़ की सूची वह सूची नहीं है जो आपने माँगी थी। वह अभी-अभी लिखी गई फ़ाइल से `readIcoDirectory` या `readIcnsElements` के ज़रिए वापस पढ़ी जाती है, ताकि कोई राइटर सेटिंग से कभी टकराए तो पेज उसी वक्त बता दे। दूसरा रास्ता यह होता कि आपको तब पता चले जब Windows कुछ भी न खींचे और macOS कागज़ का कोरा पन्ना दिखा दे।
- **Google क्या लोड करता है, और उसे क्या नहीं दिया जाता।** विज्ञापन और माप वाली स्क्रिप्ट Google से आती हैं, और दान का बटन Buy Me a Coffee से। इनमें से किसी को भी आपकी तस्वीर के बारे में कुछ नहीं सौंपा जाता। फ़ाइल पढ़ने, उसका आकार बदलने या उसे लिखने वाली हर पंक्ति इसी ऑरिजिन से आती है और रिपॉज़िटरी में मौजूद है।
- **यह ऑफ़लाइन भी चलता है।** नेटवर्क काट दीजिए, टूल जस का तस काम करता रहेगा, क्योंकि इसमें नेटवर्क वाला कोई कदम कभी था ही नहीं। सबसे आसान सबूत यही है।

**खुद जाँच लीजिए।** ऊपर लिखी किसी भी बात को भरोसे पर मानने की ज़रूरत नहीं। यह पेज रिपॉज़िटरी के टेम्पलेट और कॉन्फ़िग से बनता है, एक ऐसी बिल्ड स्क्रिप्ट के ज़रिए जिसे आप पढ़ भी सकते हैं और खुद चला भी सकते हैं। उसका नतीजा `dist` ब्रांच पर कमिट रहता है, यानी जो सर्व हो रहा है और सोर्स से बिल्ड करने पर जो बनता है, दोनों का फ़र्क आप खुद देख सकते हैं: https://github.com/A-Box-of-Tools/website

सबसे पहले पढ़ने लायक फ़ाइलें ये हैं — Content-Security-Policy के लिए `config/site.toml`, दोनों आइकन फ़ॉर्मैट के लिए `src/ico.js` और `src/icns.js`, जिनमें से एक में डायरेक्टरी, प्रविष्टियाँ और मास्क हैं और दूसरे में Apple के नाम वाले दस खाने। और पेज पर दिखता हर साइज़ आता कहाँ से है, यह देखने के लिए `src/sizes.js`।