HTML में फ़ेविकॉन कैसे जोड़ें
सादे HTML पेज पर फ़ेविकॉन जोड़ना एक-पंक्ति का परिवर्तन है - लेकिन आधुनिक, पूर्ण सेटअप छह पंक्तियों का है और iOS, Android, डार्क मोड और PWA इंस्टॉल को कवर करता है।
प्रत्येक ब्राउज़र जिस एकल टैग का सम्मान करता है वह <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> ब्लॉक के अंदर एक पसंदीदा-रंग-स्कीम मीडिया क्वेरी एम्बेड करता है।