HTML में फ़ेविकॉन कैसे जोड़ें
सादे HTML पेज पर फ़ेविकॉन जोड़ना एक-पंक्ति का परिवर्तन है - लेकिन आधुनिक, पूर्ण सेटअप छह पंक्तियों का है और iOS, Android, डार्क मोड और PWA इंस्टॉल को कवर करता है।
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
प्रत्येक ब्राउज़र जिस एकल टैग का सम्मान करता है वह <link rel='icon' href='/favicon.ico'> है। अपनी साइट के रूट पर favicon.ico छोड़ें और आपका 80% काम पूरा हो जाएगा।
शेष 20% - apple-touch-icon, PNG वेरिएंट, डार्क-मोड समर्थन के साथ SVG, और एक वेबमेनिफेस्ट - वह है जो एक डिफ़ॉल्ट आइकन को एक पॉलिश ब्रांड अनुभव से अलग करता है।
यह कैसे काम करता है
- 1
अपना फ़ेविकॉन पैकेज जनरेट करें
FetchFavicon पैकेज जनरेटर का उपयोग करें - आपकी ज़रूरत की हर फ़ाइल और पेस्ट-तैयार मार्कअप तैयार करता है।
- 2
साइट रूट पर फ़ाइलें छोड़ें
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest।
- 3
स्निपेट को <head> में चिपकाएँ
छह <लिंक> टैग + एक <मेटा नाम='थीम-रंग'>।
अभी आज़माएं
HTML स्निपेट प्राप्त करें
फ़ेविकॉन जनरेटरसामान्य प्रश्न
<link> टैग कहां जाते हैं?+
<head> के अंदर, कहीं भी - ऑर्डर तब तक मायने नहीं रखता जब तक वे </head> से पहले आते हैं।
क्या मुझे .ico और PNG दोनों की आवश्यकता है?+
हाँ। .ico सार्वभौमिक फ़ॉलबैक है; PNG उच्च-DPI स्क्रीन पर सबसे तेज़ रेंडर करता है।
डार्क मोड के बारे में क्या?+
एक SVG वैरिएंट शिप करें जो अपने <style> ब्लॉक के अंदर एक पसंदीदा-रंग-स्कीम मीडिया क्वेरी एम्बेड करता है।