मैं अपनी वेबसाइट पर फ़ेविकॉन कैसे जोड़ूं?

20

मेरी साइट पर फ़ेविकॉन जोड़ने के लिए आधुनिक मानक क्या मार्कअप है? मानक छवि प्रारूप और आकार क्या है?

html images favicon

8

सभी ब्राउज़रों में काम करने के लिए, .icoपसंद किया जाता है, आकार के लिए, 32x32 सबसे व्यापक रूप से उपयोग किया जाता है, 16x16 भी काम करता है (यह अधिकांश स्थानों में ब्राउज़र में उपयोग किया जाने वाला वास्तविक आकार है)।

आपके प्रश्न में भी नहीं, वे 8 या 24 बिट रंग की गहराई होनी चाहिए।

यह ध्यान देने योग्य हो सकता है, अगर आप iWhatever उपयोगकर्ताओं पर अपनी साइट को बुकमार्क करने की योजना बनाते हैं, तो <link>यह छवि के लिए एक अलग है , उदाहरण के लिए StackOverflow's:

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

जो है:
एसओ टच आइकन

— निक क्रेवर
स्रोत

6

आप किसी चित्र को आयात करने के लिए http://www.favicon.cc/ जैसे उपकरण का उपयोग कर सकते हैं और इसे फ़ेविकॉन में बदल सकते हैं, या बस इसे खरोंच से बना सकते हैं।

उसके बाद, यदि आप अपनी फ़ाइल को नाम देते हैं favicon.icoऔर इसे अपनी वेबसाइट के मूल में डालते हैं, तो अधिकांश वेब-ब्राउज़र इसे स्वचालित रूप से प्राप्त करते हैं।

लेकिन आप इसे स्पष्ट रूप से अपनी HTML फ़ाइलों में इस तरह घोषित कर सकते हैं:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

की तुलना में अन्य प्रारूप का उपयोग करने के फायदों के साथ ico, विभिन्‍न पृष्ठों पर विभिन्‍न फ़ेविकॉन का उपयोग करें, अपने फ़ेविकॉन को किसी अन्‍य स्‍थान पर रखें, अन्‍य नाम का उपयोग करें faviconआदि।

— पास्कल कय
स्रोत

4

http://en.wikipedia.org/wiki/Favicon

— मक्सिम वि।
स्रोत

2

IE के लिए पूर्ण डोमेन http पथ के साथ मार्कअप और दस्तावेज़ फ़ोल्डर में फ़ेविकॉन रखें:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

मानक छवि प्रारूप:

.ico
16 x 16 पिक्सेल

— मार्को डेमायो
स्रोत

1

विभिन्न उपकरणों, ब्राउज़रों और ओएस के लिए आप विभिन्न आइकन का उपयोग कर सकते हैं। उदाहरण के लिए नीचे एक सूची है जो आपको प्रेरित कर सकती है। चीजों को प्रगति के रूप में सूची को सही / संपादित करें।

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

— dankilev
स्रोत

0

आपको अब लिंक की आवश्यकता नहीं है, लेकिन यह उपयोगी है। इसके बजाय, जब तक आप अपने रूट में favicon.ico (और यह एक ico) नाम की फ़ाइल छोड़ते हैं, तब तक इसे फ़ेविकॉन के रूप में उपयोग किया जाएगा।

— dkuntz2
स्रोत

0

मुझे GIMP के साथ अपनी .ico फ़ाइल बनाने में थोड़ी परेशानी हुई, लेकिन यह पोस्ट विस्तृत निर्देश देती है। यह अनुक्रमणिका रंग तालिका में परिवर्तित करने के लिए सबसे पहले GIF प्रारूप के रूप में सहेजा जा रहा है, और फिर इसे ICO प्रारूप में रूपांतरित करें।

— डॉन किर्किबी
स्रोत