यह पेज हिन्दी में दिखाया जा रहा है, क्योंकि आपका ब्राउज़र यही भाषा माँगता है।
इस पेज का कोड चालू नहीं हुआ।
index.html को सीधे किसी फ़ोल्डर से खोलने पर ब्राउज़र JavaScript मॉड्यूल रोक देता है, इसलिए कोई तस्वीर चुनने पर कुछ नहीं होगा। इसके बजाय फ़ोल्डर को http पर सर्व कीजिए:
ऊपर फ़ाइल चुनते ही यह खुल जाएगा।तैयार — इंटरनेट काट दीजिए, यह फिर भी चलता रहेगा।इस ब्राउज़र में उपलब्ध नहीं (बाकी सब फिर भी चलता है)।ऑफ़लाइन कैश के लिए https:// या localhost चाहिए।यहाँ कैश नहीं हो सकता, पर अपलोड फिर भी कुछ नहीं होता।आपकी फ़ाइलें कहीं नहीं गईं। {total} फ़ाइलें लोड हुईं, और वे सब इसी साइट की अपनी हैं। {platform}किसी चीज़ ने {hosts} से संपर्क किया, और यह टूल ऐसा कभी नहीं करता। यह देखने लायक बात है। {platform}विज्ञापन, माप और दान वाले बटन के लिए साइट की अपनी स्क्रिप्ट {hosts} होस्ट से आईं। उनमें से किसी को न कोई फ़ाइल मिली, न उसका एक बाइट।विज्ञापन, माप और दान वाले बटन के लिए साइट की अपनी स्क्रिप्ट {hosts} होस्ट से आईं। उनमें से किसी को न कोई फ़ाइल मिली, न उसका एक बाइट।कुछ गड़बड़ हो गई: {detail}। दोबारा शुरू करने के लिए पेज फिर से लोड कीजिए।{count} फ़ाइल पढ़ी जा रही है…{count} फ़ाइलें पढ़ी जा रही हैं…कोई उदाहरण आज़माइएउदाहरण बनाया जा रहा है…यह ब्राउज़र उदाहरण नहीं बना सका। इसके बजाय कोई फ़ाइल चुनिए।
तस्वीर से ICO — favicon, Windows और macOS आइकन बनाइए
एक तस्वीर भीतर। ब्राउज़र, Windows या Mac जो भी साइज़ माँगे, वह सब बाहर।
● यह टूल तस्वीरें कभी अपलोड नहीं करता। यहाँ कोई सर्वर है ही नहीं।
आकार घटाना और खुद आइकन फ़ाइलें बनाना, दोनों आपके अपने ब्राउज़र में होते हैं। तस्वीर उसी कैनवस से खींची जाती है जो आपके ब्राउज़र में पहले से आता है, और हर कंटेनर उन्हीं पिक्सलों से जुड़ता है, यानी Windows की .ico और macOS की .icns, दोनों src/ico.js तथा src/icns.js की उन कुछ सौ पंक्तियों से जिन्हें आप पढ़ सकते हैं। इस टूल में किसी भी तरह की कोई नेटवर्क सुविधा है ही नहीं, इसलिए यहाँ से कुछ मँगाया भी नहीं जा सकता और भेजा भी नहीं जा सकता। और मान लीजिए कोई रास्ता होता भी, तो इस पेज के दूसरी तरफ़ ऐसा कोई सर्वर ही नहीं है जिसे लोगो भेजा जा सके।
✗ कोई अपलोड नहीं
✗ कोई खाता नहीं
✗ कोई वॉटरमार्क नहीं
✓ ऑफ़लाइन चलता है
✓ ओपन सोर्स
लाइव जाँच:जाँच जारी…
ऑफ़लाइन:जाँच जारी…
हमारी बात पर भरोसा मत कीजिए। DevTools खोलिए, Network टैब पर नज़र रखिए, और कोई आइकन बनाइए। एक भी रिक्वेस्ट में न कोई तस्वीर जाती है, न थंबनेल, न फ़ाइल का नाम, न आपकी चुनी फ़ाइल का एक बाइट। या फिर इंटरनेट काट दीजिए और तब भी कोई आइकन बनाकर देखिए।
प्राइवेसी का यह दावा कैसे जाँचा जा सकता है
आपके लोगो के जाने के लिए कोई जगह ही नहीं है। यह पेज जिन-जिन पतों से संपर्क कर सकता है, 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 ब्रांच पर कमिट रहता है, यानी जो सर्व हो रहा है और सोर्स से बिल्ड करने पर जो बनता है, दोनों का फ़र्क आप खुद देख सकते हैं:
सबसे पहले पढ़ने लायक फ़ाइलें ये हैं — Content-Security-Policy के लिए config/site.toml, दोनों आइकन फ़ॉर्मैट के लिए src/ico.js और src/icns.js, जिनमें से एक में डायरेक्टरी, प्रविष्टियाँ और मास्क हैं और दूसरे में Apple के नाम वाले दस खाने। और पेज पर दिखता हर साइज़ आता कहाँ से है, यह देखने के लिए src/sizes.js।
अगर आपके दफ़्तर का सुरक्षा सॉफ़्टवेयर अपलोड की चेतावनी दे। वह उस पल पर नज़र रखता है जब ब्राउज़र में फ़ाइल चुनी जाती है, और यह नहीं जान सकता कि पन्ना उसे भेजने वाला है या नहीं — इसलिए चुनने पर ही चेतावनी देता है। यहाँ से कुछ नहीं भेजा जाता: ब्राउज़र के डेवलपर टूल खोलिए, Network पर जाइए, और एक फ़ाइल चुनिए। उसे ले जाने वाला कोई अनुरोध नहीं है, और पन्ने की अपनी स्थानीय झलक के अलावा कोई अनुरोध ही नहीं। यही जाँच आपकी IT टीम आधे मिनट में कर सकती है।
1 कोई तस्वीर चुनिए
2 बताइए कि आइकन किस काम के लिए है
आइकन फ़ाइल एक तस्वीर नहीं, कई तस्वीरें होती हैं, यानी वही लोगो हर उस साइज़ पर दोबारा खींचा हुआ जो उसे पढ़ने वाली चीज़ माँगती है। वे साइज़ कौन-से हैं, यह पसंद का मामला नहीं है। ब्राउज़र को तीन चाहिए, high-DPI लैपटॉप पर चलने वाले ऐप्लिकेशन को दस, Mac को अपने ही दस, और Windows Vista से पहले लिखी किसी चीज़ को वे बिलकुल अलग ढंग से सहेजे हुए चाहिए।
Windows आइकन — .ico इसे हर ब्राउज़र favicon के रूप में पढ़ता है, और Windows किसी ऐप्लिकेशन, शॉर्टकट तथा फ़ोल्डर के लिए। साइज़ नीचे से आपको चुनने हैं।
macOS आइकन — .icns यही Mac ऐप्लिकेशन बंडल साथ लेकर चलता है। Apple ठीक दस खाने तय करता है, 16 पिक्सल से 1024 तक, इसलिए चुनने को कुछ है ही नहीं। दसों भीतर जाते हैं, सात रेंडर से खींचकर, क्योंकि कोई Retina खाना और उससे अगला साइज़ एक ही तस्वीर होते हैं।
किसी वेबसाइट के आइकन सेट का बाकी हिस्सा .ico ब्राउज़र के टैब और Windows को ढक लेती है। वह iPhone की होम स्क्रीन, Android के इंस्टॉल प्रॉम्प्ट, या स्टार्ट मेन्यू पर पिन की गई टाइल को नहीं ढकती। वे 180px की PNG, एक web app manifest और एक XML फ़ाइल पढ़ते हैं, और इनमें से कोई भी .ico के भीतर नहीं झाँकेगा। इस पर निशान लगाइए और आपको वे सब, मैनिफ़ेस्ट, और अपने पेज में चिपकाने लायक HTML का टुकड़ा भी मिल जाता है।
3 उसी साइज़ पर जाँचिए जिस पर वह दिखेगा
कुछ भी डाउनलोड करने से पहले देखने लायक हिस्सा यही है। जो लोगो 512 पिक्सल पर बखूबी पढ़ा जाता है, वह ब्राउज़र के टैब में सोलह पिक्सल चौड़ा होता है, और उसके पतले हिस्से उतने में टिकते ही नहीं, चाहे वे वर्डमार्क के स्ट्रोक हों, बाल जैसा कोई किनारा हो, या कोई ग्रेडिएंट। नीचे का हर वर्ग आपकी चुनी फ़ाइल से, अपने असली साइज़ पर खींचा जाता है।
तैयार
इसे अपने <head> में चिपकाइए
{name}: यह ऐसी तस्वीर नहीं जिसे यह टूल पढ़ सके।{name}: यह ब्राउज़र इसे खोल नहीं सका।यह ब्राउज़र तस्वीर को खोल नहीं सका।इस ब्राउज़र ने PNG लिखने से मना कर दिया।आइकन में कम से कम एक तस्वीर तो चाहिए।आइकन की तस्वीर शून्य पिक्सल चौड़ी नहीं हो सकती।{size} किसी .ico में नहीं समाता: यह फ़ॉर्मैट हर किनारे को एक बाइट में रखता है, इसलिए 256 ही सबसे बड़ा है।पिक्सल बफ़र उस साइज़ से मेल नहीं खाता जो वह बताता है।यह .ico नहीं: हेडर रखने भर को भी छोटा है।यह .ico नहीं: टाइप फ़ील्ड 1 नहीं है।डायरेक्ट्री फ़ाइल के अंत से आगे निकल जाती है।एक एंट्री फ़ाइल के अंत से आगे की ओर इशारा करती है।आइकन में कम से कम एक तस्वीर तो चाहिए।“{type}” चार अक्षरों वाला icns टाइप नहीं है।यह .icns नहीं: हेडर रखने भर को भी छोटा है।यह .icns नहीं: हस्ताक्षर “icns” नहीं है।हेडर {claimed} बाइट बताता है और फ़ाइल {actual} की है।एक एलिमेंट फ़ाइल के अंत से आगे निकल जाता है।{type} एलिमेंट ऐसी लंबाई बताता है जो इस फ़ाइल में समा ही नहीं सकती।{n} बाइट{n} KB{n} MB1 तस्वीर{n} तस्वीरें1 साइज़{n} साइज़1 खाना{n} खाने{a}, {b}{a} और {b}{a} और {b}{size} · {bytes} · वर्गाकार{size} · {bytes} · वर्गाकार नहींइसे झलक में दिखाइए{name} को सूची से हटाइएब्राउज़र का टैब, पता-पट्टी, और Explorer में दिखने वाला छोटा आइकन125% पर Windows की सूची वाली दिखावटें150% पर Windows की टास्कबारडेस्कटॉप, टास्कबार, और ब्राउज़र की बुकमार्क पट्टी125% पर डेस्कटॉपExplorer के मँझोले आइकन, और वह साइज़ जिस पर Google फ़ेविकॉन पढ़ता है200% पर Explorer, और Alt-Tab वाला स्विचरExplorer के बड़े आइकनपुराना जंबो साइज़, जिसे इंस्टॉलर आज भी पढ़ते हैंExplorer के बहुत बड़े आइकन और स्टार्ट मेन्यू; किसी .ico में जो सबसे बड़ा समा सकता हैवेबसाइट का फ़ेविकॉनवही पुराना favicon.ico जो साइट की जड़ में रखा जाता है। तीन साइज़ ही पूरी परंपरा है: टैब के लिए 16, बुकमार्क और Windows शॉर्टकट के लिए 32, और 48 इसलिए कि Google साइट का आइकन उसी साइज़ पर पढ़ता है।Windows ऐप्लिकेशन का आइकनजो किसी .exe या शॉर्टकट को चाहिए, और जो खुद Visual Studio की app.ico में होता है: शेल के तीन साइज़ और साथ में वह 256 जिससे स्टार्ट मेन्यू और Explorer की बहुत-बड़ी दिखावट खींचती हैं।Windows ऐप्लिकेशन, हर स्केल परवही आइकन, उन बीच के साइज़ों के साथ जो Windows 125%, 150% और 200% डिस्प्ले स्केलिंग पर माँगता है। फ़ाइल बड़ी होगी, और हाई-डीपीआई लैपटॉप पर यही अकेली ऐसी फ़ाइल है जिसे चुपचाप दोबारा नहीं नापा जाता।ज़्यादा से ज़्यादा अनुकूलतातीन साइज़, और हर एक Vista से पहले वाले तरीके से सहेजा हुआ — इंस्टॉलरों, एम्बेडेड उपकरणों और उन पुराने शेल टूलों के लिए जो .ico खुद पढ़ते हैं और नहीं जानते कि उसके भीतर PNG क्या कर रहा है।साइज़ खुद चुनिएहर वह साइज़ जो यह फ़ॉर्मैट रख सकता है। सबको चुन लेना शायद ही कभी सही जवाब होता है: हर एक पूरी तस्वीर है, और जो साइज़ किसी ने माँगा ही नहीं उसे कोई पढ़ता भी नहीं।{list} pxजो आप नीचे चुनेंकुछ चुना ही नहीं गया, इसलिए बनाने को कुछ है ही नहीं।कोई साइज़ नहीं चुना गया, इसलिए .ico में कुछ होगा ही नहीं। कोई साइज़ चुनिए, या कोई और आउटपुट।हर तस्वीर पर: {parts}।हर तस्वीर पर: {parts}। .icns 1024 पिक्सल तक खींची जाती है, इसलिए वही बड़ी वाली है; Mac यही माँगता है।{count} रखने वाली एक .icoApple के सारे {n} खाने रखने वाली एक .icns{n} PNG और वे तीन टेक्स्ट फ़ाइलें जो किसी साइट को चाहिएकुछ चुना ही नहीं गया, इसलिए फ़ाइल में कुछ होगा ही नहीं।कम से कम एक साइज़ चुनिए।{count} — {list} — {kind}। और जो तस्वीर पहले से वर्गाकार न हो उसे {fit}।64 पिक्सल तक Vista से पहले वाले तरीके से और उससे ऊपर PNG के रूप में सहेजा जाता हैहर साइज़ PNG के रूप में सहेजा जाता हैहर साइज़ Vista से पहले वाले तरीके से सहेजा जाता हैवर्ग तक भर दिया जाता है, और भरा हुआ हिस्सा पारदर्शी छोड़ा जाता हैपृष्ठभूमि के रंग से वर्ग तक भर दिया जाता हैबीच के वर्ग तक क्रॉप कर दिया जाता हैखींचकर वर्ग बना दिया जाता है{n} बिना दबाए, जो ठीक {size} बनते हैं{n} PNG के रूप में, जिनका साइज़ तस्वीर पर निर्भर करता है{parts}। {tail}फ़ाइल में कुछ भी दबाया नहीं गया, इसलिए यह हर चीज़ में खुलेगी — Windows Vista से पुराने सॉफ़्टवेयर में भी।हर एंट्री PNG है, जो किसी .ico का सबसे छोटा रूप है और Windows XP तथा कुछ इंस्टॉलरों के लिए अपठनीय है।छोटे साइज़ पुराने तरीके से सहेजे जाते हैं ताकि उन्हें कोई भी पढ़ सके, और बड़े PNG के रूप में, क्योंकि बचत वहीं है।{name} {size} की है, यानी वर्गाकार नहीं, और आइकन हमेशा वर्गाकार होता है। बीच का वर्ग लिया जा रहा है; किनारे कट रहे हैं।{name} {size} की है, यानी वर्गाकार नहीं, और आइकन हमेशा वर्गाकार होता है। इसे खींचा जा रहा है, इसलिए हर साइज़ पर दबी हुई लगेगी।{name} {size} की है, यानी वर्गाकार नहीं, और आइकन हमेशा वर्गाकार होता है। इसे भरा जा रहा है, इसलिए पूरी तस्वीर बची रहती है और ऊपर-नीचे जगह छूटती है।यह सिर्फ़ {size} की है, इसलिए {list} तस्वीर से बड़ा है। वह साइज़ खींचा नहीं, फुलाया जाता है, और तस्वीर फुलाने से वह ब्योरा वापस नहीं आता जो उसमें था ही नहीं।यह सिर्फ़ {size} की है, इसलिए {list} तस्वीर से बड़े हैं। वे साइज़ खींचे नहीं, फुलाए जाते हैं, और तस्वीर फुलाने से वह ब्योरा वापस नहीं आता जो उसमें था ही नहीं।{shape} {small}{name}, हर उस साइज़ पर खींची हुई जो फ़ाइल में जा रहा है। ऊपर का हर वर्ग इस स्क्रीन पर अपने असली साइज़ में है, और शतरंज जैसी बिसात पर, ताकि पारदर्शिता पारदर्शिता ही दिखे। अगर 16px वाला एक धूसर धब्बा लग रहा है, तो आइकन को कोई और सेटिंग नहीं, सरल चित्र चाहिए।{note} {list} पिक्सल भी लिखे जाते हैं, और यहाँ इसलिए छोड़ दिए गए कि उतना बड़ा वर्ग स्क्रीन पर समाएगा ही नहीं — और गड़बड़ कभी वही नहीं होता।{count} खींची जा रही हैं…{name} खींची जा रही है…हो गया।{name} में {slots} हैं और यह {size} की है।{names}, दोनों मिलाकर {size}।{count} से {n} आइकन फ़ाइलें बनीं, कुल {size}।{summary} वेबसाइट वाले सेट का बाकी हिस्सा बगल की ZIP में है।{slots}, {size}{name} से, {size}।{detail} इसे किसी Mac ऐप्लिकेशन बंडल में डालिए, या Get Info से फ़ोल्डर का आइकन बना दीजिए।{detail} साथ में आइकन सेट के बाकी हिस्से के लिए {n} और फ़ाइलें।{label} · {detail} · {size}बिना दबाया.{kind} डाउनलोड कीजिएकॉपीकॉपी हो गयाचुन लिया — Ctrl+C दबाइएआइकन। favicon.ico साइट की जड़ में जाता है; ब्राउज़र उस पते को बिना बताए ही माँगते हैं, इसलिए उसे अपने <link> की ज़रूरत नहीं।आपकी साइट का नामटैब, उन ब्राउज़रों के लिए जो .ico से ज़्यादा PNG पसंद करते हैंबुकमार्क पट्टी और पिन किया हुआ Windows शॉर्टकटiOS की होम स्क्रीन। अपारदर्शी खींचा जाता है: iOS पारदर्शिता को काला कर देता हैAndroid की होम स्क्रीन, और इंस्टॉल का न्योतावह स्प्लैश स्क्रीन जो कोई वेब ऐप शुरू होते समय दिखाता हैवही आइकन, उस सुरक्षित इलाके के भीतर जिस तक कोई अनुकूली लॉन्चर काटता हैWindows स्टार्ट मेन्यू में पिन किया हुआ टाइलवेबसाइट का आइकन सेटabox.tools/image-to-ico/ पर ब्राउज़र के भीतर ही बनाया गया — इसे बनाने के लिए कुछ अपलोड नहीं हुआ, और इन फ़ाइलों के बारे में कुछ भी कहीं नहीं भेजा गया।इस फ़ाइल और head.html को छोड़कर बाकी हर फ़ाइल अपनी साइट की जड़ में अपलोड कीजिए, ताकि वे /favicon.ico, /apple-touch-icon.png वगैरह पर जवाब दें। site.webmanifest, browserconfig.xml और head.html के रास्ते यही मानकर चलते हैं। अगर वे किसी सबफ़ोल्डर में जा रही हों तो उन तीनों फ़ाइलों को उसी हिसाब से बदल दीजिए।वही पुराना फ़ेविकॉन, जिसमें {sizes} पिक्सल वाले रूप हैंइसे Android पढ़ता है, और होम स्क्रीन पर जोड़ने का हर न्योता भीइसे Windows स्टार्ट मेन्यू में पिन किया हुआ टाइल पढ़ता हैवह मार्कअप जो आपके <head> में चिपकाना है; अपलोड करने वाली फ़ाइल नहींअपलोड करने से पहले site.webmanifest में नाम अपनी साइट का कर दीजिए, और उसमें रखे दोनों रंग वही जो आइकन पर जँचें।ध्यान दीजिए: यहाँ कोई favicon.ico नहीं है, क्योंकि .ico वाला आउटपुट बंद था। साइट को सचमुच एक चाहिए — यही वह पता है जो ब्राउज़र खुद माँगते हैं।आपकी तस्वीरें कहीं नहीं गईं। {total} फ़ाइलें लोड हुईं, और वे सब इसी साइट की अपनी हैं। {platform}किसी चीज़ ने {hosts} से संपर्क किया, और यह टूल ऐसा कभी नहीं करता। यह देखने लायक बात है। {platform}विज्ञापन, माप और दान वाले बटन के लिए साइट की अपनी स्क्रिप्ट {hosts} होस्ट से आईं। उनमें से किसी को न कोई तस्वीर मिली, न उसका एक बाइट।विज्ञापन, माप और दान वाले बटन के लिए साइट की अपनी स्क्रिप्ट {hosts} होस्ट से आईं। उनमें से किसी को न कोई तस्वीर मिली, न उसका एक बाइट।
क्या इससे काम बन गया?
क्या गड़बड़ हुई?
शुक्रिया — इससे मदद मिलती है।
सिर्फ़ आपका जवाब भेजा जाता है, वह भी तभी जब आप बटन दबाते हैं। आपकी फ़ाइल, उसका नाम या उससे जुड़ी कोई बात कभी नहीं।
# तस्वीर से 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`।
बिना कुछ अपलोड किए .ico फ़ाइल कैसे बनाएँ
तस्वीर चुनिए। कोई PNG, JPEG, WebP या SVG पिकर पर छोड़ दीजिए, या कई चुनकर सबको एक साथ बदल डालिए। वर्गाकार सबसे आसान रहती है, और 256 पिक्सल से ऊपर की किसी भी तस्वीर में हर साइज़ के लिए काफ़ी ब्योरा होता है। ब्राउज़र उसे सीधे आपकी डिस्क से पढ़ता है, और इस दौरान कुछ भी कहीं नहीं भेजा जाता।
जो फ़ाइलें चाहिए, वे चुनिए। Windows और ब्राउज़र .ico पढ़ते हैं, और Mac .icns पढ़ता है, दूसरी की तरफ़ देखता तक नहीं। इनमें से कोई एक चुनिए, या दोनों, अगर आप जो बना रहे हैं वह दोनों जगह जाता है। वेबसाइट को Apple, Android और टाइल वाली अतिरिक्त तस्वीरें भी चाहिए, और वही तीसरा डिब्बा है।
बताइए कि आइकन किस काम के लिए है। वेबसाइट के favicon के लिए 16, 32 और 48 पिक्सल। Windows ऐप्लिकेशन को 256 भी चाहिए। और जिस ऐप्लिकेशन को high-DPI लैपटॉप पर ठीक दिखना है उसे वे बीच के साइज़ चाहिए जो Windows 125% और 150% स्केलिंग पर माँगता है। जो काम से मेल खाए वह चुनिए, या साइज़ खुद चुन लीजिए। सूची का हर साइज़ बताता है कि उसे माँगता कौन है। .icns में ऐसा कोई चुनाव है ही नहीं, क्योंकि Apple ठीक दस खाने तय करता है और दसों भीतर जाते हैं।
आकार और बैकग्राउंड को सँभालिए। आइकन वर्गाकार होता है और ज़्यादातर लोगो नहीं। खाली जगह भरिए तो पूरी तस्वीर ऊपर-नीचे जगह के साथ बची रहती है, क्रॉप कीजिए तो बीच का हिस्सा लिया जाता है, और खींचिए तो उसका आकार बिगड़ जाता है। पारदर्शिता पारदर्शिता ही रहती है, जब तक आप उसके पीछे बैठने को कोई रंग न चुन लें।
डाउनलोड से पहले 16 पिक्सल वाला देख लीजिए। आइकन सबसे ज़्यादा इसी साइज़ पर देखा जाएगा, और यही वह जगह है जहाँ पतली लकीरें और छोटे अक्षर गायब हो जाते हैं। प्रीव्यू का हर वर्ग आपकी अपनी फ़ाइल से, अपने असली साइज़ पर खींचा जाता है। सबसे छोटा वाला धब्बा भर लगे, तो इलाज कोई और सेटिंग नहीं, कोई सरल ड्रॉइंग है।
फ़ाइलें ले जाइए। एक .ico जिसमें हर साइज़ भीतर है, और आपने वही माँगा हो तो favicon.ico नाम के साथ, क्योंकि ब्राउज़र यही पता ढूँढ़ते हैं। आपने वह डिब्बा चुना हो तो बगल में एक .icns भी, Mac ऐप्लिकेशन बंडल में जाने के लिए तैयार। वेबसाइट वाला सेट भी चुन लीजिए, और आपको Apple, Android तथा Windows टाइल की तस्वीरें, मैनिफ़ेस्ट, और अपने पेज में चिपकाने लायक HTML का टुकड़ा भी मिल जाता है। एक अकेली फ़ाइल से ज़्यादा जो कुछ भी हो, वह एक ही ZIP में उतरता है।
विस्तार से
ऐसा favicon कैसे बनाएँ जो सोलह पिक्सल पर भी पढ़ा जाएfavicon.ico को असल में कौन-कौन से साइज़ चाहिए, iPhone, Android और Mac कौन-सी अतिरिक्त फ़ाइलें माँगते हैं, और पोस्टर पर जँचने वाला लोगो सोलह पिक्सल पर गायब क्यों हो जाता है।
नहीं। तस्वीर को डिकोड करने और उसका आकार घटाने का काम आपका अपना ब्राउज़र आपके अपने हार्डवेयर पर करता है, और .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 होता और एक दूसरी के ऊपर लिख जाती। आपने जो भी नतीजे चुने हैं, वे हर तस्वीर के लिए बनते हैं। किसी भी पंक्ति पर क्लिक करके उस तस्वीर को प्रीव्यू में ले आइए।
क्या यह मुफ़्त है, और क्या इसके लिए खाता बनाना पड़ेगा?
यह मुफ़्त है, और यहाँ न कोई खाता है, न साइन-इन, न ट्रायल, न वॉटरमार्क। फ़ाइलों की गिनती या साइज़ पर भी कोई सीमा नहीं है, क्योंकि इनका बिल चुकाने वाला कोई सर्वर है ही नहीं। काम आपके अपने डिवाइस पर होता है। साइट पर विज्ञापन हैं और खर्च वही उठाते हैं, लेकिन विज्ञापनों को आपकी तस्वीरों के बारे में कुछ नहीं दिया जाता।
क्या यह ऑफ़लाइन चलता है?
हाँ। पेज एक बार लोड कर लीजिए, फिर इंटरनेट काट दीजिए, यह चलता रहेगा। कुछ अपलोड नहीं हो रहा, यह साबित करने का सबसे आसान तरीका भी यही है। जो टूल आपका लोगो बदलने के लिए कहीं भेजता, वह प्लग निकालते ही रुक जाता।