Favicon.ico के लिए लिंक टैग जोड़ना आवश्यक है?

153

क्या कोई आधुनिक ब्राउज़र है जो स्वचालित रूप से favicon.ico का पता नहीं लगाएगा? क्या favicon.ico के लिए लिंक टैग जोड़ने का कोई कारण है?

<link rel="shortcut icon" href="/favicon.ico">

मेरा अनुमान है कि यदि आप GIF या PNG के साथ जाने का निर्णय लेते हैं, तो इसे केवल HTML दस्तावेज़ में शामिल करना आवश्यक है ...

html favicon html-head

— user1087110
स्रोत

मैंने कभी नहीं देखा कि किसी भी ब्राउज़र को इसकी आवश्यकता थी। क्या आपके पास कोई उदाहरण है?

— शार्क 555

मैं कुछ ब्राउज़रों को नाम दे सकता हूं जिनमें वरीयता सेटिंग्स हैं या नहीं, favicon.icoस्वचालित रूप से देखने के लिए जाना है या नहीं । इसलिए यदि आप यह सुनिश्चित करना चाहते हैं कि आपका आइकन दिखाई दे, तो बेहतर होगा कि आप अपने HTML में एक लिंक शामिल करें। वैसे, .png फाइलें आमतौर पर तुलनीय .ico फाइलों की तुलना में छोटी होती हैं।

— श्री लिस्टर

कृपया कुछ मिस्टर लिस्टर का नाम दें :) नो शार्क 555, मैं किसी का नाम नहीं ले सकता ...

— user1087110

5

फ़ायरफ़ॉक्स (और अन्य गेको आधारित ब्राउज़र जैसे सीमॉन्की) के व्यवहार को ठीक करने के लिए कई सेटिंग्स हैं। browser.chrome.faviconsसच करने के लिए सेट जड़ में favicon.ico के लिए दिखेगा; यदि गलत है, तो यह केवल HTML पेज में निर्दिष्ट होने पर एक आइकन लोड करेगा। Kb.mozillazine.org/Browser.chrome.favicons और संबंधित पृष्ठ देखें ।

— श्री लिस्टर

संभव डुप्लिकेट क्या आपको <लिंक rel = "आइकन" href = "favicon.ico" प्रकार = "छवि / x-icon" /> शामिल करना है?

— डैन डस्केल्सस्कु

253

फ़ेविकॉन के लिए एक अलग स्थान या फ़ाइल प्रकार (जैसे पीएनजी या एसवीजी ) चुनने के लिए:
एक कारण यह हो सकता है कि आप किसी विशिष्ट स्थान में आइकन रखना चाहते हैं, शायद छवियों के फ़ोल्डर या कुछ समान में। उदाहरण के लिए:

<link rel="icon" href="_/img/favicon.png">

यह भिन्न स्थान एक CDN भी हो सकता है, जैसे SO के साथ लगता है <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">।

पीएनजी जैसे अन्य फ़ाइल प्रकारों का उपयोग करने के बारे में अधिक जानने के लिए इस प्रश्न को देखें ।

के लिए कैश बस्टिंग प्रयोजनों:
कैश-पर्दाफाश प्रयोजनों के लिए पथ के लिए एक क्वेरी स्ट्रिंग जोड़ें:

<link rel="icon" href="/favicon.ico?v=1.1">

फेवीकोन बहुत भारी कैश्ड हैं और यह एक ताज़ा सुनिश्चित करने का एक शानदार तरीका है।

डिफ़ॉल्ट स्थान के बारे में फुटनोट:
जहां तक सवाल का पहला बिट: सभी आधुनिक ब्राउज़र डिफ़ॉल्ट स्थान पर एक फ़ेविकॉन का पता लगाते हैं, इसलिए इसका उपयोग करने का कोई कारण नहींlink है।

फुटनोट के बारे में rel="icon":
जैसा कि @ सेमानिनो के जवाब से संकेत मिलता है , का उपयोग rel="shortcut icon"करना एक पुरानी तकनीक है जो इंटरनेट एक्सप्लोरर के पुराने संस्करणों द्वारा आवश्यक थी, लेकिन ज्यादातर मामलों में इसे अधिक सही rel="icon"निर्देश द्वारा बदला जा सकता है । लेख @Semanino पर इस आधार पर ठीक से करने के लिए लिंक उचित युक्ति जो शो एक relका मान shortcutएक मान्य विकल्प नहीं है।

— जेरोन
स्रोत

क्या यह <head>टैग में जाना चाहिए ?

— मैक्स विलियम्स

1

@MaxWilliams हाँ। ( MD3 डॉक्स में "अनुमति प्राप्त मूल तत्व" या W3 कल्पना में "संदर्भ" देखें )।

— जीरोन

1

यह 2016 है - और क्रोम अभी भी (या फिर से?) रूट में डिफ़ॉल्ट favicon.ico को पहचान नहीं रहा है यदि आप अन्य आइकन भी निर्दिष्ट करते हैं ...

— सेबस्टियन जी। मरीनस्कु

52

कृपया ध्यान दें कि W3C और WhatWG के दोनों HTML5 विनिर्देश मानकीकृत हैं

<link rel="icon" href="/favicon.ico">

"Rel" विशेषता का मान नोट करें!

विशेषता के shortcut iconलिए मूल्य relएक बहुत पुराना इंटरनेट एक्सप्लोरर विशिष्ट विस्तार और पदावनत है ।

तो कृपया इसे किसी भी अधिक का उपयोग न करने और अपनी फ़ाइलों को अपडेट करने पर विचार करें ताकि वे मानक अनुरूप हों और सभी ब्राउज़रों में सही ढंग से प्रदर्शित हों।

तुम भी इस महान पोस्ट पर एक नज़र रखना चाहते हो सकता है: rel = "शॉर्टकट आइकन" हानिकारक माना जाता है

— Semanino
स्रोत

1

काफी "पदावनत" नहीं (यह वास्तव में किसी भी कल्पना का हिस्सा नहीं था)। हालांकि, HTML5 कल्पना में कहा गया है, "ऐतिहासिक कारणों से, आइकन कीवर्ड" शॉर्टकट "से पहले हो सकता है। यदि" शॉर्टकट "कीवर्ड मौजूद है, तो इसे आइकन कीवर्ड से पहले तुरंत आना चाहिए और दो कीवर्ड को अलग करना होगा। केवल एक एकल U + 0020 अंतरिक्ष चरित्र द्वारा। " यह भी ध्यान दें कि, "आइकन कीवर्ड द्वारा दिए गए संसाधनों के लिए कोई डिफ़ॉल्ट प्रकार नहीं है।"

— DocRoot

12

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

यह सब इस बात पर निर्भर करता है कि आप किस प्रारूप का उपयोग करना चाहते हैं!
यदि आपके पास अपनी वेबसाइट का आइकन है, तो यह UX के लिए बेहतर होगा!

डेमो

ब्राउज़र टैब में लोगो दिखाएं

— xgqfrms
स्रोत

iconhandbook.co.uk/reference/examples/favicons लिंक: mathiasbynens.be/notes/rel-shortcut-icon#comments लिंक: html.spec.whatwg.org/multipn/semantics.html#rel-icon लिंक:

— xgqfrms

UX का इससे कोई लेना-देना नहीं है।

— पैड्टेक

@paddotk का मेरा मतलब है कि उपयोगकर्ता आसानी से यह बता सकता है कि टैब में फ़ेविकॉन आइकन शो होने पर ब्राउज़र में मल्टी-टैब खोलने पर कौन सी टैब लक्ष्य वेबसाइट की है।

— xgqfrms 15:12

1

हम प्लेटफ़ॉर्म विशिष्ट आकार वाले सभी उपकरणों के लिए जोड़ सकते हैं

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">

— अभिलाष
स्रोत

0

लब्बोलुआब यह नहीं है कि सभी ब्राउज़र वास्तव में आपके favicon.ico फ़ाइल की तलाश करेंगे । कुछ ब्राउज़र उपयोगकर्ताओं को यह चुनने की अनुमति देते हैं कि यह स्वचालित रूप से दिखना चाहिए या नहीं। इसलिए, यह सुनिश्चित करने के लिए कि यह हमेशा दिखाई देगा और इसे देखा जाएगा , आपको इसे परिभाषित करना होगा।

— एनिमूसन
स्रोत

6

आपकी टिप्पणी के लिए धन्यवाद। क्या आप कुछ ब्राउज़रों को नाम दे सकते हैं जो स्वचालित रूप से नहीं दिखेंगे?

— user1087110

11

@ user1087110: मैं अपने सिर के ऊपर से किसी को नहीं जानता, और ईमानदारी से जो परवाह करता है। मुद्दा यह है कि आप यह नहीं मान सकते हैं और आपको उन लोगों के लिए खाते की आवश्यकता होगी जो नहीं करेंगे।

— animuson

चूंकि यह अब प्रासंगिक नहीं है, आप पृष्ठ को साफ करने के लिए अपना उत्तर हटा सकते हैं।

— मुर्गियां