मेरे पास कुछ स्थिर पृष्ठ हैं जो सिर्फ शुद्ध HTML हैं, जिसे हम सर्वर के डाउन होने पर प्रदर्शित करते हैं। मैं एक फ़ेविकॉन कैसे बना सकता हूं जो मैंने बनाया (यह 16x16px है और यह एचटीएमएल फ़ाइल के समान निर्देशिका में बैठा है; इसे "टैब" आइकन के रूप में फ़ेविकॉन कहा जाता है) मैंने विकिपीडिया पर पढ़ा है और कुछ ट्यूटोरियल देखा है और निम्नलिखित को लागू किया है:

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

लेकिन यह अभी भी काम नहीं करना चाहता है। मैं साइटों का परीक्षण करने के लिए Chrome का उपयोग कर रहा हूं। विकिपीडिया के अनुसार .ico सबसे अच्छा चित्र प्रारूप है जो सभी ब्राउज़र प्रकारों पर चलता है।

अपडेट करें

मुझे यह स्थानीय रूप से काम करने के लिए नहीं मिला, हालांकि कोड यह जांचता है कि सर्वर द्वारा साइट की सेवा शुरू करने के बाद यह वास्तव में ठीक से काम करेगा। बस इसे सर्वर तक धकेलने की कोशिश करें और अपने कैश को रीफ्रेश करें और इसे ठीक काम करना चाहिए।

html static favicon

— प्रसिद्ध व्यक्ति
स्रोत

जो आप अपने किसी मित्र को किसी अन्य प्रणाली पर आपके लिए इसे जांचने के लिए नहीं कहते हैं, वही समस्या मेरे क्लाइंट के साथ है, जो मेरे सिस्टम को ठीक दिखा रहा है और वह शिकायत कर रहा है कि फेविकॉन नहीं दिखा रहा है, मैं ज्यादातर आपके पहले उदाहरण का उपयोग करता हूं और यह सही है। शुभकामनाएँ।

— एमटी

3

वेबसाइट के लिए ब्राउज़र टैब आइकन (फ़ेविकॉन) कैसे जोड़ें के

— माइकल पेरोलकोव्स्की

आपका उदाहरण अब क्रोम पर काम कर रहा है।

— दामजान पविलेका

दिलचस्प है, लाइव वेबसाइट ने फ़ेविकॉन को ठीक से काम किया, लेकिन जब स्थानीय रूप से फ़ाइल को देखा, और स्थानीय सर्वर के माध्यम से इसे सेवा नहीं दी (b / c यह सरल स्थिर साइट है - हाँ!), फ़ेविकॉन नहीं दिखा। दृष्टिहीनता में यह समझ में आता है, सर्वर ऑटो इसे पूरा करते हैं। (32, 16 और 180 फ़ेविकॉन भिन्नता के आगे ) जोड़ने <link rel="icon" type="image/x-icon" href="favicon.ico">से समस्या का स्थानीय रूप से हल हो गया। चूंकि मैंने बड़े आइकन आकारों और प्रकट के लिए शामिल किया है, इसलिए मैंने दो बार नहीं सोचा कि क्यों नहीं दिखा रहा था! :-)headlinklinkfavicon.ico

— शेरिलहोमन

932

आप एक .png छवि बना सकते हैं और फिर <head>अपने स्थैतिक HTML दस्तावेजों के टैग के बीच निम्न स्निपेट का उपयोग कर सकते हैं :

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

— हज मैकगी
स्रोत

3

क्या आपने अपने ico लिंक के लिए rel = में "शॉर्टकट आइकन" डालने की कोशिश की और favicon.ico से पहले दोनों को केवल यह बताने के लिए कहा कि यह वेबरूट डायर में है?

— हाजी मैकजी

1

yip ने यह भी कोशिश की .. यार lol i रेट मैं यह सब फिर से शुरू करने जा रहा हूँ और फिर बूट करने की कोशिश करता हूँ और देखता हूँ कि शायद इसकी कैशिंग गलत है या कुछ ..

— TheLegend

5

मैं कसम खाता हूँ - मुझे कोड जोड़ने के बाद वही समस्याएं थीं - यह ब्राउज़र के लिए ग्रे बॉक्स के बजाय आइकन को प्रदर्शित करने में शायद एक दिन लगता है - आमतौर पर उर ब्राउज़र कैश इतिहास इत्यादि को डंप करने की कोशिश करते हैं और अगर यू कॉपी किया जाता है तो मेरा कोड सुनिश्चित कर लें change example.com to ur domain lol

— Hazy McGee

2

शीर्ष पंक्ति href तर्क में एक निरर्थक / है। एक बार जब मैंने इसे हटा दिया तो यह एक आकर्षण की तरह काम करता है। होना चाहिए: <लिंक rel = "शॉर्टकट आइकन" href = "favicon.png" प्रकार = "छवि / पीएनजी">

— drpawelo

4

w3.org/2005/10/howto-favicon टैग में एक profileविशेषता शामिल करने के लिए कहता है head... क्या यह आवश्यक है?

— राकिब

228

अधिकांश ब्राउज़रों को favicon.icoबिना बताए साइट की मूल निर्देशिका से उठाया जाएगा ; लेकिन वे इसे हमेशा एक नए के साथ अपडेट नहीं करते हैं।

हालाँकि, मैं आमतौर पर आपके उदाहरणों के दूसरे के लिए जाता हूँ:

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />

— Codecraft
स्रोत

यह मेटा डेटा या स्क्रिप्ट टैग befoer होना चाहिए ?? या कोई समस्या नहीं

— TheLegend

2

जब तक इसके <head> अनुभाग में है, तब तक कोई फर्क नहीं पड़ता - क्योंकि इसके काम करने के लिए किसी और चीज पर निर्भर नहीं है।

— कोडक्रैफ्ट

126

वास्तव में, सभी ब्राउज़रों में अपने फ़ेविकॉन को काम करने के लिए, आपके पास सही आकार और प्रारूप में 10 से अधिक छवियां होनी चाहिए।

मैंने एक ऐप ( faviconit.com ) बनाया, ताकि लोगों को ये सभी चित्र और सही टैग हाथ से नहीं बनाने पड़ें ।

उम्मीद है आप इसे पसंद करते हैं।

— एडुआर्डो रूसो
स्रोत

6

एप्लिकेशन को पसंद किया, कोई बी एस - सीधे इसे करने के लिए, और छवि मुझे समय की एक गुच्छा बचाने के लिए आप सभी फेवीकोन्स +1 बनाने से पहले संपादित किया जा सकता है :)

— SidOfc

1

सहमत, यह एक शानदार ऐप है। जबकि मुझे नहीं लगता कि उन सभी छवि आकार काफी आवश्यक लगते हैं, मुझे लगता है कि यह उन्हें और आवश्यक मार्कअप आदि उत्पन्न करता है, धन्यवाद!

— andrhamm

एक महान app Indeead: +1 :। बहुत कुछ ओ / मदद की

— रेनाटो गोम्स

1

लेकिन यह मालिकाना है।

— ctrl-alt-delor

यह काम नहीं करता है, देता हैWhoops, looks like something went wrong.

— daka

68

निम्नलिखित मेरे लिए काम करता है ...

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

— जेट ब्लू
स्रोत

40

अपनी छवि फ़ाइल को बेस 64 स्ट्रिंग में इस तरह से एक टूल के साथ कनवर्ट करें और फिर YourBase64StringHereनीचे के स्निपेट में प्लेसहोल्डर को अपने स्ट्रिंग के साथ बदलें और अपने एचटीएमएल हेड सेक्शन में लाइन डालें:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

यह ब्राउज़रों में 100% काम करेगा।

— farshid
स्रोत

3

मुझे एक और उपकरण मिला है जो सर्वर में डेटा को स्थानांतरित किए बिना जावास्क्रिप्ट में रूपांतरण करता है: jpillora.com/base64-encoder इसके अलावा, यह ड्रैग और ड्रॉप द्वारा कई फाइलों को संभालता है। स्थानीय रूप से इसका उपयोग करने के लिए पृष्ठ को सहेजें।

— संभालें

1

imho, सबसे अच्छा समाधान, क्योंकि यह "स्टेटिक html" पेज का सम्मान करता है और पूरी तरह से दस्तावेज़ के भीतर निहित है।

— बफेलो रैबॉर्न

1

सबसे अच्छा उपाय। Png फ़ाइलों के साथ भी काम करता है। <लिंक href = "डेटा: छवि / png; आधार 64, YourBase64StringHere" rel = "आइकन" प्रकार = "छवि / png" />

— सक्सोनी के रॉल्फ

1

इससे हर पृष्ठ पर एक लंबी स्ट्रिंग जोड़ी जाएगी। छोटी छवियों के लिए इनलाइन बेस 64 का उपयोग करें जो शायद ही कभी उपयोगकर्ता को भेजे जाते हैं।

— फ्रोडेबोरली

इस तरह आपका फ़ेविकॉन कभी कैश नहीं होता है, आप हर बार क्लाइंट को पूरी स्ट्रिंग भेजते हैं, IHMHO एक यूआरएल का उपयोग करते हैं और इसलिए ब्राउज़र कैश 'क्लीनर / बेहतर' महसूस करता है

— Michiel

34

प्रयोग सिंटेक्स: _{^{.ico, .gif, .png,.svg}}

यह तालिका faviconप्रमुख ब्राउज़रों का उपयोग करने का तरीका बताती है। मानक कार्यान्वयन फ़ाइल स्वरूप और फ़ाइल नाम और स्थान को निर्दिष्ट करने के लिए दस्तावेज़ के अनुभाग में एक रिले विशेषता के साथ एक लिंक तत्व का उपयोग करता है।

ध्यान दें कि अधिकांश ब्राउज़र वेबसाइट के रूट में स्थित एक favicon.icoफ़ाइल को वरीयता देंगे (इसलिए किसी भी आइकन लिंक टैग को अनदेखा कर रहे हैं )।

                                           Edge   Firefox   Chrome   I.E.   Opera   Safari  
 ---------------------------------------- ------ --------- -------- ------ ------- -------- 
  <link rel="shortcut icon"                Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/myicon.ico">                                                    

  <link rel="icon"                         Yes    Yes       Yes      9      Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9      Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon"                         Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.gif">                                                     

  <link rel="icon" type="image/png"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.png">                                                     

  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/image.svg">

फ़ाइल प्रारूप का समर्थन

निम्न तालिका निम्न के लिए छवि फ़ाइल स्वरूप समर्थन दिखाती है favicon:

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

ब्राउज़र कार्यान्वयन

नीचे दी गई तालिका ब्राउज़र के विभिन्न क्षेत्रों को दर्शाती है जहाँ फ़ेविकॉन प्रदर्शित होते हैं:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

आइकन फाइलें 16 × 16 , 32 × 32 , 48 × 48 , या 64 × 64 पिक्सेल आकार में, और 8-बिट , 24-बिट , या 32-बिट रंग की गहराई में हो सकती हैं।

जबकि उपरोक्त जानकारी आम तौर पर सही है, कुछ स्थितियों में कुछ भिन्नताएं / अपवाद हैं।

^{विकिपीडिया पर स्रोत पर पूरा लेख देखें ।}

अपडेट: ("अधिक जानकारी")

खोज परिणामों में दिखाने के लिए फ़ेविकॉन को परिभाषित करने के लिए Google के "नए" (2019) मानदंड देखें ।
आप किसी भी डोमेन के लिए Google के कैश्ड फ़ेविकॉन को पुनः प्राप्त कर सकते हैं ( जैसे कि URL)https://www.google.com/s2/favicons?domain=stackoverflow.com

उपरोक्त URL का उपयोग सीधे एक <img>टैग रिटर्न में करता है: " "।
मैंने realfavicongenerator.net का उपयोग कुछ बार किया है; यह बहुत पूरी तरह से है, अधिकतम संभव संगतता के लिए आपको हर संभव फ़ेविकॉन भिन्नता उत्पन्न / अनुकूलित करना। (हालांकि, यदि आप एक एकल फ़ेविकॉन छवि की तलाश कर रहे हैं, तो यह आपके लिए उपकरण नहीं हो सकता है!) सरल फ़ाइल रूपांतरण (उदाहरण के PNGलिए ICO, आदि) के लिए मुझे onlineconvertfree.com पसंद है ।

— ashleedawg
स्रोत

15

यदि फ़ेविकॉन एक पीएनजी प्रकार की छवि है, तो यह क्रोम के पुराने संस्करणों में काम नहीं करेगा। हालाँकि यह फ़ायरफ़ॉक्स में ठीक काम करेगा। इसके अलावा, ऐसी चीजों पर काम करते समय अपने ब्राउज़र के कैश को साफ़ करना न भूलें। कई बार, कोड ठीक है, लेकिन कैश असली अपराधी है।

— तनवीर शेख
स्रोत

1

कोई बात नहीं; वैसे भी Chrome का एक पुराना संस्करण इंस्टॉल / रखना बहुत कठिन है

— बेन लेगिएरो

14

W3.org द्वारा अनुशंसित , आप इसे relप्राप्त करने के लिए विशेषता का उपयोग कर सकते हैं ।

उदाहरण:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...

— राहुल देसाई
स्रोत

8

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

— shilovk
स्रोत

7

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

इसने मेरे लिए काम किया

— आनंद द्विवेदी
स्रोत

4

यह काम कर सकते हैं, आप छवि का उपयोग नहीं कर सकते हैं / के रूप में MIME प्रकार png - क्योंकि यह आपको .ico उपयोग कर रहे हैं पर विचार गलत है

— zanderwar

5

मैं इसकी पुरानी पोस्ट जानता हूं लेकिन फिर भी मेरे जैसे किसी के लिए पोस्ट कर रहा हूं। इसने मेरे लिए काम किया

<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />

रूट निर्देशिका पर अपने favicon आइकन डालें ..

— Cyclotron3x3
स्रोत

4

एक अतिरिक्त नोट के रूप में जो किसी दिन किसी की मदद कर सकता है।

आप पृष्ठ से पहले कुछ भी प्रतिध्वनित नहीं कर सकते हैं:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

ico लोड नहीं होगा

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

ठीक काम करता है

— bart2puck
स्रोत

3

ऐसा इसलिए है क्योंकि यह एक HTML डॉक्यूमेंट के हेड सेक्शन में माना जाता है, और यदि ऐसा नहीं है तो ज्यादातर ब्राउजर्स द्वारा इसे नजरअंदाज कर दिया जाता है।

— एरिक सेबस्टा

हाँ, मैं सिर्फ यहाँ इस मामले में किसी को एक समस्या में भाग गया चाहता था। मेरी समस्या "हेलो" थी कुछ डिबग कोड था और मुझे थोड़ा स्टम्प किया गया था।

— bart2puck

3

मैंने convert -resize 16x16 img.png favicon.icoअपनी छवि को परिवर्तित करने के लिए (linux konsole पर) उपयोग किया , और <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">अपने हेडर और सब कुछ सही काम में जोड़ा ।

— dmx
स्रोत

2

ध्यान दें कि यदि आपकी साइट एक के रूप में चल रही है subfolder:

http://localhost/MySite/

आपको इसे ध्यान में रखना होगा। यदि आप किसी ASP.NETऐप से ऐसा कर रहे हैं तो आपको बस इतना करना होगा ~कि URL के सामने एक जोड़ दिया जाए :

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />

— सर्ज सगन
स्रोत

2

ओपी के अपडेट के अनुसार, यह स्थानीय रूप से प्रदर्शित नहीं हो रहा था, लेकिन ओपी के अपडेट के अनुसार, एक बार जब मैंने इसे सर्वर पर अपलोड किया, तो यह ठीक था।

चूंकि यह एक सरल, स्थिर html वेबसाइट है, इसलिए मुझे स्थानीय वेबसर्वर को चलाने के बिना इस पर काम करने की विलासिता है।
एक वेबसर्वर आम तौर पर स्वचालित रूप से फ़ेविकॉन की सेवा करेगा, यदि डिफ़ॉल्ट रूप से एक है।

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

इसलिए, जब मैं headटैग में निम्नलिखित आइटम था :

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

मैंने सादे 'ओल के लिए एक संदर्भ भी शामिल नहीं किया favicon.ico।
हालांकि, favicon.icoफ़ाइल को ऊपर सूचीबद्ध छवियों के अलावा, शामिल किया गया था।

एक बार मैंने निम्नलिखित पंक्ति जोड़ी:

    <link rel="icon" type="image/x-icon" href="favicon.ico">

यह मेरे ब्राउज़र में भी दिखा, जब मैं स्थानीय फ़ाइल देख रहा था, तब भी जब वह स्थानीय सर्वर के माध्यम से सेवा नहीं कर रहा था।

जब आइकन लाइव सर्वर पर चला तो आइकन ठीक दिखाई दिया, लेकिन स्थानीय रूप से नहीं।

मैं इसका स्पष्ट रूप से उल्लेख करता हूं क्योंकि मेरे द्वारा उपयोग किए गए फ़ेविकॉन जनरेटर, कृपया कोड, आइकन, प्रकट और निर्देशों की आपूर्ति की। हालाँकि, जबकि इसमें favicon.icoछवि शामिल थी, इसमें दस्तावेज़ में <link>जोड़ने के लिए कोड में उस फ़ाइल को शामिल नहीं किया गया था html।
मुझे लगता है कि सेवा अनुमान favicon.icoस्वचालित रूप से सभी ब्राउज़रों द्वारा डिफ़ॉल्ट रूप से सेवा और उपयोग किया जाएगा, इसलिए केवल "वैकल्पिक" संस्करणों को स्पष्ट रूप से हेड टैग में जोड़ा जाना चाहिए।
जाहिर है, वे इस बात पर विचार नहीं करते हैं कि स्थानीय रूप से फ़ाइलों को देखने पर (उर्फ स्थानीय रूप से उनकी सेवा नहीं कर रहा है), हम फ़ेविकॉन देखने में रुचि नहीं रखते हैं?

— SherylHohman
स्रोत

1

यदि आप favicon को रूट / इमेज फोल्डर में favicon.ico ब्राउजर के साथ जोड़ते हैं तो यह अपने आप समझ जाएगा और favicon के रूप में प्राप्त होगा। मैंने परीक्षण किया और काम किया। आपका लिंक www.website.com/images/favicon.ico होना चाहिए

अधिक जानकारी के लिए इस उत्तर को देखें:

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

— Sarkhan
स्रोत

0

ध्यान दें कि FF //URL में किसी अनावश्यक के साथ आइकन लोड करने में विफल रहता है /img//favicon.png। FF 53 पर परीक्षण किया गया। क्रोम ठीक है।

— एटिने बेर्सैक
स्रोत

यह वास्तव में एक जवाब नहीं है जितना कि यह एक टिप्पणी है । (" कैसे जवाब दें " देखें ।)

— ashleedawg

0

का उपयोग करने का प्रयास करें <link rel="icon" type="image/ico" href="images/favi.ico"/>

— उपिन्दास दोपहर
स्रोत

-2

मैंने बस एक png का उपयोग किया। किसी भी सफेद पृष्ठभूमि को हटाने के लिए सुनिश्चित करें। एक बेहतर आइकन के लिए बनाता है

— टॉम
स्रोत

स्थिर HTML पृष्ठ पर एक फ़ेविकॉन जोड़ना