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

578

मैं एक वेबसाइट पर काम कर रहा हूं और मैं ब्राउज़र टैब में एक छोटा आइकन जोड़ना चाहूंगा।

मैं इसे HTML में कैसे कर सकता हूं और कोड में मुझे इसे कहां रखना होगा (जैसे हेडर)? मेरे पास एक .pngलोगो फ़ाइल है जिसे मैं एक आइकन में बदलना चाहता हूं।

संबंधित: ब्राउज़र टैब पर HTML सेट छवि ।

html  icons  favicon 
— knookie
स्रोत
1
अधिक जानकारी के लिए लिंक की जाँच करें । आप सही रास्ते पर हैं।
— रेग
छवि (favicon.ico) को एफ़टीपी के साथ अपलोड करें (हमारे एफ़टीपी ट्यूटोरियल पढ़ें) अपनी वेब साइट के रूट सेक्शन में। मूल अनुभाग मुख्य फ़ाइल क्षेत्र है, जहां आप अपने मुख्य पृष्ठ के लिए index.html (index.asp, index.php, आदि) फ़ाइल संग्रहीत करेंगे। davesite.com होगा जड़ davesite.com/webstation नहीं होगा जड़ davesite.com/webstation/html जड़ या तो इस फ़ाइल में ठीक से रखा, अपने संपूर्ण डोमेन के लिए डिफ़ॉल्ट के रूप में लोड होगा नहीं है।
— 16
समय से पहले कुंजी दर्ज करें - वैसे भी उत्तर के लिए धन्यवाद। क्या आपके द्वारा दिए गए लिंक में पहला भाग (जो मैंने ऊपर चिपकाया था) कहने से काम नहीं लगता था? हालांकि दूसरे भाग ने पूरी तरह से काम किया - धन्यवाद
— knookie
3
— डेनसिटी सेगुरेट

जवाबों:

416

किसी वेबसाइट पर फ़ेविकॉन जोड़ने के दो तरीके हैं।

<link rel="icon">

बस निम्नलिखित कोड को <head>तत्व में जोड़ें:

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

PNG फ़ेविकॉन्स IE <= 10 को छोड़कर अधिकांश ब्राउज़रों द्वारा समर्थित हैं । पश्चगामी संगतता के लिए, आप ICO फ़ेविकॉन का उपयोग कर सकते हैं।

ध्यान दें कि आपको अब और विशेषता के साथ पूर्ववर्ती नहीं होना iconहैrelshortcut । से MDN लिंक प्रकार :

shortcutलिंक प्रकार अक्सर से पहले देखा जाता है icon, लेकिन इस कड़ी प्रकार गैर-अनुरूप है, पर ध्यान नहीं दिया और वेब लेखकों अब इसका इस्तेमाल नहीं करना चाहिए ।

favicon.ico रूट डायरेक्टरी में

से एक और तो जवाब (द्वारा @mercator ):

सभी आधुनिक ब्राउज़र (क्रोम 4, फ़ायरफ़ॉक्स 3.5, IE8, ओपेरा 10 और सफारी 4 के साथ परीक्षण) हमेशा अनुरोध करेंगे favicon.icoजब तक कि आपने शॉर्टकट आइकन निर्दिष्ट नहीं किया हो <link>।

तो आपको बस इतना करना है /favicon.icoकि अपनी वेबसाइट से अपने फेविकॉन को वापस करने का अनुरोध करें। यह विकल्प दुर्भाग्य से आपको PNG आइकन का उपयोग करने की अनुमति नहीं देता है।

Favicon.png बनाम favicon.ico भी देखें - मुझे ICO के बजाय PNG का उपयोग क्यों करना चाहिए?

— मिचेल पेरोलाकोव्स्की
स्रोत
1
यदि आप सभी चिह्न स्वचालित रूप से चाहते हैं (मोबाइल सहित, 'होमस्क्रीन में शामिल करें' चिह्न, मोबाइल बुकमार्क, iOS / Droid, डेस्कटॉप-टैब, आदि), ICO फ़ाइल पीढ़ी, आदि, साथ ही कहा मेटा फ़ाइलों के लिए कॉपी-पेस्ट करने योग्य HTML कोड, आदि सभी एक क्लिक के साथ, आप इस आसान टूल (मैं संबद्ध नहीं हूँ) का उपयोग कर सकते हैं realfavicongenerator.net
— अल्बर्ट
2
जोड़ना चाहते हैं: आपका आइकन वर्ग आयाम में होना चाहिए, इसका मतलब है कि चौड़ाई ऊंचाई के बराबर है।
— गुयेन टैन डाट
3
इसे जांचते समय Ctrl + F5 को हिट करना न भूलें। कभी-कभी यह कैश किया जाता है।
— बालों वाली
मैंने नहीं किया कि मेरी साइट के रूट डायरेक्टरी में favicon.ico नाम की एक ICO फाइल को रखने से या तो इसे लोड करने के लिए FireFox या Chrome हुआ। इसलिए मैं <link relमार्ग गया। लेकिन, मेरी साइट का पता मज़बूती से DNS में सूचीबद्ध नहीं है, इसलिए मैं href="http://example.com"इसे पुनः प्राप्त करने के लिए भरोसा नहीं कर सकता । इसलिए मैं अपनी index.htmफ़ाइल में इस समाधान पर पहुंचा :<link rel="icon" href="favicon.ico">
— CODE-REaD
426
  1. अपने png को ico फ़ाइल में बदलने के लिए एक उपकरण का उपयोग करें। आप "फ़ेविकॉन जनरेटर" खोज सकते हैं और आप कई ऑनलाइन टूल पा सकते हैं।

  2. headएक link-tag के साथ ico पते को रखें:

    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
— गुस्तावो कोस्टा डी ओलिवेरा
स्रोत
3
धन्यवाद! मैंने ठीक से चरणों का पालन किया और यह IE और फ़ायरफ़ॉक्स पर वास्तव में अच्छा काम कर रहा है, लेकिन किसी कारण से यह Google Chrome पर काम नहीं कर रहा है, क्या मुझे कैश को हटाना है? या मुझे वहां से क्या करना है?
— पैट्रिकगोम्बो
1
मुझे फ़ोटोशॉप प्लगइन का उपयोग करना पसंद है: telegraphics.com.au/svn/icoformat/trunk/dist/README.html
— Ben_Coding
2
"शॉर्टकट" भाग को कई परिस्थितियों में हटाया जा सकता है: stackoverflow.com/questions/13211206/… , mathiasbynens.be/notes/rel-shortcut-icon
— bbc
72

मुझे जो सबसे अच्छा मिला वह है http://www.favicomatic.com/ मैं सबसे अच्छा कहता हूं क्योंकि यह मुझे कुरकुरा फेविकॉन देता है, और उनके परिवर्तन के बाद किसी भी संपादन की आवश्यकता नहीं है। यह 16x16 और 32x32 पर फ़ेविकॉन उत्पन्न करेगा और उन्हें उद्धृत करने के लिए "हर लानत आकार, सर!" इसके अलावा, उनकी साइट शांत दिखती है और उपयोग में आसान है।

वे उस html को भी उत्पन्न करते हैं जिसका उपयोग आपको उन फ़ाइलों के लिए करने की आवश्यकता है जो वे उत्पन्न करते हैं।

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

मैंने पहले 20 या तो Google परिणामों को देखा, और यह अब तक का सबसे अच्छा था।

— जारेड मेनार्ड
स्रोत
4
मैं हर पृष्ठ के लिए इन सभी को अपने मुख्य टैग में रखने वाला हूं?
— नौमेनन
1
मैं यह सब आपके सिर टैग में नहीं डालूंगा। मैं केवल उन उपकरणों का समर्थन करने के लिए आवश्यक टैग में रखूंगा जिन्हें आपको समर्थन करने की आवश्यकता है। ईमानदारी से आप एक एकल के साथ प्राप्त कर सकते हैं <लिंक rel = "आइकन" प्रकार = "छवि / ico" href = "/ images / favicon.ico">
— जारेड मेनार्ड
5
यह git पृष्ठ बताता है कि इनमें से अधिकांश चिह्न किसके लिए उपयोग किए जाते हैं: github.com/audreyr/favicon-cheat-sheet
— जारेड मेनार्ड
14

कई अलग-अलग आइकन हैं और यहां तक ​​कि स्प्लैश स्क्रीन भी हैं जो आप विभिन्न उपकरणों के लिए सेट कर सकते हैं। यह उत्तर उन सभी का समर्थन करता है।

यहां कुछ स्निपेट हैं जिनका मैंने प्रासंगिक लिंक के साथ उपयोग किया है जहां मैंने जानकारी एकत्र की है। ASP.NET MVC Boilerplate प्रोजेक्ट टेम्पलेट के बारे में अधिक जानकारी और अधिक जानकारी के लिए मेरा ब्लॉग देखें, यह सब बॉक्स के ठीक बाहर बनाया गया है (नमूना छवि फ़ाइलों सहित)।

अपने HTML हेड में निम्नलिखित मार्क-अप जोड़ें। टिप्पणी किए गए अनुभाग पूरी तरह से वैकल्पिक हैं। जबकि सभी आइकनों को कवर करने के लिए अनकम्प्रेस्ड सेक्शन की सिफारिश की जाती है। डरो मत, सबसे अगर यह आपकी मदद करने के लिए टिप्पणी है।

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

मेरी ब्राउज़रकॉन्फ़िग। Xml फ़ाइल। ऊपर पूर्ण विवरण।

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

मेरी मैनिफ़ेस्ट.जॉन फ़ाइल। ऊपर पूर्ण विवरण।

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

परियोजना में फाइलों की एक सूची (ध्यान दें कि उपरोक्त मेटा टैग का उपयोग करने से बचने के लिए यदि आप उनमें से कुछ को अपनी परियोजना के मूल में रखने का निर्णय लेते हैं, तो इन फाइलों के नाम महत्वपूर्ण हैं):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

कुल ओवरहेड

यदि आप उन टिप्पणियों को निकालते हैं जो अतिरिक्त HTML के 3KB हैं, यदि आप 1.5KB की छप स्क्रीन का समर्थन नहीं करते हैं। यदि आप अपने HTML कंटेंट पर GZIP कम्प्रेशन का उपयोग कर रहे हैं, जो कि हर किसी को इन दिनों करना चाहिए, जो आपको बिना किसी स्पलैश स्क्रीन के सभी प्लेटफॉर्म या 446 बाइट्स को सपोर्ट करने के लिए प्रति अनुरोध लगभग 634 बाइट्स के साथ छोड़ देता है। मैं व्यक्तिगत रूप से आईओएस, एंड्रॉइड और विंडोज उपकरणों का समर्थन करने के लिए इसके लायक समझता हूं लेकिन आपकी पसंद, मैं सिर्फ विकल्प दे रहा हूं!

वर्तमान वेब आइकन / स्प्लैश स्क्रीन / सेटिंग्स स्थिति के बारे में साइड नोट

विक्रेता विशिष्ट चिह्न, स्प्लैश स्क्रीन और वेब ब्राउज़र या पिन किए गए आइकन को नियंत्रित करने के लिए विशेष टैग के साथ यह स्थिति हास्यास्पद है। एक आदर्श दुनिया में हम सभी एक favicon.svg फ़ाइल का उपयोग करेंगे जो किसी भी आकार में अच्छी लग सकती है और इसे पृष्ठ के मूल में रखा जा सकता है। केवल फ़ायर्फ़ॉक्स लेखन के समय इसका समर्थन करता है ( CanIUse.com देखें )।

हालाँकि, आइकन इन दिनों केवल सेटिंग नहीं हैं, कई अन्य विक्रेता विशिष्ट सेटिंग्स (ऊपर दिखाए गए) हैं, लेकिन एक favicon.svg फ़ाइल अधिकांश उपयोग के मामलों को कवर करेगी।

अपडेट करें

नए एंड्रॉइड / क्रोम संस्करण M39 + फ़ेविकॉन / थीमिंग विकल्पों को शामिल करने के लिए अपडेट किया गया। दिलचस्प है, वे Microsoft के समान दृष्टिकोण के साथ गए हैं लेकिन XML के बजाय JSON फ़ाइल का उपयोग कर रहे हैं।

— मुहम्मद रेहान सईद
स्रोत
11

मैंने एक ऑनलाइन फ़ेविकॉन जेनरेटर बनाया है जिसके साथ आप फ़ॉन्ट विस्मयकारी आइकॉन से फ़ेविकॉन बना सकते हैं । आप ब्राउज़र में निर्मित फ़ेविकॉन लाइव का पूर्वावलोकन कर सकते हैं।

यहाँ छवि विवरण दर्ज करें

यदि आप अतिरिक्त सुविधाएँ चाहते हैं, तो कृपया एक समस्या या यहाँ एक निवेदन प्रस्तुत करने के लिए स्वतंत्र महसूस करें :)।

— ग्रहण
स्रोत
10

मैंने अपनी वेबसाइट के लिए यह सफलतापूर्वक किया है।

केवल अपवाद है, SeaMonkey ब्राउज़र में आपके द्वारा सम्मिलित HTML कोड की आवश्यकता होती है <head>; जबकि, अन्य ब्राउज़र अभी भी किसी भी HTML प्रविष्टि के बिना favicon.ico प्रदर्शित करेंगे। इसके अलावा, IE के अलावा कोई भी ब्राउज़र अन्य प्रकार की छवियों का उपयोग कर सकता है, न कि केवल .ico प्रारूप। आशा है कि ये आपकी मदद करेगा।

— बार्बी लैपटॉप गेमर
स्रोत
5

ऊपर बहुत सारे जटिल समाधान हैं। मेरे लिए? मैंने छवि का आकार 32 x 32 पिक्सेल में बदलने के बाद मूल PNG फ़ाइल की एक प्रति सहेजने के लिए GIMP का उपयोग किया।

बस इसे एक .ico फ़ाइल के रूप में सहेजना सुनिश्चित करें और उपयोग करें 

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

ऊपर सूचीबद्ध

— beep_check
स्रोत
4

मैं आपको अपने .PNG या .GIF को .ICO फ़ाइल में बदलने के लिए http://faviconer.com आज़माने की सलाह दूंगा।

आप एक .ICO फाइल में दोनों 16x16और 32x32(नए रेटिना डिस्प्ले के लिए) बना सकते हैं ।

IE और फ़ायरफ़ॉक्स के साथ कोई समस्या नहीं है

— दिमित्री ए
स्रोत
3

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

— मिलौद एलमरी
स्रोत
2 
<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

अगर मैं आप में से उन लोगों के लिए और अधिक स्पष्टता जोड़ सकता हूं जो अभी भी भ्रमित हैं। .Ico फ़ाइल .png की तुलना में अधिक पारदर्शिता प्रदान करने के लिए जाती है, यही कारण है कि मैं आपकी छवि को यहां बताए अनुसार परिवर्तित करने की सलाह देता हूं: http://www.favicomatic.com/done भी, href के अंदर केवल छवि का स्थान है , यह किसी भी सर्वर का स्थान हो सकता है, सामने http: // जोड़ना याद रखें, अन्यथा यह काम नहीं करेगा।

— dizad87
स्रोत
1

मैंने किसी अन्य का उपयोग नहीं किया है, लेकिन https://realfavicongenerator.net/ एक शीर्ष विकल्प लगता है, और इसका उल्लेख अभी तक यहां नहीं किया गया है।

यह favicons बनाने के लिए स्रोत छवियों के रूप में SVGs का समर्थन करता है, और यह विभिन्न प्लेटफार्मों के लिए छवियों को ओवरराइड करने में सहायक विकल्प प्रदान करता है। इसके अलावा, डिफ़ॉल्ट रूप से यह हर पुरानी प्लेटफॉर्म के साथ पीछे की ओर संगत होने के लिए एक टन का चित्र उत्पन्न नहीं करता है। इसके बजाय, यह आपको यह जांचने के लिए विकल्प देता है कि क्या आप उन्हें चाहते हैं।

एक ईमेल से डेवलपर ने मुझे भेजा, उनके पास एसवीजी फेवीकोन्स बनाने के लिए समर्थन जोड़ने की योजना भी है, साथ ही एसवीजी थीम-संवेदनशीलता भी है , मुझे लगता है, जो एक पूरी तरह से भयानक विशेषता है।

— mbomb007
स्रोत
0

कृपया अपनी इंडेक्स फ़ाइल को हेडर सेक्शन में नीचे दिए गए कोड का उपयोग करें।

<link rel="icon" href="yourfevicon.ico" />
— चित्रांश बैराथे
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.