Shopify के लिए फ़ेविकॉन
Shopify आपको थीम संपादक से कुछ ही सेकंड में फ़ेविकॉन अपलोड करने देता है। प्रत्येक आधुनिक Shopify थीम थीम सेटिंग्स के तहत एक फ़ेविकॉन फ़ील्ड को उजागर करती है, और Shopify की CDN आपके स्टोरफ्रंट के प्रत्येक पृष्ठ पर आइकन पेश करती है। पहले एक वर्ग 512×512 PNG बनाने के लिए favicon generator का उपयोग करें - Shopify इसे स्वचालित रूप से आवश्यक 32×32 डिस्प्ले आकार में बदल देगा।
फ़ेविकॉन उन पहले ब्रांड संकेतों में से एक है जिन्हें संभावित ग्राहक कई टैब खोलते समय देखता है। Shopify स्टोर्स पर, फ़ेविकॉन ब्राउज़र टैब, बुकमार्क बार और एड्रेस बार में दिखाई देता है। एक स्पष्ट, पहचानने योग्य फ़ेविकॉन ब्रांड के भरोसे को मजबूत करता है और खरीदारों को दर्जनों खुले टैब के बीच आपके स्टोर टैब को तुरंत ढूंढने में मदद करता है।
प्रत्येक आधुनिक Shopify थीम (डॉन, रिफ्रेश और अधिकांश प्रीमियम थीम) में थीम सेटिंग्स के तहत Theme Editor में एक फ़ेविकॉन फ़ील्ड शामिल है। इसे एक्सेस करने के लिए, अपने Shopify एडमिन में लॉग इन करें, ऑनलाइन स्टोर > थीम्स पर जाएं, और अपनी लाइव थीम के आगे कस्टमाइज़ पर क्लिक करें। बाएं साइडबार में, थीम सेटिंग्स (या गियर आइकन) पर क्लिक करें, फिर फ़ेविकॉन अनुभाग देखें।
Shopify फ़ेविकॉन फ़ील्ड के लिए 32×32 पिक्सेल पर एक वर्ग PNG अपलोड करने की अनुशंसा करता है। व्यवहार में, 512×512 PNG अपलोड करने से बेहतर परिणाम मिलता है क्योंकि यदि आप 32×32 मूल से शुरू करते हैं तो Shopify इसे बेहतर गुणवत्ता के साथ 32×32 पर डाउनसैंप कर देता है। हमेशा आपके पास मौजूद सबसे बड़े वर्ग स्रोत से शुरुआत करें - जनरेटर इसे आसान बनाता है।
अपना फ़ेविकॉन अपलोड करने के बाद, Theme Editor के ऊपरी-दाएँ कोने में सहेजें पर क्लिक करें। Shopify छवि को संसाधित करता है, इसे अपने सीडीएन पर अपलोड करता है, और इसे मिनटों के भीतर प्रत्येक स्टोरफ्रंट पेज पर प्रसारित करता है। आपको अपनी थीम को पुनः प्रकाशित करने या कोई अन्य कोड परिवर्तन करने की आवश्यकता नहीं है।
पुराने या अत्यधिक अनुकूलित Shopify थीम थीम सेटिंग्स में फ़ेविकॉन फ़ील्ड को उजागर नहीं कर सकते हैं। उस स्थिति में, आपको थीम के लिक्विड कोड को सीधे संपादित करना होगा। थीम फ़ाइल संपादक खोलें (ऑनलाइन स्टोर > थीम > संपादन कोड), theme.liquid फ़ाइल ढूंढें, और `<head>` अनुभाग ढूंढें। थीम के एसेट फ़ोल्डर में अपना favicon.png अपलोड करने के बाद `<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>` डालें।
2.0 थीम फ्रेमवर्क पर Shopify स्टोर्स के लिए, फ़ेविकॉन को site.webmanifest के माध्यम से प्रबंधित किया जाता है जो Shopify आपकी थीम सेटिंग्स से स्वचालित रूप से उत्पन्न होता है। यदि आपका स्टोर प्रोग्रेसिव वेब ऐप शेल का उपयोग करता है, तो Shopify के मेनिफेस्ट में ऐप आइकन के रूप में फ़ेविकॉन शामिल है। थीम फ़ेविकॉन को अपडेट करने से मेनिफेस्ट आइकन स्वचालित रूप से अपडेट हो जाता है - किसी अतिरिक्त JSON संपादन की आवश्यकता नहीं है।
Shopify फ़ेविकॉन में पारदर्शी पृष्ठभूमि सही ढंग से काम करती है। CDN पर अपलोड करते समय थीम संपादक PNG अल्फ़ा चैनल को सुरक्षित रखता है। हालाँकि, यदि आपके लोगो की पृष्ठभूमि सफेद है, तो यह डार्क-मोड ब्राउज़र टैब में एक सफेद बॉक्स के साथ दिखाई देगा। इससे बचने के लिए अपलोड करने से पहले अपना लोगो बिना पृष्ठभूमि भरे निर्यात करें।
यदि आप एकाधिक Shopify स्टोर (अंतर्राष्ट्रीय स्टोरफ्रंट के लिए एक सामान्य सेटअप) चलाते हैं, तो प्रत्येक स्टोर का फ़ेविकॉन स्वतंत्र रूप से सेट होना चाहिए। फ़ेविकॉन एक प्रति-स्टोर सेटिंग है, न कि Shopify पार्टनर या संगठन-स्तरीय सेटिंग। प्रत्येक स्टोर के एडमिन में लॉग इन करें और Theme Editor चरणों को दोहराएं।
कैश अमान्यकरण Shopify में फ़ेविकॉन अपडेट में देरी कर सकता है। Shopify का CDN लंबे TTL के साथ संपत्तियों को कैश करता है। फ़ेविकॉन बदलने के बाद, ब्राउज़र पुराना फ़ेविकॉन घंटों तक दिखाना जारी रख सकता है। कैश हस्तक्षेप के बिना अद्यतन आइकन देखने के लिए एक निजी/गुप्त विंडो खोलें। वैकल्पिक रूप से, अपने ब्राउज़र को हार्ड-रिफ्रेश करने का निर्देश दें (Windows पर Ctrl+Shift+R, Mac पर Cmd+Shift+R)।
Shopify मूल रूप से apple-touch-icon या वेब ऐप मेनिफेस्ट लिंक टैग को इंजेक्ट नहीं करता है जब तक कि आपके थीम टेम्पलेट में वे शामिल न हों। यदि आप चाहते हैं कि iOS होम-स्क्रीन इंस्टॉल पेज स्क्रीनशॉट के बजाय आपका लोगो दिखाए, तो ऑनलाइन स्टोर > थीम > संपादन कोड > theme.liquid के माध्यम से मैन्युअल रूप से apple-touch-icon टैग जोड़ें। स्थान `<link rel='apple-touch-icon' size='180x180' href='{{ 'apple-touch-icon.png' | एसेट_यूआरएल }}'>` `<head>` सेक्शन में और 180×180 PNG को एसेट में अपलोड करें।
Shopify प्लस स्टोर्स के लिए, आप मुख्य स्टोरफ्रंट फ़ेविकॉन से अलग चेकआउट प्रवाह में फ़ेविकॉन को कस्टमाइज़ करने के लिए चेकआउट ब्रांडिंग का उपयोग कर सकते हैं। चेकआउट ब्रांडिंग को सेटिंग्स > चेकआउट और खाते > कस्टमाइज़ के अंतर्गत कॉन्फ़िगर किया गया है। यह आपके चेकआउट पृष्ठों को मुख्य स्टोर से भिन्न फ़ेविकॉन दिखाने की अनुमति देता है, जो मल्टी-ब्रांड सेटअप के लिए उपयोगी है।
यह सत्यापित करने के लिए कि आपका Shopify फ़ेविकॉन काम कर रहा है, live favicon tester का उपयोग करें और अपने स्टोर का URL दर्ज करें। परीक्षक पुष्टि करता है कि आइकन सार्वजनिक रूप से पहुंच योग्य है और आपको दिखाता है कि यह 16, 32 और 48 पिक्सेल पर कैसे प्रस्तुत होता है। यह समझने के लिए best favicon size भी जांचें कि कौन से अतिरिक्त आकार आपके PWA इंस्टॉल अनुभव को बेहतर बनाएंगे।
आम Shopify फ़ेविकॉन गलतियों में एक आयताकार लोगो को पहले वर्गाकार में काटे बिना अपलोड करना (एक कुचला हुआ आइकन बनाता है), एक बहुत छोटी छवि अपलोड करना (रेटिना डिस्प्ले पर धुंधलापन), और अपलोड करने के बाद सेव पर क्लिक करना भूल जाना (जब तक आप स्पष्ट रूप से सेव नहीं करते तब तक परिवर्तन नहीं होता है)। favicon generator सीधे Shopify अपलोड के लिए तैयार 512×512 पर एक उचित वर्ग PNG निर्यात करता है।
यह कैसे काम करता है
- 1
एक 512×512 वर्ग PNG उत्पन्न करें
अपने लोगो या ब्रांड चिह्न के साथ [favicon generator](tool:favicon-generator) का उपयोग करें। डाउनलोड पैकेज से 512×512 PNG निर्यात करें - यह Shopify के लिए सही इनपुट आकार है।
- 2
Theme Editor में अपनी थीम खोलें
अपने Shopify एडमिन में, ऑनलाइन स्टोर > थीम्स पर जाएं और अपनी लाइव थीम के आगे कस्टमाइज़ पर क्लिक करें।
- 3
थीम सेटिंग्स > फ़ेविकॉन पर नेविगेट करें
बाएं साइडबार में, थीम सेटिंग्स (अधिकांश थीम पर नीचे गियर आइकन) पर क्लिक करें और फ़ेविकॉन या ब्रांड अनुभाग देखें। सटीक लेबल थीम के अनुसार भिन्न होता है।
- 4
अपना PNG अपलोड करें और सेव करें
फ़ेविकॉन अपलोड फ़ील्ड पर क्लिक करें, अपना 512×512 PNG चुनें और पुष्टि करें। शीर्ष-दाएँ कोने में सहेजें पर क्लिक करें। Shopify आइकन को अपने CDN पर अपलोड करता है और इसे सभी पेजों पर प्रसारित करता है।
- 5
गुप्त विंडो में सत्यापित करें
एक निजी/गुप्त ब्राउज़र विंडो खोलें और अपने स्टोर URL पर जाएँ। पुष्टि करें कि नया फ़ेविकॉन ब्राउज़र टैब में दिखाई देता है। त्वरित बाहरी जांच के लिए [favicon tester](utility:favicon-tester) का उपयोग करें।
अभी आज़माएं
एक Shopify-तैयार फ़ेविकॉन जेनरेट करें
फ़ेविकॉन जनरेटरसामान्य प्रश्न
मैं Shopify में फ़ेविकॉन कहाँ जोड़ूँ?+
ऑनलाइन स्टोर > थीम > कस्टमाइज़ > थीम सेटिंग्स > फ़ेविकॉन। एक वर्गाकार PNG (512×512 अनुशंसित) अपलोड करें, सहेजें पर क्लिक करें, और Shopify स्वचालित रूप से प्रत्येक स्टोरफ्रंट पेज पर आइकन इंजेक्ट कर देता है।
Shopify किस आकार के फ़ेविकॉन का उपयोग करता है?+
Shopify ब्राउज़र टैब में फ़ेविकॉन को 32×32 पिक्सेल पर प्रदर्शित करता है। सबसे तेज़ परिणाम के लिए 512×512 अपलोड करें - Shopify नमूनों को 32×32 पर डाउन करें। कभी भी 32×32 से छोटा स्रोत अपलोड न करें अन्यथा यह धुंधला दिखाई देगा।
मेरा Shopify फ़ेविकॉन धुंधला या फैला हुआ क्यों दिखता है?+
आपने संभवतः एक गैर-वर्गाकार छवि या बहुत छोटा स्रोत अपलोड किया है। अपलोड करने से पहले अपने लोगो को एक पूर्ण वर्ग में काटें, और कम से कम 256×256 पिक्सेल से शुरू करें। [favicon generator](tool:favicon-generator) स्वचालित रूप से Shopify के लिए तैयार एक वर्ग 512×512 PNG तैयार करता है।
मेरा नया Shopify फ़ेविकॉन क्यों नहीं दिख रहा है?+
ब्राउज़र और सीडीएन कैश अपडेट में देरी करते हैं। कैश हस्तक्षेप के बिना अद्यतन फ़ेविकॉन देखने के लिए एक गुप्त/निजी विंडो खोलें और अपने स्टोर URL पर नेविगेट करें। यदि यह अभी भी सामान्य ब्राउज़िंग में पुराना आइकन दिखाता है, तो सीडीएन कैश समाप्त होने के लिए कुछ घंटों तक प्रतीक्षा करें।
क्या मैं अपने Shopify स्टोर में apple-touch-icon जोड़ सकता हूँ?+
हाँ, लेकिन इसके लिए मैन्युअल कोड संपादन की आवश्यकता होती है। अपने थीम एसेट फ़ोल्डर में 180×180 apple-touch-icon.png अपलोड करें, फिर `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | जोड़ें `<head>` अनुभाग के अंदर theme.liquid में एसेट_यूआरएल }}'>`।
क्या Shopify SVG फ़ेविकॉन का समर्थन करता है?+
अंतर्निहित Theme Editor फ़ेविकॉन अपलोड SVG को स्वीकार नहीं करता है। SVG फ़ेविकॉन का उपयोग करने के लिए, theme.liquid में मैन्युअल रूप से लिंक टैग जोड़ें: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | Asset_url }}'>` SVG को एसेट्स फ़ोल्डर में अपलोड करने के बाद।
क्या मुझे अपना Shopify फ़ेविकॉन बदलने के लिए डेवलपर की आवश्यकता है?+
नहीं, Theme Editor (ऑनलाइन स्टोर > थीम > कस्टमाइज़ > थीम सेटिंग्स > फ़ेविकॉन) का उपयोग करके, आप बिना किसी कोड के दो मिनट के अंदर एक नया फ़ेविकॉन अपलोड और सहेज सकते हैं। डेवलपर पहुंच केवल SVG या apple-touch-icon परिवर्धन के लिए आवश्यक है।