rel="icon" Link Tag की व्याख्या
किसी page के <head> में <link rel="icon"> tag browser को बताता है कि favicon के रूप में कौन-सी फ़ाइल इस्तेमाल करे। href image की ओर इशारा करता है, type उसका MIME type देता है, और sizes उन pixel dimensions को सूचीबद्ध करता है जो फ़ाइल रखती है ताकि browser सबसे अच्छा मैच चुन सके। आप कई icon link tags शामिल कर सकते हैं (हर size या format के लिए एक), और browser सबसे उपयुक्त चुनता है।
यह tag जो चार चीज़ें ढोता है
rel="icon" संबंध घोषित करता है: यह फ़ाइल document के लिए एक आइकन है। href image का path है। type MIME type है (image/x-icon, image/png, image/svg+xml), जो browser को उस format को छोड़ने देता है जिसे वह इस्तेमाल नहीं कर सकता। sizes उन dimensions को सूचीबद्ध करता है जो फ़ाइल में हैं, जैसे "32x32", या scalable SVG के लिए "any"।
Browser head में हर icon link पढ़ता है, फिर वह चुनता है जो जिस surface को वह बना रहा है उस पर सबसे अच्छा फ़िट हो: tab, एक bookmark, एक बड़ा tile। इसीलिए असल-दुनिया का head एक के बजाय कई ऐसे tags ढोता है, और इसीलिए वे सब head में, body से पहले होने चाहिए।
एक आधुनिक icon link सेट
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />पाँच tags, हर एक एक अलग उपभोक्ता के लिए। Browser उन्हें अनदेखा करता है जिन्हें वह नहीं समझता और बाक़ी में से सबसे अच्छा चुनता है।
हर attribute क्या करता है
| Attribute | उद्देश्य |
|---|---|
| rel | संबंध: favicon के लिए "icon", iOS के लिए "apple-touch-icon" |
| href | image फ़ाइल का path |
| type | MIME type, ताकि browser उन formats को छोड़ सके जिन्हें वह रेंडर नहीं कर सकता |
| sizes | फ़ाइल जो dimensions रखती है, जैसे "32x32", या SVG के लिए "any" |
rel="icon" FAQ
क्या icon link पर type attribute ज़रूरी है?
यह वैकल्पिक पर उपयोगी है। type browser को उस format को पहले download किए बिना छोड़ने देता है जिसे वह इस्तेमाल नहीं कर सकता। PNG और SVG links पर शामिल करने लायक़, और बाक़ी हर जगह हानिरहित।
क्या मेरे पास एक से ज़्यादा icon link tag हो सकते हैं?
हाँ, और आमतौर पर होने ही चाहिए। कई sizes और formats घोषित करना हर surface को tab के लिए एक बड़ी image को नीचे स्केल करने और home screen के लिए उसे ऊपर स्केल करने के बजाय सबसे नज़दीकी मैच चुनने देता है।
link tag कहाँ जाता है?
Document के <head> में। Browser head को parse करते समय favicon माँगता है, इसलिए body में रखा गया tag पहले लोड पर इस्तेमाल होने के लिए बहुत देर से पहुँचता है।