IconEditor

वर्कफ़्लो · 9 मिनट

शानदार Windows ऐप आइकन कैसे बनाएँ: स्टेप-बाय-स्टेप गाइड

एक एप्लिकेशन आइकन दिन में दर्जनों बार 16 पिक्सेल पर देखा जाता है और कभी-कभार 256 पर। दोनों के लिए डिज़ाइन करना ही पूरी कला है। यहाँ IconEditor के साथ एक ऐसा वर्कफ़्लो है जो काम करता है।

वर्कफ़्लो

आइडिया से app.ico तक छह स्टेप

  1. 01

    एक मज़बूत आकार से शुरू करें

    आइकन साइज़ पैनल: 256 से 16 px तक, हर एक के साथ थंबनेल, बना/खाली स्टेटस और Windows में उसका उपयोग
    साइज़ लिस्ट हर एंट्री को साथ-साथ दिखाती है — अच्छा आकार 16 px थंबनेल में भी पहचान में आता है।

    एक ऐसा सिल्हूट चुनें जो एक नज़र में पढ़ा जा सके — एक अक्षर, एक साधारण वस्तु, एक ज्यामितीय चिह्न। फ़ोटो जैसे डिटेल, पतली आउटलाइन और दो अक्षरों से लंबे टेक्स्ट से बचें। खुद से पूछें: क्या मैं इसे डार्क टास्कबार पर 16×16 के धब्बे के रूप में पहचान पाऊँगा?

  2. 02

    पहले 256×256 ड्रॉ करें

    एडिटर खोलें, 256×256 चुनें और मास्टर वर्ज़न बनाएँ। साफ़ ज्यामिति के लिए बड़े डायमीटर वाले लाइन, रेक्टैंगल और एलिप्स टूल, सॉफ़्ट शेडिंग के लिए 100 से कम हार्डनेस वाला ब्रश, और सपाट हिस्सों के लिए फ़िल इस्तेमाल करें। रेक्टैंगल या एलिप्स खींचते समय Shift दबाए रखें ताकि वह स्क्वायर / सर्कल रहे।

    आर्टवर्क के चारों ओर करीब 8–10 % पैडिंग रखें। Windows अपना कोई मार्जिन नहीं जोड़ता, और किनारे को छूता हुआ आकार सिस्टम आइकन के बगल में तंग दिखता है।

    टेक्स्ट टूल चुनकर 256×256 कैनवास एडिट करते हुए: बाईं ओर टूल लिस्ट और टेक्स्ट ऑप्शन, कैनवास पर टेक्स्ट का लाइव प्रीव्यू
    256×256 मास्टर। बाईं टूल लिस्ट में हर टूल का कीबोर्ड शॉर्टकट है; ऑप्शन पैनल टूल के साथ बदलता है।
  3. 03

    छोटा करें, फिर हाथ से सुधारें

    कैनवास के ऊपर “यहाँ से स्केल करें” मेन्यू, जिसमें सोर्स के रूप में इस्तेमाल हो सकने वाले बने हुए साइज़ सूचीबद्ध हैं
    यहाँ से स्केल करें हर बने हुए साइज़ को संभावित सोर्स के रूप में दिखाता है।

    48×48 चुनें और कैनवास के ऊपर 256×256 से स्केल करें पर क्लिक करें। एडिटर Lanczos फ़िल्टर से रीसैंपल करता है, जो ऑटोमैटिक स्केलिंग का सबसे अच्छा नतीजा है — पर 32, 24 और ख़ासकर 16 पिक्सेल पर ऑटोमैटिक स्केलिंग हमेशा धुँधले किनारे छोड़ती है। ग्रिड चालू करें, ज़ूम इन करें, और:

    • अहम किनारों को पेंसिल से पूरे पिक्सेल पर स्नैप करें; दो पिक्सेल के बीच फैली 1-px लाइन ग्रे और सॉफ़्ट दिखती है।
    • सरल बनाएँ: अंदरूनी डिटेल हटाएँ, 32 पर स्ट्रोक कम से कम 2 px और 16 पर 1–2 px मोटे करें।
    • छोटे साइज़ पर कंट्रास्ट थोड़ा बढ़ाएँ; छोटे आइकन देखने में सैचुरेशन खो देते हैं।
    • बड़े वर्ज़न से रंग उठाने के लिए आईड्रॉपर इस्तेमाल करें ताकि पूरा सेट एक जैसा रहे।
  4. 04

    हर जगह जाँचें

    Windows में प्रीव्यू पर क्लिक करें। डायलॉग आइकन को डार्क टास्कबार, डेस्कटॉप वॉलपेपर, Explorer के लिस्ट और लार्ज-आइकन व्यू, विंडो टाइटल बार और ब्राउज़र टैब में दिखाता है। यह जो आम समस्याएँ पकड़ता है:

    • डार्क आर्टवर्क डार्क टास्कबार पर गायब हो जाना — एक हल्की आउटलाइन या हल्का बेस शेप जोड़ें।
    • अर्ध-पारदर्शी किनारे वॉलपेपर पर गंदे दिखना — 16 और 24 px पर किनारे के पिक्सेल का अल्फ़ा कसें।
    • टेक्स्ट पढ़ने लायक न रहना — 32 px से नीचे उसे किसी आकार से बदलें।
    “Windows में प्रीव्यू” डायलॉग: आइकन टास्कबार पर, डेस्कटॉप शॉर्टकट के रूप में, और Explorer के लिस्ट व लार्ज-आइकन व्यू में
    हर मॉक-अप वही एंट्री इस्तेमाल करता है जो Windows चुनता — टास्कबार पर 24 px, लिस्ट व्यू में 16 px, डेस्कटॉप पर 48 px।
  5. 05

    एक्सपोर्ट करें

    एक्सपोर्ट एक ही .ico लिखता है जिसमें आपके चुने हर साइज़ होते हैं। 256 एंट्री PNG-कंप्रेस्ड होती है (जैसा Windows Vista से उम्मीद करता है), छोटी एंट्रियाँ अल्फ़ा वाली 32-बिट BMP। जो साइज़ आपने नहीं बनाए, वे अपने-आप सबसे नज़दीकी बड़े साइज़ से भर जाते हैं, इसलिए फ़ाइल हमेशा पूरी रहती है। आप मौजूदा साइज़ को PNG के रूप में, या स्टोर लिस्टिंग व इंस्टॉलर के लिए सभी साइज़ की ZIP भी डाउनलोड कर सकते हैं।

    एक्सपोर्ट डायलॉग: सात साइज़ चेकबॉक्स, फ़ाइल नाम फ़ील्ड और Download .ICO, PNG व ZIP बटन
  6. 06

    अपने एप्लिकेशन से जोड़ें

    एक्सपोर्ट डायलॉग में कॉपी-रेडी स्निपेट हैं:

    एक्सपोर्ट डायलॉग के स्निपेट टैब — C/C++ .rc, .NET .csproj, Electron, Tauri, Web favicon — .rc उदाहरण के साथ
    • C / C++ — अपनी .rc फ़ाइल में एक ICON स्टेटमेंट; सबसे कम नंबर वाला आइकन रिसोर्स एक्ज़ीक्यूटेबल का आइकन बनता है।
    • .NET — .csproj में <ApplicationIcon>, और WPF विंडो पर Icon="…"।
    • Electron — electron-builder के लिए build.win.icon और BrowserWindow का icon ऑप्शन।
    • Tauri — tauri.conf.json में bundle.icon।

    आइकन बदलने के बाद Windows अपने आइकन कैश से पुराना आइकन दिखाता रह सकता है। अलग फ़ाइल साइज़ के साथ एक्ज़ीक्यूटेबल दोबारा बिल्ड करने, या कैश साफ़ करने (ie4uinit.exe -show) से यह ठीक हो जाता है।

इनसे बचें

आम गलतियाँ

चार चीज़ें जो एक अच्छे-खासे आइकन को Windows में कहीं-न-कहीं गलत दिखा देती हैं।

  • .ico नाम दी गई PNG

    सिर्फ़ एक 256 px PNG को .ico नाम देकर शिप करना। कुछ जगह चल जाता है और बाकी हर जगह धुँधला दिखता है।

  • 16 और 24 px नहीं

    Explorer का लिस्ट व्यू और टास्कबार का स्मॉल मोड इन्हें लगातार इस्तेमाल करते हैं — इन्हें भूलना मतलब वहीं धुँधला डाउनस्केल जहाँ लोग सबसे ज़्यादा देखते हैं।

  • पूरे आइकन पर ग्रेडिएंट

    16 px पर यह एक धब्बा बन जाता है। ग्रेडिएंट सिर्फ़ बड़े हिस्सों पर रखें, और छोटे साइज़ में उन्हें सपाट कर दें।

  • बेक की हुई ड्रॉप शैडो

    Windows आइकन को कई बैकग्राउंड पर कंपोज़िट करता है; बेक की हुई शैडो उनमें से ज़्यादातर पर गलत दिखती है।

आगे पढ़ें

Windows आइकन पर और भी

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

पढ़ते-पढ़ते आज़माएँ

एडिटर पूरी तरह मुफ़्त है, कोई अकाउंट नहीं चाहिए, और सातों साइज़ वाली Windows-रेडी .ico फ़ाइल एक्सपोर्ट करता है।

एडिटर खोलें