फ़ेविकॉन कैसे बनाएं
एक आधुनिक favicon 16×16 छवि से कहीं अधिक है। यह मार्गदर्शिका स्रोत तैयारी, बहु-आकार निर्माण, HTML सेटअप, वास्तविक दुनिया के उदाहरणों और अधिकांश टीमों को परेशान करने वाली समस्याओं के समाधान के बारे में बताती है।
favicon क्या है?
favicon टैब, बुकमार्क बार, इतिहास सूची और एड्रेस बार में प्रदर्शित होने वाला छोटा आइकन ब्राउज़र है। जब कोई आपकी साइट सहेजता है तो फ़ोन पर यह होम-स्क्रीन आइकन बन जाता है। Windows पर यह टास्कबार पिन और डेस्कटॉप शॉर्टकट पर दिखाई देता है।
यह शब्द पसंदीदा आइकन से आया है, लेकिन काम एक 16×16 GIF से कहीं आगे बढ़ गया है। आज का favicon एक छोटा परिसंपत्ति परिवार है: एक रूट-स्तरीय favicon.ico, वैकल्पिक SVG और PNG वेरिएंट, iOS के लिए एक ऐप्पल-टच-आइकन, और इंस्टॉल करने योग्य PWA के लिए मैनिफ़ेस्ट आइकन।
उपयोगकर्ता किसी अच्छे favicon पर शायद ही कभी टिप्पणी करते हैं, लेकिन वे किसी गुम या धुंधले को तुरंत नोटिस कर लेते हैं। एक स्पष्ट आइकन पॉलिश का संकेत देता है और आपके टैब को बीस खुले पृष्ठों के बीच पहचानने योग्य बनाता है।
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
अपनी स्रोत छवि तैयार करें
कम से कम 512×512 पिक्सेल की एक वर्गाकार छवि से प्रारंभ करें। वर्गाकार viewBox के साथ SVG आदर्श है क्योंकि यह आपके द्वारा निर्यात किए जाने वाले प्रत्येक रास्टर आकार के लिए साफ-सुथरा है।
पतले स्ट्रोक्स, बढ़िया टाइपोग्राफी और जटिल ग्रेडिएंट्स से बचें। 16×16 पर, हेयरलाइन विवरण भूरे गूदे में विलीन हो जाते हैं। चिह्न को सरल बनाएं: कम आकार, अधिक कंट्रास्ट, ग्लिफ़ के चारों ओर अधिक पैडिंग।
यदि आपका लोगो क्षैतिज है, तो एक वर्गाकार क्रॉप बनाएं जो बिना वर्डमार्क के प्रतीक के बीच में हो। 8px ऊँचाई से नीचे के अक्षर-रूप शायद ही कभी डाउनस्केलिंग से बच पाते हैं।
जब रैस्टर ही आपका एकमात्र विकल्प हो तो पारदर्शिता के साथ PNG-32 निर्यात करें। डार्क ब्राउजर क्रोम और टिंटेड मोबाइल लॉन्चर में बेक्ड-इन सफेद पृष्ठभूमि गलत दिखेगी।
एक बहु-आकार .ico उत्पन्न करें
एक favicon.ico फ़ाइल के अंदर 16, 32, 48, 64, 128 और 256 पिक्सेल फ़्रेम को बंडल करें। ब्राउज़र और Windows निर्देशिका हेडर को पढ़ते हैं और केवल उसी आकार को डीकोड करते हैं जिसकी उन्हें आवश्यकता होती है।
favicon.ico को अपनी साइट रूट (/favicon.ico) पर रखें। भले ही आप आधुनिक <link> टैग घोषित करते हैं, क्रॉलर और पुराने क्लाइंट अभी भी परंपरा के अनुसार उस पथ की जांच करते हैं।
हमारा favicon जनरेटर एक सेकंड के भीतर हर आकार के क्लाइंट-साइड को व्यवस्थित करता है। आपकी स्रोत छवि ब्राउज़र को कभी नहीं छोड़ती है, जो तब मायने रखती है जब चिह्न एक अप्रकाशित उत्पाद लोगो हो।
HTML टैग जोड़ें
संपूर्ण 2026 सेटअप के लिए इन टैगों को <head> में छोड़ें:
<लिंक rel='आइकन' href='/favicon.ico' आकार='कोई भी'>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
SVG लाइन Chromium और Firefox पर स्पष्ट टैब देती है। .ico लाइन में Safari फ़ॉलबैक, Windows शॉर्टकट और RSS रीडर शामिल हैं जो SVG को अनदेखा करते हैं।
वास्तविक दुनिया के उदाहरण
स्टेटिक मार्केटिंग साइट: अपने लोगोमार्क का 512×512 PNG अपलोड करें, favicon.ico प्लस एक 180×180 ऐप्पल-टच-आइकन जेनरेट करें, चार <लिंक> लाइनें जोड़ें, /पब्लिक या वेब रूट पर तैनात करें। कुल समय: पाँच मिनट से कम।
React / Vite ऐप: आइकनों को /public में रखें, उन्हें Index.html में रूट-रिलेटिव पथों के साथ संदर्भित करें। निर्माण समय पर वाइट प्रतियां /सार्वजनिक अपरिवर्तित रहती हैं, इसलिए /favicon.ico उत्पादन में सही ढंग से हल हो जाता है।
WordPress: मैनुअल छोड़ें HTML - उपस्थिति → अनुकूलित करें → साइट पहचान → Site Icon का उपयोग करें। 512×512 स्रोत अपलोड करें; WordPress स्वचालित रूप से सही टैग उत्सर्जित करता है। कैश-बस्टिंग युक्तियों के लिए हमारा WordPress ट्यूटोरियल देखें।
डार्क-मोड ब्रांड: एक SVG निर्यात करें जिसका भरण स्विच @मीडिया (prefers-color-scheme: डार्क) के अंदर होता है। इसे उन ग्राहकों के लिए न्यूट्रल .ico फ़ॉलबैक के साथ जोड़ें जो SVG को कभी लोड नहीं करते हैं।
प्रत्येक ब्राउज़र में सत्यापित करें
Chrome, Safari, Firefox और Edge में हार्ड-रिफ्रेश (Ctrl+Shift+R या Cmd+Shift+R)। सामान्य पुनः लोड अक्सर favicon को कई दिनों तक कैश्ड रखता है।
चार सतहों की जाँच करें: ब्राउज़र टैब, बुकमार्क बार, iOS पर होम स्क्रीन में जोड़ें, और एक पिन किया हुआ Windows टास्कबार आइकन। प्रत्येक सतह आपके बंडल से भिन्न रिज़ॉल्यूशन का अनुरोध कर सकती है।
DevTools → नेटवर्क खोलें, आईसीओ या पीएनजी द्वारा फ़िल्टर करें, पुनः लोड करें और आपके द्वारा घोषित प्रत्येक आइकन यूआरएल के लिए 200 प्रतिक्रियाओं की पुष्टि करें। apple-touch-icon.png पर सिंगल 404 एक आम चूक है।
अक्सर पूछे जाने वाले प्रश्नों
यदि मेरे पास SVG है तो क्या मुझे अभी भी favicon.ico की आवश्यकता है? हाँ। .ico को सार्वभौमिक फ़ॉलबैक के रूप में रखें। SVG एक संवर्द्धन है, प्रतिस्थापन नहीं।
न्यूनतम व्यवहार्य favicon क्या है? /favicon.ico पर एक बहु-आकार favicon.ico। बाकी सभी चीजें उच्च-डीपीआई स्क्रीन और मोबाइल होम स्क्रीन पर स्पष्टता में सुधार करती हैं।
क्या मैं JPG का उपयोग कर सकता हूँ? आप कर सकते हैं, लेकिन आप पारदर्शिता खो देते हैं। इंटरफ़ेस आइकन के लिए PNG या SVG लगभग हमेशा बेहतर होता है।
मुझे favicon को कितनी बार अपडेट करना चाहिए? जब भी आपका ब्रांड मार्क बदलता है. आक्रामक ब्राउज़र कैश को हराने के लिए <लिंक> टैग पर एक बार ?v=2 क्वेरी को बम्प करें।
समस्या निवारण
तैनाती के बाद आइकन अपडेट नहीं होता है: ब्राउज़र favicon को HTML से स्वतंत्र रूप से कैश करते हैं। हार्ड-रीफ्रेश करें, साइट डेटा साफ़ करें, या अस्थायी रूप से आइकन यूआरएल में ?v=2 जोड़ें।
धुंधला टैब आइकन: आपका स्रोत बहुत छोटा या गैर-वर्गाकार था। 512×512 या SVG से पुन: उत्पन्न करें; सत्यापित करें कि .ico में वास्तव में 32×32 फ्रेम है।
लोगो के चारों ओर सफेद बॉक्स: स्रोत की पृष्ठभूमि अपारदर्शी थी। पारदर्शिता के साथ पुनः निर्यात करें और .ico को PNG-संपीड़ित प्रविष्टियों के साथ पुन: उत्पन्न करें।
स्थानीय रूप से काम करता है लेकिन उत्पादन में नहीं: पुष्टि फ़ाइलें सार्वजनिक वेब रूट में बैठती हैं, न कि केवल src/ में। लिनक्स सर्वर पर सीडीएन कैश और केस-संवेदी पथ की जाँच करें।
चरण-दर-चरण चेकलिस्ट
512×512 या इससे बड़े वर्गाकार मास्टर को निर्यात करें या ढूंढें। अपनी डिज़ाइन फ़ाइल में पारदर्शिता, sRGB रंग प्रोफ़ाइल और कोई छिपी हुई पृष्ठभूमि परत की पुष्टि करें।
क्लाइंट-साइड favicon जेनरेटर के माध्यम से मास्टर चलाएँ। यदि लागू हो तो favicon.ico, favicon.svg डाउनलोड करें, apple-touch-icon.png, और एक बार में PNG प्रदर्शित करें।
सभी फ़ाइलें अपने सार्वजनिक वेब रूट पर अपलोड करें। स्थैतिक होस्ट पर इसका मतलब है कि इंडेक्स.एचटीएमएल जैसा ही फ़ोल्डर; फ़्रेमवर्क पर, /सार्वजनिक या /स्थैतिक निर्देशिका का उपयोग करें जो / पर मैप करता है।
किसी भी रेंडर-ब्लॉकिंग स्क्रिप्ट से पहले अनुशंसित <लिंक> ब्लॉक को <head> में पेस्ट करें। प्रारंभिक प्लेसमेंट ब्राउज़रों को पहले पेंट पर आइकन खोजने में मदद करता है।
Chrome, Safari और Firefox पर हार्ड रिफ्रेश के साथ मान्य करें। यदि iOS ट्रैफ़िक आपके लिए मायने रखता है, तो एक टैब पिन करें, पृष्ठ को बुकमार्क करें और वास्तविक iPhone पर होम स्क्रीन में जोड़ें का परीक्षण करें।
अपने README या डिज़ाइन सिस्टम में सेट किए गए आइकन को दस्तावेज़ित करें ताकि अगला रीब्रांड किसी व्यक्ति द्वारा ईमेल में पाए गए एकल 32×32 PNG से शुरू न हो।
बचने योग्य सामान्य गलतियाँ
16×16 स्लॉट में स्केल किए गए पूर्ण क्षैतिज लोगो का उपयोग करना - पाठ अपठनीय शोर बन जाता है। प्रतीक पर काटें.
उचित बहु-आकार निर्देशिका के बिना केवल 16×16 PNG का नाम बदलकर .ico कर दिया गया - Windows और रेटिना टैब अपस्केल और ब्लर।
डेस्कटॉप टैब पर ध्यान केंद्रित करते हुए ऐप्पल-टच-आइकन को भूल जाना - iOS उपयोगकर्ता मोबाइल वेब ट्रैफ़िक का एक बड़ा हिस्सा हैं।
<link href> को एक सीडीएन पथ पर इंगित करना जो पर्यावरण-जागरूक बिल्ड के बिना स्टेजिंग और उत्पादन के बीच भिन्न होता है।
यह मानते हुए कि WordPress, Shopify, या Webflow कम-रिज़ॉल्यूशन स्रोत अपलोड को जादुई रूप से ठीक कर देगा। हर आकार में कूड़ा अंदर, कूड़ा बाहर।