फ़ेविकॉन और वेब ऐप आइकन तुरंत बनाइए
एक स्रोत और वे सारी फ़ाइलें जो आधुनिक साइट को चाहिए: बहु-रिज़ॉल्यूशन favicon.ico, वेक्टर favicon.svg, Apple touch आइकन, Android लॉन्चर और maskable आइकन, वेब मैनिफ़ेस्ट और वह head स्निपेट जो सबको जोड़ता है।
कौन-सी फ़ाइलें बनानी हैं
इसे अपने <head> में चिपकाइए
आपने जो फ़ाइलें चुनी हैं, उनके अनुसार यह बदलता रहता है। पैक साइट की जड़ में रखिए और यह ब्लॉक चिपका दीजिए।
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#3b82f6">
यह कैसे काम करता है
स्रोत चुनिए
एक इमोजी, एक से तीन अक्षर, या अपना लोगो। फ़ाइल अपलोड करने से वह सिर्फ़ रुकी रहती है: जब तक आप न कहें, कुछ नहीं बनता।
पृष्ठभूमि सजाइए
आकृति, ठोस रंग या ग्रेडिएंट, किनारा और भीतरी जगह। हर बदलाव पर झलक फिर से बनती है।
हाथ से जमाइए
खींचकर हिलाइए, पहिये से कर्सर की ओर ज़ूम कीजिए, घुमाइए। Ctrl+Z हर कदम पूर्ववत कर देता है।
पैक भेजिए
ZIP डाउनलोड कीजिए, साइट की जड़ में रखिए और head वाला हिस्सा चिपका दीजिए।
सचमुच का बहु-फ़्रेम ICO
16, 32 और 48 पिक्सेल के फ़्रेम 32-बिट BMP के रूप में पूरी AND मास्क के साथ लिखे जाते हैं, ताकि पुराने Windows शेल और सख़्त आइकन पार्सर भी फ़ाइल स्वीकार करें।
असली स्क्विर्कल
गोल पृष्ठभूमि एक सुपरइलिप्स है, वही वक्र-परिवार जो iOS अपने ऐप आइकनों में उपयोग करता है, न कि उसकी नकल करता गोल आयत।
वेक्टर favicon.svg
इमोजी और अक्षर वाले आइकन असली वेक्टर मार्कअप में निर्यात होते हैं, इसलिए हर स्क्रीन पर और डार्क मोड में साफ़ रहते हैं।
सही iOS touch आइकन
Apple का आइकन आपके चुने रंग पर सपाट किया जाता है, क्योंकि iOS होम स्क्रीन की पारदर्शिता को ठोस काले रंग में दिखाता है।
बाकी सुइट से जुड़ा हुआ
तैयार आइकन को डाउनलोड और दोबारा अपलोड किए बिना सीधे दबाने, काटने, बदलने या पृष्ठभूमि हटाने भेजिए।
कुछ भी टैब से बाहर नहीं जाता
आपके ब्राउज़र में चलता Canvas और ZIP राइटर। न अपलोड, न API, न खाता, और नेटवर्क बंद होने पर भी चलता रहता है।
एक बार 1024 पिक्सेल पर बनाकर, ठीक से छोटा किया गया
इमोजी को सीधे 16 पिक्सेल के फ़्रेम में बनाना ही वह वजह है जिससे ज़्यादातर बने-बनाए फ़ेविकॉन धुंधले दिखते हैं: रंगीन इमोजी फ़ॉन्ट अपने सबसे छोटे बिटमैप पर गिर जाते हैं। FaviconBolt एक ही 1024 पिक्सेल का मास्टर बनाता है और हर आकार उसी से निकालता है, जो 16 पिक्सेल पर आदर्श छोटा करने से 87% अधिक निकट मापा गया, बजाय सीधे उसी आकार में बनाने के। प्री-मल्टिप्लाइड अल्फ़ा पर लगाया वैकल्पिक शार्पन उस किनारे के कंट्रास्ट को लौटा देता है जो औसत लेने में चला जाता है।
100% स्थानीय निर्माण
आपका लोगो कभी आपके कंप्यूटर से बाहर नहीं जाता। रेंडरिंग, ICO बाइनरी और ZIP सब पेज के भीतर बनते हैं, और इस पेज की तस्वीरें इनलाइन SVG हैं, इसलिए किसी CDN से भी कुछ नहीं आता।
हर वह फ़ाइल जो ब्राउज़र वाकई माँगेगा
ZIP को अपनी साइट की जड़ में खोलिए और बना हुआ head ब्लॉक चिपका दीजिए। मैनिफ़ेस्ट में किसी प्लेसहोल्डर के बजाय आपकी साइट का असली नाम, start URL और स्कोप होता है, इसलिए इंस्टॉल संकेत सही चीज़ दिखाता है।
ICO के फ़्रेम अंदर छिपे PNG के बजाय AND मास्क वाले BMP हैं, Apple touch आइकन अपारदर्शी जाता है, और Android maskable आइकन किनारे तक भरा होता है ताकि सिस्टम की मास्क आपके चित्र को दो बार न काटे।
अक्सर पूछे जाने वाले प्रश्न
Qfavicon.ico फ़ाइल के अंदर क्या होता है?+
तीन आइकन फ़्रेम — 16x16, 32x32 और 48x48 — एक ही बाइनरी में बंधे होते हैं। वे 32-बिट BMP के रूप में 1-बिट AND मास्क के साथ रखे जाते हैं, यही प्रारूप हर आइकन पाठक समझता है। PNG में दबाए फ़्रेम केवल Windows Vista से समर्थित हैं और कुछ पार्सर आज भी उन्हें अस्वीकार कर देते हैं।
QApple touch आइकन की पृष्ठभूमि ठोस क्यों है?+
iOS होम स्क्रीन आइकनों में अल्फ़ा चैनल की अनदेखी करता है और पारदर्शी हिस्से को काले पर बैठा देता है। touch आइकन को अपने चुने रंग पर सपाट करना ही इसका रूप नियंत्रित करने का एकमात्र तरीका है।
Qmaskable आइकन किसलिए है?+
Android अपनी मास्क लगाता है, जो किसी लॉन्चर में वृत्त है और किसी में स्क्विर्कल। maskable आइकन किनारे तक भरा बनता है और चित्र एक सुरक्षित क्षेत्र में रहता है, ताकि सिस्टम उसे काटे तो आपका लोगो न कटे।
Qक्या मुझे वेक्टर favicon.svg मिल सकता है?+
हाँ, इमोजी और अक्षर मोड में यह असली वेक्टर मार्कअप है। SVG लोगो अपलोड करें तो वह भी वेक्टर ही रहता है। रास्टर अपलोड के लिए हम 512 पिक्सेल का रेंडर SVG के भीतर रखते हैं और यह बता भी देते हैं, यह दिखावा नहीं करते कि JPEG को वेक्टर बना दिया।
Qक्या मैं आइकन हाथ से जमा सकता हूँ?+
चित्र हिलाने के लिए कैनवास खींचिए, कर्सर की ओर ज़ूम के लिए पहिया घुमाइए और घुमाव का स्लाइडर चलाइए। तीर खिसकाते हैं, प्लस और माइनस ज़ूम करते हैं, 0 रीसेट करता है और Ctrl+Z इतिहास में पीछे ले जाता है। Alt दबाए रखने पर मूल छवि दिखती है।
Qक्या कुछ अपलोड होता है?+
नहीं। फ़ाइलें आपका अपना ब्राउज़र ही डिकोड, रेंडर और ज़िप करता है। किसी भी चरण पर सर्वर से बात नहीं होती, इसीलिए नेटवर्क बंद होने पर भी यह चलता रहता है।