एक Favicon सेट जो 2026 में हर जगह काम करे
छह आकार, एक .ico, एक manifest — सब कुछ जो आपको चाहिए ताकि एक favicon शिप कर सकें जो हर ब्राउज़र, iOS होम स्क्रीन और Windows टास्कबार पर 2026 में सही दिखे।
Favicons तुच्छ लगते हैं। एक शिप करें और सौ edge cases सामने आते हैं: iOS होम-स्क्रीन आइकन धुंधला है, Android Chrome टैब गलत रंग है, Windows पिन धुंधले 16×16 दिखाता है। यह गाइड शोर को हटाता है और बिल्कुल वही कवर करता है जो आपको 2026 में चाहिए — न कम, न ज्यादा।
न्यूनतम व्यवहार्य सेट
छह एसेट हर सतह को कवर करते हैं जो आपकी साइट का आइकन दिखाएगी:
favicon.ico— मल्टी-साइज कंटेनर जिसमें 16×16, 32×32, 48×48 अंदर हो (लीगेसी ब्राउज़र, Windows Explorer, पिन किए गए टैब)।favicon-16x16.png,favicon-32x32.png— आधुनिक ब्राउज़र टैब।apple-touch-icon.png(180×180) — iOS होम स्क्रीन, Safari रीडिंग लिस्ट।android-chrome-192x192.png,android-chrome-512x512.png— Android होम स्क्रीन, PWA इंस्टॉल प्रॉम्प्ट।site.webmanifest— PWA कॉन्फ़िगरेशन जो Android आइकन की ओर इशारा करता है और थीम कलर को परिभाषित करता है।
बस यही है। सब कुछ और (Safari पिन किया गया टैब SVG, पुराने Apple टच वेरिएंट, Windows टाइल इमेज) लीगेसी है। आधुनिक ब्राउज़र 192 या 512 PNG को अनुग्रहपूर्वक फॉलबैक करते हैं।
2026 में .ico क्यों शिप होता है
एक .ico फाइल एक बाइनरी कंटेनर है जो अलग-अलग आकारों पर कई PNG इमेज रख सकता है। जब कोई ब्राउज़र /favicon.ico के लिए पूछता है (कुछ अभी भी डिफ़ॉल्ट रूप से करते हैं), तो इसे एक अनुरोध में तीनों आकार मिलते हैं। रेंडरर वह चुनता है जो वर्तमान सतह के लिए सबसे अच्छा है — Windows Explorer के लिए 48×48, ब्राउज़र टैब के लिए 16×16।
एक PNG का नाम .ico में बदलने से केवल एक आकार होता है। यह ज्यादातर काम करता है क्योंकि ब्राउज़र क्षमाशील होते हैं, लेकिन Windows Explorer और कुछ ईमेल क्लाइंट या तो इसे धुंधला प्रस्तुत करेंगे या इसे दिखाने से इनकार करेंगे। सामंजस्य के लिए एक असली .ico शिप करें।
site.webmanifest क्या करता है
जब कोई उपयोगकर्ता आपकी साइट को अपनी Android होम स्क्रीन में जोड़ता है या इसे PWA के रूप में इंस्टॉल करता है, तो ब्राउज़र site.webmanifest को पढ़ता है ताकि वह जान सके कि इंस्टॉल किया गया ऐप कैसा दिखना चाहिए। यह परिभाषित करता है:
name/short_name— आइकन के नीचे का लेबल।icons— किस आकार पर कौन से PNG का उपयोग करें।theme_color— जब ऐप खुला हो तो स्टेटस बार का रंग।background_color— लॉन्च के दौरान स्प्लैश स्क्रीन का पृष्ठभूमि।display— आमतौर परstandaloneताकि ऐप बिना ब्राउज़र क्रोम के खुले।
manifest के बिना, Android apple-touch-icon में फॉलबैक करता है और आपकी साइट को एक ब्राउज़र विंडो के अंदर दिखाता है। एक के साथ, यह एक नेटिव ऐप की तरह दिखता है।
HTML स्निपेट
हर फाइल आपके वेब रूट में जाती है। हर साइट को <head> में इस ब्लॉक की जरूरत है:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="#YOUR_HEX">16×16 के लिए डिज़ाइन करना
आपका सुंदर विस्तृत लोगो 16 पिक्सल पर मर जाता है। 16 पिक्सल पर स्पष्ट रूप से पढ़ने वाला favicon बनाने के नियम:
- एक आकार। एक सर्कल, एक वर्ग, या एक मजबूत मोनोग्राम। यौगिक रूपों से बचें।
- उच्च कंट्रास्ट। अग्रभूमि और पृष्ठभूमि कम से कम WCAG AA अलग होने चाहिए। सूक्ष्म ग्रेडिएंट गायब हो जाते हैं।
- सुरक्षित मार्जिन। 10–20% पैडिंग छोड़ें। ब्राउज़र अक्सर अपने स्वयं का 1px बॉर्डर जोड़ते हैं।
- टेक्स्ट? एक एकल बोल्ड अक्षर 16px पर पूरे शब्द की तुलना में बेहतर काम करता है।
aukimi Favicon Generator एक इमेज या 30 सेकंड के अंदर एक अक्षर से छह फाइलें और HTML स्निपेट उत्पन्न करता है। यह Microsoft ICONDIR स्पेक के अनुसार एक असली मल्टी-साइज .ico उत्पन्न करता है, एक नाम बदला हुआ PNG नहीं। अपलोड करें, अपने आकार चुनें, एक बिना जिप के बंडल डाउनलोड करें, स्निपेट पेस्ट करें — हो गया।
सामान्य गलतियां
.icoको CDN से कैश हेडर के बिना सर्व करना। ब्राउज़र favicons को आक्रामक रूप से कैश करते हैं। एक रीडिजाइन के बाद एक रिफ्रेश को बाध्य करने के लिए एक संस्करण वाला URL (?v=2) उपयोग करें।- प्रति सबडोमेन अलग-अलग आइकन। आमतौर पर एपेक्स पर एक एकल
favicon.icoवही है जो उपयोगकर्ता उम्मीद करते हैं — अपनी पहचान को खंडित न करें। theme-colormeta को भूलना। मोबाइल Chrome इस मान से मेल खाने के लिए ब्राउज़र क्रोम को टिंट करता है। इसे छोड़ने से आप डिफ़ॉल्ट ग्रे के साथ रह जाते हैं।
एक अच्छा favicon सबसे अच्छे तरीके से उबाऊ है — उपयोगकर्ता ध्यान देते हैं जब यह गायब है या गलत है, कभी जब यह सही है। छह फाइलें शिप करें और आगे बढ़ें।
क्या आपको यह लेख पसंद आया?
संबंधित लेख
क्रिएटिव स्टैक बस ढह गया: अप्रैल के अंत में एक सप्ताह की AI टूलिंग, 2026
27 अप्रैल से 4 मई 2026 के बीच, Adobe, Luma, Novi, fal, Figma, Canva, HeyGen और Anthropic सभी ने आठ दिनों में एक ही सीमा को पार किया। यहाँ बताया गया है कि क्या लॉन्च हुआ, इसका क्या मतलब है, और ब्राउज़र-आधारित क्रिएटिव सुइट्स को इसे एकीकृत करने का प्रयास कहाँ छोड़ता है।
2026 में AI संगीत और SFX: इंडी गेम ऑडियो में वास्तव में क्या काम करता है
तीन साल पहले, इंडी गेम ऑडियो का मतलब या तो रॉयल्टी-मुक्त लाइब्रेरी लाइसेंस करना था (सस्ता, जेनेरिक, हर गेम समान लगता है) या एक संगीतकार को नियुक्त करना था (बेहतरीन, महंगा)। 2026 में, AI स्कोर बनाता है जो शिप होता है। यहां जानिए कौन से टूल्स डिलीवर करते हैं — और कहां एक मानव संगीतकार अभी भी जीतता है।
2026 में AI मेश जेनरेशन: गेम पाइपलाइन में असल में क्या शिप होता है
Image-to-3D अठारह महीने में "अजीब डेमो" से "इंडी प्रोजेक्ट में शिप हो रहा है" तक पहुँच गया। Tripo, Meshy, Rodin, और Hyper3D प्रोडक्शन में असल में क्या करते हैं — और कहाँ 3D आर्टिस्ट हर बार मॉडल को हराता है।