फ़ेविकॉन कैसे बनाएं
सही टूल के साथ फ़ेविकॉन बनाना दो मिनट का काम है। एक वर्गाकार स्रोत छवि से प्रारंभ करें - कम से कम 512×512 पिक्सेल - इसे favicon generator के माध्यम से चलाएं, और एक पूर्ण पैकेज प्राप्त करें: बहु-आकार .ico, SVG, apple-touch-icon, और प्रकट PNGs। यह मार्गदर्शिका स्रोत तैयारी से लेकर ब्राउज़र सत्यापन तक हर कदम पर चलती है। गहन संदर्भ के लिए full tutorial भी देखें।
फ़ेविकॉन वह छोटा आइकन है जिसे ब्राउज़र टैब बार, एड्रेस बार और बुकमार्क सूची में प्रदर्शित करता है। मोबाइल पर, जब कोई उपयोगकर्ता आपकी साइट सहेजता है तो यह होम-स्क्रीन आइकन बन जाता है। Windows पर यह टास्कबार पिन और डेस्कटॉप शॉर्टकट पर दिखाई देता है। फ़ेविकॉन को सही तरीके से प्राप्त करना बड़े ब्रांड प्रभाव के साथ एक छोटा सा प्रयास है - प्रत्येक पृष्ठ दृश्य उपयोगकर्ता के टैब में बैठे आपके आइकन से शुरू होता है।
आधुनिक फ़ेविकॉन सेटअप एक एकल फ़ाइल नहीं है - यह एक समन्वित सेट है। एक बहु-आकार .ico सार्वभौमिक ब्राउज़र फ़ॉलबैक को संभालता है। SVG डार्क-मोड समर्थन सहित आधुनिक ब्राउज़रों पर स्पष्ट स्केलेबल रेंडरिंग प्रदान करता है। 180×180 PNG (apple-touch-icon) वह है जो iOS होम-स्क्रीन इंस्टॉल के लिए उपयोग करता है। एक 192×192 और एक 512×512 PNG Android PWA इंस्टाल प्रॉम्प्ट फ़ीड करते हैं। एक अच्छी तरह से तैयार की गई स्रोत छवि इन सभी को एक साथ उत्पन्न करती है।
स्रोत छवि तैयार करना सबसे अधिक अनदेखा किया जाने वाला कदम है। आपका लोगो चौकोर होना चाहिए - एक असममित फसल हमेशा एक विस्तृत परिणाम उत्पन्न करती है। अपने ब्रांड चिह्न का एक सरलीकृत संस्करण डिज़ाइन करें जो छोटे आकार में स्पष्ट रूप से पढ़ता है: बारीक रेखाओं को कम करें, छोटे पाठ को हटाएं और कंट्रास्ट बढ़ाएं। यदि आप इस सरलीकरण पास को छोड़ देते हैं तो 512×512 पर जो सुंदर दिखता है वह 16×16 पर एक अपठनीय ब्लॉब बन सकता है।
SVG आदर्श स्रोत प्रारूप है क्योंकि यह रिज़ॉल्यूशन-स्वतंत्र है। एक वेक्टर ग्राफ़िक गुणवत्ता हानि के बिना किसी भी पिक्सेल घनत्व को व्यवस्थित करता है। यदि आपके पास केवल रैस्टर PNG या JPG है, तो सुनिश्चित करें कि यह उत्पन्न करने से पहले कम से कम 512×512 है - किसी भी छोटी चीज़ से डाउनस्केलिंग करने से धुंधलापन आ जाता है जो हर आकार बदलने के चरण के माध्यम से जुड़ जाता है और परिणामस्वरूप एक फजी टैब आइकन बन जाता है।
.ico प्रारूप एक कंटेनर है, एक छवि नहीं। इसमें एक ही फ़ाइल में कई रैस्टर फ़्रेम होते हैं - आमतौर पर 16×16, 32×32, 48×48, और 64×64। ब्राउज़र ICO निर्देशिका को पार्स करता है और केवल वही फ़्रेम प्रस्तुत करता है जो उसके लिए आवश्यक डिस्प्ले घनत्व से सबसे अधिक मेल खाता है। इस एकल-फ़ाइल दृष्टिकोण का अर्थ है कि आपको प्रत्येक रिज़ॉल्यूशन के लिए अलग-अलग लिंक टैग की आवश्यकता नहीं है - एक टैग सभी टैब आकारों को कवर करता है।
अपनी स्रोत छवि favicon generator पर अपलोड करें। टूल आपके ब्राउज़र में स्थानीय रूप से सब कुछ संसाधित करता है - आपकी छवि कभी भी आपके डिवाइस को नहीं छोड़ती है। कुछ ही सेकंड में यह एक डाउनलोड पैकेज तैयार करता है जिसमें favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, और site.webmanifest, साथ ही पेस्ट-रेडी HTML लिंक टैग शामिल हैं।
फ़ाइलें रखना सीधा है. सभी जेनरेट की गई फ़ाइलों को अपनी साइट की सार्वजनिक रूट निर्देशिका में छोड़ें - वही फ़ोल्डर जो आपके index.html पर काम करता है। Vite और Create React ऐप प्रोजेक्ट के लिए यह /public फ़ोल्डर है। Next.js App Router परियोजनाओं के लिए, favicon.ico को /app के अंदर और PNG फ़ाइलों को /public में रखें। स्थिर साइटों के लिए, अपनी HTML फ़ाइलों के साथ सब कुछ छोड़ दें।
HTML लिंक टैग ब्राउज़रों को बताते हैं कि प्रत्येक संदर्भ के लिए किस फ़ाइल का उपयोग करना है। न्यूनतम एक पंक्ति है: `<link rel='icon' href='/favicon.ico'>`. पूर्ण अनुशंसित सेट में तीन और पंक्तियाँ जोड़ी गई हैं: एक SVG वैरिएंट के लिए, एक apple-touch-icon के लिए, और एक वेब मेनिफेस्ट के लिए। जेनरेट किए गए स्निपेट को अपने `<head>` तत्व के अंदर चिपकाएँ। टैग क्रम तब तक मायने नहीं रखता जब तक वे `</head>` से पहले आते हैं।
जब फ़ेविकॉन अपडेट नहीं होता है तो ब्राउज़र कैशिंग भ्रम का प्रमुख कारण है। ब्राउज़र कैश /favicon.ico प्रति मूल और मानक कैश-कंट्रोल हेडर का सम्मान नहीं कर सकते हैं जिस तरह से वे अन्य परिसंपत्तियों के लिए करते हैं। यदि आपका पुराना आइकन बना रहता है, तो एक नई गुप्त विंडो खोलें, या ब्राउज़र को अद्यतन फ़ाइल लाने के लिए मजबूर करने के लिए अपने लिंक टैग में href में `?v=2` जैसी कैश-बस्टर क्वेरी स्ट्रिंग जोड़ें।
सामान्य गलतियों में एक गैर-वर्गाकार छवि अपलोड करना (खिंचे हुए आइकन बनाना), 256×256 पिक्सल से कम के स्रोत का उपयोग करना (बड़े डिस्प्ले आकार पर धुंधला होना), और apple-touch-icon को छोड़ना (iOS होम-स्क्रीन इंस्टॉल इसके बजाय एक पेज स्क्रीनशॉट दिखाता है) शामिल हैं। इन तीनों को एक वर्गाकार 512×512 PNG या SVG स्रोत से शुरू करके और जनरेटर को प्रत्येक आउटपुट आकार को संभालने की अनुमति देकर हल किया जाता है।
डार्क-मोड समर्थन शुरू से ही बनाने लायक है। जब उपयोगकर्ता का सिस्टम डार्क मोड में होता है तो कई ब्राउज़र टैब बार को डार्क क्रोम में प्रस्तुत करते हैं। यदि आपका आइकन पारदर्शी पृष्ठभूमि पर एक काला निशान है तो यह एक अंधेरे टैब में गायब हो सकता है। एक एम्बेडेड `@media (prefers-color-scheme: dark)` स्टाइल ब्लॉक के साथ एक SVG फ़ेविकॉन शिप करें जो भरण रंग बदलता है - कोई अतिरिक्त HTML टैग की आवश्यकता नहीं है, बस एक अद्यतन SVG फ़ाइल है।
परिनियोजन के बाद live favicon tester का उपयोग करके अपने फ़ेविकॉन को सत्यापित करें। परीक्षक ब्राउज़र टैब, बुकमार्क और इंस्टॉल-प्रॉम्प्ट संदर्भों का अनुकरण करता है और दिखाता है कि आपका आइकन 16, 32, 48, 128 और 512 पिक्सेल पर एक साथ कैसे प्रस्तुत होता है। इसके अलावा Chrome और Safari में पिन किए गए टैब को मैन्युअल रूप से जांचें, और apple-touch-icon की पुष्टि करने के लिए iOS पर 'होम स्क्रीन में जोड़ें' का उपयोग करें।
प्लेटफ़ॉर्म-विशिष्ट वॉकथ्रू के लिए, favicon for WordPress, favicon for Shopify, favicon for React, और favicon for Next.js देखें। जेनरेट किया गया फ़ाइल सेट सभी प्लेटफ़ॉर्म पर समान है - जो भिन्न होता है वह यह है कि आप फ़ाइलें कहां अपलोड करते हैं और प्लेटफ़ॉर्म HTML लिंक टैग को कैसे इंजेक्ट या ओवरराइड करता है।
जब भी आप रीब्रांड करें तो अपने फ़ेविकॉन पर दोबारा जाएँ। साइट रीडिज़ाइन लाइव होने के बाद भी कैश्ड फ़ेविकॉन बुकमार्क और मोबाइल होम स्क्रीन पर लंबे समय तक बने रहते हैं। आपके लिंक टैग href में संस्करण स्ट्रिंग को अपडेट करने से ब्राउज़र को अगली विज़िट पर नई फ़ाइल लाने के लिए बाध्य किया जाता है, धीरे-धीरे सभी कैश्ड स्थानों पर पुराने आइकन को बदल दिया जाता है। फ़ाइल-आकार और संगतता ट्रेड-ऑफ़ के प्रारूप-दर-प्रारूप विश्लेषण के लिए best favicon format मार्गदर्शिका देखें।
यह कैसे काम करता है
- 1
एक वर्गाकार स्रोत छवि तैयार करें
अपने लोगो या आइकन को पारदर्शी पृष्ठभूमि के साथ 512×512 PNG के रूप में, या वर्ग viewBox के साथ SVG के रूप में निर्यात करें (उदाहरण के लिए, `viewBox='0 0 512 512'`)। बारीक विवरणों को सरल बनाएं जो 16×16 पर अदृश्य होंगे।
- 2
अपना फ़ेविकॉन पैकेज जनरेट करें
स्रोत को [favicon generator](tool:favicon-generator) पर अपलोड करें। उपकरण favicon.ico (बहु-आकार 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, और site.webmanifest - सभी एक ही बार में उत्पन्न करता है।
- 3
सभी फ़ाइलों को अपनी साइट रूट पर कॉपी करें
डाउनलोड ज़िप से प्रत्येक फ़ाइल को अपने प्रोजेक्ट के सार्वजनिक रूट में रखें - वह निर्देशिका जो index.html परोसती है। Next.js App Router के लिए, favicon.ico /app में जाता है; PNGs /public में जाते हैं।
- 4
HTML लिंक टैग को <head> में चिपकाएँ
जेनरेट किए गए HTML स्निपेट को कॉपी करें और इसे अपने `<head>` तत्व के अंदर जोड़ें। पूरे सेट में .ico फ़ॉलबैक, SVG वैरिएंट, apple-touch-icon और मेनिफेस्ट लिंक - कुल छह पंक्तियाँ शामिल हैं।
- 5
सभी ब्राउज़रों और डिवाइसों पर सत्यापित करें
अपनी साइट को Chrome, Safari, Firefox और Edge में खोलें। टैब, बुकमार्क बार और एड्रेस बार का निरीक्षण करें। iOS पर, apple-touch-icon का परीक्षण करने के लिए शेयर शीट और 'होम स्क्रीन में जोड़ें' पर टैप करें। त्वरित सिमुलेशन के लिए [favicon tester](utility:favicon-tester) का उपयोग करें।
- 6
मौजूदा फ़ेविकॉन को अपडेट करते समय कैश-बस्ट
यदि लाइव फ़ेविकॉन बदल रहा है, तो अपने लिंक टैग href (`?v=2`, `?v=3`, आदि) में संस्करण स्ट्रिंग बढ़ाएँ। यह सभी ब्राउज़रों को कैश्ड संस्करण प्रस्तुत करने के बजाय अगले पृष्ठ लोड पर अद्यतन फ़ाइल लाने के लिए बाध्य करता है।
अभी आज़माएं
अभी अपना फ़ेविकॉन बनाएं
फ़ेविकॉन जनरेटरसामान्य प्रश्न
फ़ेविकॉन बनाने का सबसे आसान तरीका क्या है?+
FetchFavicon जनरेटर पर 512×512 वर्ग PNG या SVG अपलोड करें। यह सभी आवश्यक फ़ाइलें तैयार करता है - .ico, SVG, apple-touch-icon, मैनिफ़ेस्ट PNGs - प्लस पेस्ट-तैयार HTML एक सेकंड के भीतर, बिना किसी साइनअप और बिना सर्वर अपलोड के।
मेरी स्रोत छवि किस आकार की होनी चाहिए?+
कम से कम 512×512 पिक्सेल, आदर्श रूप से SVG के रूप में। छोटे होने पर Windows द्वारा उपयोग किए जाने वाले 256×256 आकार और PWA इंस्टाल संकेतों के लिए आवश्यक 512×512 आकार पर दृश्य धुंधला होने का जोखिम है। एक छोटी छवि को अपग्रेड करने से आकार बदलने के हर चरण पर गुणवत्ता में कमी आती है।
क्या मुझे apple-touch-icon की आवश्यकता है?+
हाँ, यदि कोई विज़िटर iPhone या iPad का उपयोग करता है। इसके बिना, iOS होम-स्क्रीन इंस्टॉल आपके ब्रांड चिह्न के बजाय आपके पृष्ठ का निम्न-गुणवत्ता वाला स्क्रीनशॉट थंबनेल दिखाता है। `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` से जुड़ा एक 180×180 PNG आपको बस इतना ही चाहिए।
मेरा फ़ेविकॉन ब्राउज़र टैब में क्यों नहीं दिखता?+
अक्सर यह एक कैशिंग समस्या होती है. एक निजी/गुप्त विंडो खोलें और अपनी साइट पर नेविगेट करें। यदि यह अभी भी प्रकट नहीं होता है, तो सत्यापित करें कि favicon.ico आपके डोमेन रूट पर परोसा गया है और लिंक टैग href पथ सही ढंग से हल हो गया है - टाइपो और लापता अग्रणी स्लैश की जांच करें।
क्या मुझे .ico और SVG दोनों की आवश्यकता है?+
हाँ, पूर्ण कवरेज के लिए. .ico पुराने ब्राउज़र, Windows शॉर्टकट और तीसरे पक्ष के टूल को संभालता है जो सीधे /favicon.ico लाते हैं। SVG Chrome, Firefox, Edge, और Safari 15+ पर क्रिस्प रेंडरिंग को संभालता है और डार्क-मोड कलर स्विचिंग का समर्थन करता है। संयुक्त फ़ाइल का आकार आमतौर पर 30 KB से कम होता है।
फ़ेविकॉन परिवर्तन को प्रचारित होने में कितना समय लगता है?+
कुछ सेकंड से लेकर कई दिनों तक, यह इस बात पर निर्भर करता है कि ब्राउज़र ने मूल को कितनी आक्रामकता से कैश किया है। सबसे तेज़ समाधान आपके फ़ेविकॉन href में एक नई क्वेरी स्ट्रिंग (`?v=2`) जोड़ना है। इससे ब्राउज़र इसे एक नए यूआरएल के रूप में मानते हैं और तुरंत एक नई प्रति प्राप्त करते हैं।
क्या मैं अपने फ़ेविकॉन स्रोत के रूप में JPEG का उपयोग कर सकता हूँ?+
आप जनरेटर पर JPEG अपलोड कर सकते हैं, लेकिन JPEG पारदर्शिता का समर्थन नहीं करते हैं। यदि आपके आइकन को पारदर्शी पृष्ठभूमि की आवश्यकता है - जो ब्राउज़र टैब में सबसे अच्छी लगती है - तो इसके बजाय PNG-32 या SVG से शुरू करें। जनरेटर या तो .ico और PNG में सही ढंग से परिवर्तित हो जाएगा।