फेविकॉन UX: एक बेहतरीन फेविकॉन क्या बनाता है (चेकलिस्ट)

एक बेहतरीन फेविकॉन एक सरल, उच्च-कंट्रास्ट चिह्न होता है, आमतौर पर आपका लोगोमार्क या एक-दो अक्षर, जो हल्के और गहरे दोनों ब्राउज़र टैब पर 16x16 पिक्सेल में भी पढ़ने योग्य रहता है, आपके ब्रांड से मेल खाता है और बहुत कम बदलता है। इस गाइड की बाकी सारी बातें (पिक्सेल अलाइनमेंट, रंग, पैडिंग, पारदर्शिता, फ़ाइल साइज़) इन्हीं लक्ष्यों के लिए हैं: दर्जनों खुले टैब के बीच आपकी साइट को तुरंत पहचानने योग्य बनाना।

फेविकॉन छोटा होता है, लेकिन यह कई जगह दिखता है: ब्राउज़र टैब, बुकमार्क बार, हिस्ट्री सूची, टैब-सर्च मेनू, मोबाइल और डेस्कटॉप पर Google सर्च परिणाम, और फ़ोन की होम स्क्रीन। जिन उपयोगकर्ताओं के कई टैब खुले होते हैं, उनके लिए शीर्षक अक्सर कट कर गायब हो जाता है और केवल आइकन ही संकेत बचता है। इसलिए यह सजावट नहीं, बल्कि एक वास्तविक नेविगेशन तत्व है।

1. 16x16 पर पठनीयता

क्लासिक फेविकॉन आकार 16x16 CSS पिक्सेल है। सामान्य डिस्प्ले पर यह सचमुच 256 पिक्सेल होता है; 2x रेटिना डिस्प्ले पर उसी जगह के लिए ब्राउज़र आमतौर पर 32x32 की इमेज चुनता है। आप जो भी डिज़ाइन करें, उसे इस छोटे आकार में टिके रहना होगा।

इसे सरल रखें

एक आकृति या एक से दो अक्षर। एक मोटा अक्षर, किसी प्रतीक वाला वृत्त या सरल ज्यामितीय चिह्न अच्छा काम करता है। तीन अक्षर या पूरा शब्द शोर बन जाएगा।
एक ही केंद्र बिंदु। अगर आप आइकन को पाँच शब्दों में बयान नहीं कर सकते, तो वह बहुत जटिल है।
कोई ग्रेडिएंट, शैडो या बारीक टेक्सचर नहीं। छोटे आकार में ये धुंधले धब्बे बन जाते हैं।

पिक्सेल ग्रिड से मिलाएँ

16x16 पर, ग्रिड से आधा पिक्सेल हटकर रखी गई रेखा दो पंक्तियों के पिक्सेल में एंटी-अलियास हो जाती है और धूसर व धुंधली दिखती है। किनारों को पूरे पिक्सेल की सीमा पर रखें और जहाँ आकृति सममित हो वहाँ सम चौड़ाई इस्तेमाल करें। अगर आप वेक्टर टूल से एक्सपोर्ट करते हैं, तो पिक्सेल स्नैपिंग चालू करें, या छोटे किए गए नतीजे को जाँचकर हाथ से ठीक करें।

पतली रेखाओं से बचें

16x16 पर 2 पिक्सेल से पतली रेखाएँ (आइकन की चौड़ाई का लगभग 12 प्रतिशत) गायब हो जाती हैं या अलग-अलग आकारों में झिलमिलाती हैं। रेखाओं को मोटा करें, अंदरूनी विवरण हटाएँ और छोटे अंतराल मिला दें। एक मोटा, थोड़ा भारी ग्लिफ़ आमतौर पर विस्तृत लोगो की हूबहू छोटी प्रतिकृति से बेहतर पढ़ा जाता है।

हाथ से हिंटिंग करें

ICO और PNG फ़ाइलों में फ़ॉन्ट-शैली की हिंटिंग नहीं होती, इसलिए इसका विकल्प मैन्युअल पिक्सेल एडिटिंग है: आप अलग-अलग पिक्सेल समायोजित करते हैं ताकि वक्र, तिरछी रेखाएँ और काउंटर ("a" या "e" जैसे अक्षरों के छेद) साफ़ बने रहें। स्वचालित डाउनस्केलिंग पहला अच्छा मसौदा है, लेकिन हाथ से रखे गए कुछ पिक्सेल अक्सर एक धब्बे और पहचाने जा सकने वाले अक्षर के बीच का फ़र्क बन जाते हैं। MakeFav पिक्सेल एडिटर इसी के लिए बना है: 16x16 कैनवास खोलें, समस्या वाले पिक्सेल सुधारें और एक्सपोर्ट करें।

2. हल्के और गहरे टैब पर कंट्रास्ट

ब्राउज़र अब आमतौर पर डार्क मोड में चलते हैं, और कई उपयोगकर्ताओं की टैब पट्टी पेज की थीम से अलग होती है। पारदर्शी बैकग्राउंड वाला गहरा नेवी आइकन सफ़ेद टैब पर बिल्कुल सही हो सकता है और गहरे धूसर टैब पर लगभग अदृश्य। हमेशा दोनों पर टेस्ट करें।

व्यावहारिक समाधान

बैकग्राउंड आकृति जोड़ें। ब्रांड रंग में ठोस गोल कोनों वाला वर्ग या वृत्त गारंटी देता है कि चिह्न का अपना कंट्रास्ट रहे, चाहे टैब कैसा भी हो।
पतली आउटलाइन या हेलो इस्तेमाल करें। गहरे ग्लिफ़ के चारों ओर 1px का हल्का किनारा (या इसका उलटा) दोनों थीम पर आकृति को दिखाता रहता है, लेकिन 16x16 पर इसे साफ़ रहना चाहिए, इसलिए टेस्ट करें।
मध्यम टोन वाले ब्रांड रंग चुनें। गहरा नीला, नारंगी, हरा या मैजेंटा जैसे रंग आमतौर पर सफ़ेद और लगभग काली दोनों सतहों पर चलते हैं। बहुत हल्का पीला या बहुत गहरा नेवी जोखिम भरे हैं।
अनुकूली SVG फेविकॉन इस्तेमाल करें। SVG में prefers-color-scheme मीडिया क्वेरी शामिल की जा सकती है ताकि आइकन सिस्टम थीम के साथ बदल जाए।

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

ध्यान दें कि मीडिया क्वेरी ऑपरेटिंग सिस्टम या ब्राउज़र की थीम को दर्शाती है, जिसे टैब पट्टी आमतौर पर फ़ॉलो करती है, पर हमेशा नहीं। SVG फेविकॉन का समर्थन भी अलग-अलग है: Chrome और Firefox इन्हें संभालते हैं, जबकि Safari ऐतिहासिक रूप से पीछे रहा है, इसलिए PNG या ICO फ़ॉलबैक हमेशा रखें। ठोस बैकग्राउंड वाला डिज़ाइन सबसे मज़बूत विकल्प है क्योंकि इसे किसी थीम लॉजिक की ज़रूरत नहीं होती।

3. पहचान और ब्रांड की एकरूपता

लोगोमार्क (प्रतीक या मोनोग्राम) इस्तेमाल करें, वर्डमार्क वाला पूरा लोगो लॉकअप नहीं। 16x16 आइकन के अंदर का टेक्स्ट पढ़ा नहीं जा सकता, और चौड़े क्षैतिज लोगो को वर्ग में समेटने पर बीच में सिर्फ़ एक छोटी पट्टी बचती है।

अगर आपके ब्रांड का कोई प्रतीक है, तो उसे बस छोटा करने के बजाय छोटे आकारों के लिए सरल बनाएँ। कम विवरण वाला "फेविकॉन संस्करण" मानक प्रथा है।
अगर आपका ब्रांड केवल वर्डमार्क है, तो पहला अक्षर या अक्षरों की कोई विशिष्ट जोड़ी लें और उसे अपने ब्रांड टाइपफ़ेस में भारी वज़न में रखें।
रंगों को अपने लोगो, ऐप आइकन और सोशल अवतार के अनुरूप रखें, ताकि उपयोगकर्ता हर जगह उसी ब्रांड को पहचाने।

विशिष्टता उतनी ही मायने रखती है जितनी हूबहू समानता। टैब की एक पंक्ति देखिए: अगर तीन और साइटें भी नीला वृत्त इस्तेमाल करती हैं, तो आपकी अलग नहीं दिखेगी। अलग आकृति या रंग किसी हूबहू छोटे रूप से ज़्यादा उपयोगी है।

4. रंग: सीमित, गहरा पैलेट

इतने कम पिक्सेल में हर अतिरिक्त रंग गड़बड़ी बढ़ाता है। एक या दो रंग, और ज़्यादा से ज़्यादा सफ़ेद या काला रखने का लक्ष्य रखें। गहरे (सैचुरेटेड) रंग छोटे आकारों में पेस्टल रंगों से बेहतर दिखते हैं, जो टैब बैकग्राउंड में घुल जाते हैं।

एक्सेसिबिलिटी की सोच से थोड़ा उधार लें। WCAG सार्थक ग्राफ़िकल वस्तुओं के लिए कम से कम 3:1 कंट्रास्ट माँगता है (सक्सेस क्राइटेरियन 1.4.11, नॉन-टेक्स्ट कंट्रास्ट)। फेविकॉन औपचारिक रूप से इसमें नहीं आता, क्योंकि यह पेज की सामग्री नहीं बल्कि ब्राउज़र क्रोम है, लेकिन ग्लिफ़ और उसके बैकग्राउंड के बीच, और आइकन और टैब के बीच 3:1 एक उचित लक्ष्य है। साथ ही, केवल रंगत के सहारे कुछ भी बताने से बचें: एक ही आइकन के लाल और हरे संस्करण कई रंग-अंध उपयोगकर्ताओं के लिए अलग नहीं दिखते, इसलिए आकृति बदलें या कोई प्रतीक जोड़ें।

5. आकृति, पैडिंग और सेफ़ ज़ोन

वर्ग को भरें

ब्राउज़र टैब फेविकॉन को एक निश्चित छोटे आकार में दिखाते हैं, इसलिए अतिरिक्त मार्जिन आपके चिह्न को बस छोटा करता है। मानक टैब आइकन के लिए ज़्यादातर कैनवास का उपयोग करें, केवल एक-दो पिक्सेल की खाली जगह के साथ, ताकि चिह्न जितना संभव हो उतना बड़ा हो।

गोल या चौकोर?

ब्राउज़र आमतौर पर टैब फेविकॉन को क्रॉप नहीं करते, इसलिए आप जो आकृति बनाते हैं वही उपयोगकर्ता देखते हैं। थोड़े गोल कोनों वाला वर्ग साफ़-सुथरा दिखता है और एकसमान बैकग्राउंड देता है; पारदर्शिता पर कोई मुक्त-रूप ग्लिफ़ या वृत्त हल्का और ज़्यादा विशिष्ट दिख सकता है। दोनों ठीक हैं। एक चुनें और अपना पूरा आइकन सेट एकरूप रखें।

Apple टच आइकन

iOS apple-touch-icon में अपने गोल कोने खुद जोड़ता है (180x180 सामान्य आकार है)। बिना पहले से गोल किए कोनों वाला पूरा भरा हुआ वर्ग दें, वरना कोनों में गहरी या सफ़ेद पतली पट्टियाँ दिख सकती हैं।

Android और PWA के लिए मास्केबल आइकन

मास्केबल आइकन को ऑपरेटिंग सिस्टम वृत्त, स्क्विरकल या अन्य आकृतियों में क्रॉप कर देता है। सभी ज़रूरी सामग्री सेफ़ ज़ोन के अंदर रखें: आइकन के केंद्र में एक वृत्त, जिसकी त्रिज्या आइकन की चौड़ाई का 40 प्रतिशत हो। बैकग्राउंड रंग को किनारों तक फैलाएँ ताकि कोई भी मास्क ठीक लगे। किनारे से किनारे तक कसे हुए टैब फेविकॉन को मास्केबल आइकन के रूप में दोबारा इस्तेमाल न करें, क्योंकि मास्क उसे काट देगा।

6. पारदर्शिता

टैब फेविकॉन के लिए पारदर्शिता ठीक है, और इसी से केवल-ग्लिफ़ वाला आइकन किसी भी टैब रंग पर साफ़ बैठता है। Apple टच आइकन के लिए यह समस्या है: iOS पारदर्शी हिस्सों को ठोस रंग (आमतौर पर काला) से भर देता है, जो डिज़ाइन बिगाड़ सकता है। apple-touch-icon को हमेशा अपने ब्रांड रंग का अपारदर्शी बैकग्राउंड दें। यही बात मास्केबल आइकन और ज़्यादातर Android होम-स्क्रीन उपयोगों पर लागू होती है, जहाँ अपारदर्शी बैकग्राउंड अनुमानित नतीजे देता है।

7. स्थिरता: इसे बार-बार न बदलें

फेविकॉन दोहराव से पहचान बनाता है। इसे बार-बार बदलने से उपयोगकर्ताओं को फिर से सीखना पड़ता है कि कौन-सा टैब आपका है, और इससे तकनीकी सिरदर्द भी होता है। ब्राउज़र फेविकॉन को आक्रामक तरीके से कैश करते हैं, और Google उन्हें आपके पेजों से अलग लाकर संग्रहीत करता है, इसलिए नया आइकन सर्च परिणामों में दिखने में दिन या हफ़्ते लग सकते हैं। Google स्थिर फेविकॉन URL, 48 पिक्सेल के गुणज वाले आकार (48x48, 96x96 आदि) का आइकन, और ऐसी फ़ाइल भी माँगता है जिसे वह क्रॉल कर सके (robots.txt से अवरुद्ध न हो)। फेविकॉन बदलने को रीब्रांड स्तर का निर्णय मानें, मौसमी सजावट नहीं।

8. नोटिफ़िकेशन स्थितियाँ और डायनामिक फेविकॉन

कुछ वेब ऐप अपठित संदेश, रिकॉर्डिंग स्थिति या त्रुटि बताने के लिए फेविकॉन बदलते हैं। अच्छे ढंग से किया जाए तो यह मददगार है; ज़्यादा हो जाए तो परेशान करता है।

छोटा बैज इस्तेमाल करें (एक बिंदु या छोटी गिनती) किसी कोने में, पूरा नया डिज़ाइन नहीं। बेस आइकन पहचाने जाने योग्य रहना चाहिए।
इसे कम रखें। बैज उन घटनाओं के लिए रखें जिनमें उपयोगकर्ता की कार्रवाई चाहिए। आइकन को लगातार एनिमेट न करें।
संख्याओं की सीमा रखें। 16x16 पर केवल एक या दो अंक पढ़े जा सकते हैं; "137" की जगह "9+" या सादा बिंदु दिखाएँ।
तुरंत रीसेट करें जब उपयोगकर्ता उस मद को निपटा ले, और डिफ़ॉल्ट आइकन बहाल करें।
केवल रंग पर निर्भर न रहें। लाल बिंदु के साथ पेज शीर्षक में भी जानकारी हो, जैसे "(3) Inbox", ताकि सूचना सबको उपलब्ध हो।

डायनामिक फेविकॉन आमतौर पर कैनवास पर बनाए जाते हैं और आइकन लिंक एलिमेंट का href अपडेट करके बदले जाते हैं। अपडेट को थ्रॉटल करें, क्योंकि फेविकॉन को लगातार बदलने से CPU खर्च हो सकता है और उपयोगकर्ता का ध्यान भटकता है।

9. परफ़ॉर्मेंस

फेविकॉन छोटे होते हैं, लेकिन फिर भी वे ऐसे अनुरोध हैं जिन्हें ग़लत ढंग से किया जा सकता है।

फ़ाइलें छोटी रखें। PNG फेविकॉन आमतौर पर कुछ सौ बाइट से कुछ किलोबाइट का होता है। सरल SVG 1 KB से कम हो सकता है।
फूली हुई ICO फ़ाइलों से बचें। 16, 32 और 48 पिक्सेल की इमेज वाली बहु-आकार ICO पर्याप्त है। 256x256 इमेज जोड़ने से फ़ाइल का आकार कई गुना बढ़ता है, जबकि ब्राउज़र टैब में कोई दिखने वाला लाभ नहीं होता।
कैशिंग हेडर सेट करें। आइकन को लंबे Cache-Control जीवनकाल के साथ सर्व करें, उदाहरण के लिए public, max-age=31536000, immutable, और बदलते समय वर्शन वाला या हैश वाला फ़ाइल नाम इस्तेमाल करें।
आइकन स्पष्ट रूप से घोषित करें। ब्राउज़र डिफ़ॉल्ट रूप से /favicon.ico माँगते हैं, इसलिए अन्य आइकन घोषित करने पर भी एक उपलब्ध कराएँ, ताकि आपके लॉग में 404 का शोर न हो।
कंप्रेस करें। PNG को लॉसलेस ऑप्टिमाइज़र से चलाएँ और SVG को मिनिफ़ाई करें।

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

अगर आप एक स्रोत इमेज से ये सारी फ़ाइलें बनाना चाहते हैं, तो MakeFav फेविकॉन जनरेटर मानक सेट तैयार करता है, और डेवलपर्स पेज इंटीग्रेशन विकल्पों को कवर करता है।

10. एक्सेसिबिलिटी

फेविकॉन में alt टेक्स्ट नहीं होता और स्क्रीन रीडर उसे नहीं बोलते, इसलिए alt एट्रिब्यूट जैसे पारंपरिक एक्सेसिबिलिटी उपकरण लागू नहीं होते। जो मायने रखता है:

पेज शीर्षक अर्थ बताता है। अद्वितीय, वर्णनात्मक <title> एलिमेंट लिखें। स्थिति बताने के लिए कभी आइकन पर निर्भर न रहें; किसी भी बैज को शीर्षक में भी दोहराएँ।
कम दृष्टि वाले उपयोगकर्ताओं के लिए दृश्यता। उच्च कंट्रास्ट, मोटी आकृति और बड़ा चिह्न उन उपयोगकर्ताओं की मदद करते हैं जो टैब को नज़र से स्कैन करते हैं।
रंग से स्वतंत्रता। सुनिश्चित करें कि स्थितियाँ केवल रंगत से नहीं, आकृतियों या अक्षरों से अलग हों।
कम व्यवधान। चमकते या एनिमेटेड फेविकॉन से बचें, जो गति के प्रति संवेदनशील उपयोगकर्ताओं के लिए समस्या हो सकते हैं।

फेविकॉन UX चेकलिस्ट

मानदंड	अनुशंसित मान	यह क्यों मायने रखता है
सामग्री	लोगोमार्क, या 1-2 अक्षर	टेक्स्ट और जटिल लोगो 16x16 पर पढ़े नहीं जा सकते
न्यूनतम रेखा चौड़ाई	16x16 पर 2 px या अधिक	पतली रेखाएँ धुंधली हो जाती हैं या गायब हो जाती हैं
पिक्सेल अलाइनमेंट	किनारे पूरे पिक्सेल पर, हाथ से ट्यून किया 16x16	धुंधला, धूसर एंटी-अलियासिंग रोकता है
टैब के साथ कंट्रास्ट	हल्के और गहरे टैब पर पठनीय; लगभग 3:1 या बेहतर	डार्क मोड व्यापक है
बैकग्राउंड	ठोस आकृति, या आउटलाइन, या अनुकूली SVG	किसी भी टैब रंग पर चिह्न दिखता रहता है
पैलेट	1-2 गहरे रंग	साफ़ रूप; टैब की पंक्ति में अलग दिखता है
पैडिंग (टैब आइकन)	1-2 px मार्जिन, वर्ग को भरें	चिह्न को जितना संभव हो उतना बड़ा बनाता है
मास्केबल आइकन सेफ़ ज़ोन	40% त्रिज्या वाले वृत्त के अंदर सामग्री	OS मास्क लोगो को नहीं काटेंगे
Apple टच आइकन	180x180, अपारदर्शी, बिना पहले से गोल कोनों के	iOS कोने जोड़ता है और पारदर्शिता भरता है
Google आकार	48 px का गुणज, स्थिर URL, क्रॉल करने योग्य	सर्च परिणामों में दिखने की पात्रता
फ़ॉर्मैट	ICO (16/32/48) + SVG + PNG फ़ॉलबैक	व्यापक ब्राउज़र समर्थन
फ़ाइल साइज़	प्रति फ़ाइल कुछ KB से कम	तेज़ लोड, कम बैंडविड्थ
कैशिंग	लंबा max-age, वर्शन वाले फ़ाइल नाम	कम अनुरोध; नियंत्रित अपडेट
बदलाव की आवृत्ति	कभी-कभार, केवल रीब्रांड के लिए	पहचान और सर्च कैश की स्थिरता
बैज	सादा बिंदु या 1-2 अंक, कम इस्तेमाल	पठनीय और ध्यान भटकाने वाला नहीं

टेस्टिंग चेकलिस्ट

अपने डिज़ाइन टूल के बड़े प्रीव्यू पर भरोसा न करें। असली आइकन को असली परिस्थितियों में टेस्ट करें:

कई ब्राउज़र। Chrome, Firefox, Safari और Edge जाँचें, क्योंकि हर एक आइकन और आकार थोड़े अलग तरीके से चुनता है।
लाइट और डार्क मोड। OS और ब्राउज़र थीम बदलें और हर बार टैब पट्टी देखें।
रेटिना और सामान्य डिस्प्ले। 1x मॉनिटर और 2x या 3x स्क्रीन पर जाँचें, और ब्राउज़र में ज़ूम करें।
बुकमार्क बार। पेज को बुकमार्क करें और देखें कि दूसरी साइटों के बगल में आइकन अब भी पठनीय है या नहीं।
कई टैब। 20 टैब खोलें और देखें कि क्या आप अपना टैब एक नज़र में ढूँढ पाते हैं।
Google SERP प्रीव्यू। आइकन के दोबारा क्रॉल होने के बाद मोबाइल सर्च परिणाम जाँचें। याद रखें कि अपडेट होने में समय लग सकता है।
होम स्क्रीन। साइट को iOS और Android की होम स्क्रीन पर जोड़ें और पुष्टि करें कि आइकन कटा नहीं है, उसमें काले कोने नहीं हैं, और वह अपने मास्क के भीतर बहुत छोटा नहीं है।
तकनीकी जाँच। अपना डोमेन MakeFav फेविकॉन चेकर से चलाएँ ताकि पुष्टि हो कि फ़ाइलें मौजूद हैं, 200 स्टेटस लौटाती हैं, सही आकार की हैं और आपके HTML में सही ढंग से घोषित हैं।

एक व्यावहारिक वर्कफ़्लो

अपने लोगोमार्क से शुरू करें और उसे एक आकृति या अक्षर तक सरल बनाएँ।
ठोस या आकार वाले बैकग्राउंड के साथ एक वर्गाकार कैनवास बनाएँ जो दोनों थीम में काम करे।
32x32 और 16x16 आकार एक्सपोर्ट करें और छोटे संस्करण को पिक्सेल एडिटर में हाथ से सुधारें।
जनरेटर से पूरा सेट (ICO, PNG, apple-touch-icon, मैनिफ़ेस्ट आइकन) बनाएँ।
लिंक टैग जोड़ें, कैश हेडर सेट करें, डिप्लॉय करें और चेकर से सत्यापित करें।

फेविकॉन आपकी साइट की सबसे छोटी संपत्तियों में से एक है और सबसे ज़्यादा देखी जाने वाली में से भी। कंट्रास्ट, सरलता और एकरूपता के बारे में कुछ सावधान निर्णय इसे हर टैब, थीम और डिवाइस में कारगर बना देते हैं।

अक्सर पूछे जाने वाले प्रश्न

फेविकॉन का आकार क्या होना चाहिए?

ब्राउज़र टैब के लिए 16x16 और 32x32 में डिज़ाइन करें (हाई-डेंसिटी डिस्प्ले पर ब्राउज़र 32x32 इस्तेमाल करता है), iOS के लिए 180x180 का apple-touch-icon दें, और Android व PWA के लिए 192x192 और 512x512 PNG दें। Google सर्च परिणामों के लिए ऐसा वर्गाकार आइकन इस्तेमाल करें जिसका आकार 48 पिक्सेल का गुणज हो, जैसे 48x48 या 96x96। SVG स्रोत इन सभी में स्केल हो जाता है।

क्या मुझे अपना पूरा लोगो फेविकॉन के रूप में इस्तेमाल करना चाहिए?

आमतौर पर नहीं। वर्डमार्क वाले पूरे लोगो वर्गाकार 16x16 आइकन के लिए बहुत विस्तृत और बहुत चौड़े होते हैं। लोगोमार्क या एक-दो अक्षरों का मोनोग्राम इस्तेमाल करें, और उसे सरल बनाएँ ताकि छोटा होने पर भी पहचाना जा सके।

डार्क मोड में फेविकॉन को कैसे काम करवाएँ?

सबसे सुरक्षित तरीका है आइकन को अपनी ठोस बैकग्राउंड आकृति या विपरीत रंग की आउटलाइन देना, ताकि वह टैब के रंग पर निर्भर न रहे। वैकल्पिक रूप से, रंग बदलने के लिए prefers-color-scheme मीडिया क्वेरी वाला SVG फेविकॉन इस्तेमाल करें, और SVG आइकन का समर्थन न करने वाले ब्राउज़रों के लिए PNG या ICO फ़ॉलबैक रखें। हमेशा हल्की और गहरी दोनों थीम में टेस्ट करें।

मेरा नया फेविकॉन क्यों नहीं दिख रहा?

ब्राउज़र फेविकॉन को लंबे समय तक कैश करते हैं, और Google अपनी खुद की कॉपी रखता है, जिसे वह अपने शेड्यूल पर रीफ़्रेश करता है, जिसमें अक्सर दिन या हफ़्ते लग जाते हैं। पेज को हार्ड-रीफ़्रेश करें, ब्राउज़र कैश साफ़ करें, नया वर्शन वाला फ़ाइल नाम इस्तेमाल करें, और सुनिश्चित करें कि लिंक टैग और रूट /favicon.ico सही फ़ाइल की ओर इशारा करते हैं। आप सेटअप को MakeFav चेकर से सत्यापित कर सकते हैं।

क्या फेविकॉन पर नोटिफ़िकेशन बैज दिखाना अच्छा विचार है?

हाँ, अगर कम इस्तेमाल किया जाए। एक छोटा बिंदु या एक- या दो-अंकीय गिनती उपयोगकर्ताओं को ऐसी चीज़ नोटिस करने में मदद करती है जिस पर कार्रवाई चाहिए, लेकिन लगातार एनिमेशन या बड़ी संख्याएँ पठनीयता और ध्यान को नुकसान पहुँचाती हैं। स्थिति को हमेशा पेज शीर्षक में भी दोहराएँ, मद निपटने पर डिफ़ॉल्ट आइकन बहाल करें, और केवल रंग पर निर्भर न रहें।

फेविकॉन UX: एक बेहतरीन फेविकॉन क्या बनाता है