Favicon शब्दावली

Favicon वह छोटा आइकन है जो browser आपकी साइट के लिए tab, bookmark और history में दिखाता है। यह क्या है, कौन-से size और format चाहिए, और इसे कैसे जोड़ें।

App icon किसी browser tab में साइट को नहीं, बल्कि home screen या launcher पर इंस्टॉल किए गए app को दर्शाता है। हर platform इसे कहाँ से पढ़ता है, और क्या भेजें।

Favicon छोटा tab आइकन है; Open Graph image वह बड़ा preview है जो आपका link साझा होने पर दिखता है। अलग कामों के लिए अलग फ़ाइलें: कौन-सा क्या है।

Logo आपका पूरा brand mark है; favicon एक छोटा व्युत्पन्न है जिसे 16 pixels पर पढ़ा जाना चाहिए। आप logo को बस सिकोड़ क्यों नहीं सकते, और एक काम करने वाला कैसे निकालें।

हाथ से एक favicon बनाने का मतलब है हर size export करना और ख़ुद tags लिखना; एक generator दोनों सेकंडों में कर देता है। हाथ से बनाना कब ठीक है और कब नहीं।

Favicon sizes की पूरी गाइड। Browsers, iOS, Android और PWA के लिए हर dimension, कौन-से ज़रूरी हैं, और हर फ़ाइल कहाँ जाती है।

<link rel="icon"> tag browser को बताता है कि आपका favicon कहाँ है। rel, href, type और sizes हर एक क्या करता है, tag कहाँ जाता है, और भेजने लायक़ आधुनिक सेट।

"shortcut icon" favicons के लिए एक पुराना rel मान है। "shortcut" keyword क्यों अनावश्यक है, क्या आपको अब भी इसकी ज़रूरत है, और इसके बजाय क्या लिखें।

Browsers favicons को अधिकांश assets से अधिक ज़ोर से और अधिक समय तक, और page से अलग cache करते हैं। वे इतने चिपकू क्यों होते हैं, और favicon को refresh करने के लिए कैसे मजबूर करें।

एक favicon OS की light या dark सेटिंग पर प्रतिक्रिया कर सकता है: अंदर एक media query वाला SVG, या link tag पर prefers-color-scheme से बदली जाने वाली दो PNG।

Google आपके परिणाम के पास एक favicon दिखाता है, मुख्यतः mobile पर। इसे किस size और format की ज़रूरत है, यह आइकन कैसे ढूँढता है, और आपका क्यों नहीं दिख सकता।

Browsers और crawlers आपके domain root से /favicon.ico माँगते हैं, चाहे आप इसे लिंक करें या न करें। फ़ाइल root पर क्यों होती है, और frameworks इसे रखने की जगह कैसे बदलते हैं।

BIMI समर्थन करने वाले inboxes में emails के पास आपका brand logo दिखाता है: email का favicon। इसे क्या चाहिए: एक SVG Tiny PS logo, DMARC enforcement, और अक्सर एक certificate।

Favicons चौकोर slots में रेंडर होते हैं, इसलिए एक ग़ैर-चौकोर image या तो letterbox हो जाती है या खिंच जाती है। चौकोर व्यावहारिक रूप से क्यों ज़रूरी है, और एक चौड़े logo को कैसे संभालें।

Favicons बहुत छोटे होते हैं: एक favicon.ico आमतौर पर कुछ किलोबाइट और PNG sizes 100KB से काफ़ी कम। size को क्या तय करता है, और एक बड़ा favicon एक चेतावनी क्यों है।

ICO बनाम PNG favicon की तुलना: colour depth, transparency, file size और browser support, साथ ही दोनों को बिना टकराव भेजने के head tags।

SVG favicon एक vector फ़ाइल है जो हर size पर तीखा रहता है और dark mode पर प्रतिक्रिया कर सकता है। Browser support, link tag, और रखने लायक़ fallbacks।

favicon.ico वह आइकन है जिसे जब कोई आइकन घोषित न हो तो browsers आपकी साइट root से माँगते हैं। फ़ाइल के अंदर क्या है, इसे कहाँ रखें, और क्यों रखें।

आप एक अलग फ़ाइल के बजाय एक favicon को base64 data URI के रूप में inline कर सकते हैं। यह कब एक request बचाता है, और वे surfaces जहाँ यह चुपचाप टूट जाता है।

कुछ browsers tab में एक GIF favicon को animate करते हैं। कौन इसे सपोर्ट करते हैं, साइटें live status के लिए JavaScript क्यों इस्तेमाल करती हैं, और कब इसे स्थिर रखें।

WebP favicons अधिकांश आधुनिक browsers में काम करते हैं पर हर जगह नहीं, और /favicon.ico के लिए कभी नहीं। एक WebP आइकन कब ठीक है और PNG तथा ICO सुरक्षित विकल्प क्यों बने रहते हैं।

Transparent favicons tab में साफ़ दिखते हैं पर iOS home screens पर टूट जाते हैं, जो काले पर composite करती हैं। Transparency कब मदद करती है और कब एक ठोस background इस्तेमाल करें।

आप एक एक-line inline SVG से एक emoji को favicon के रूप में इस्तेमाल कर सकते हैं: एक त्वरित placeholder के लिए सुविधाजनक। यह हर OS पर अलग क्यों रेंडर होता है, और असली फ़ाइल कब export करें।

Manifest icons manifest.json के icons array की entries हैं। हर field क्या करता है, कौन-से sizes घोषित करें, और browsers एक कैसे चुनते हैं।

Maskable icon पूरे चौकोर को भरता है ताकि platforms इसे किसी भी आकार में crop कर सकें। 80% safe zone, manifest का purpose field, और इसे कैसे टेस्ट करें।

Web app manifest एक JSON फ़ाइल है जो browsers को बताती है कि इंस्टॉल होने पर आपकी साइट कैसे व्यवहार करे: उसका नाम, icons, रंग और display mode। यह क्या रखती है और क्यों।

किसी browser द्वारा install की पेशकश करने से पहले एक PWA को विशिष्ट icons चाहिए: manifest में 192x192 और 512x512, आदर्श रूप से एक maskable, साथ ही iOS के लिए apple-touch-icon।

Manifest की display property तय करती है कि एक इंस्टॉल किया गया PWA कैसा दिखे: browser, minimal-ui, standalone या fullscreen। हर mode क्या दिखाता है और कौन-सा चुनें।

एक manifest में दो रंग हैं जो अलग काम करते हैं: theme_color आपके app के इर्द-गिर्द OS UI को रँगता है, background_color splash screen को रँगता है। साथ ही meta theme-color।

apple-touch-icon वह PNG है जिसे iOS तब इस्तेमाल करता है जब कोई साइट Home Screen पर जोड़ी जाती है। 180x180 size, link tag, और transparency काली क्यों हो जाती है।

theme-color meta tag browsers को बताता है कि आपके page के इर्द-गिर्द UI किस रंग में रँगें। यह कहाँ दिखता है, dark mode वेरिएंट, और manifest समकक्ष।

Safari pinned tabs rel="mask-icon" से घोषित एक monochrome SVG इस्तेमाल करते हैं। फ़ाइल कैसी होनी चाहिए, color attribute, और क्या यह अब भी मायने रखता है।

precomposed वेरिएंट पुराने iOS को home screen आइकन पर अपनी चमक न जोड़ने को कहता था। क्या यह अब भी कुछ करता है, और आज क्या इस्तेमाल करें।

browserconfig.xml और msapplication-* meta tags Windows तथा पुराने Edge के लिए pinned-site tiles परिभाषित करते थे। उन्होंने क्या किया और क्या आपको अब भी इनकी ज़रूरत है।

apple-mobile-web-app-capable meta tag iOS पर एक home-screen web app को full-screen चलाता है। यह क्या करता है, status bar tag, और आधुनिक manifest विकल्प।

apple-touch-startup-image iOS home screen में जोड़े गए एक web app के लिए launch screen सेट करता है। इसे प्रति device size एक image क्यों चाहिए और इसमें शामिल media queries।