प्रदान किए गए उत्तर (इस पोस्ट के समय) लिंक केवल उत्तर हैं, इसलिए मैंने सोचा कि मैं लिंक को एक उत्तर में प्रस्तुत करूंगा और जो मैं उपयोग करूंगा।
जब क्रॉस ब्राउज़र फेवीकोन्स (टच आइकन सहित) बनाने के लिए काम कर रहे हैं, तो विचार करने के लिए कई चीजें हैं।
पहला (बेशक) इंटरनेट एक्सप्लोरर है। IE 11 संस्करण तक PNG फ़ेविकॉन का समर्थन नहीं करता है। इसलिए हमारी पहली पंक्ति IE 9 और नीचे में फ़ेविकॉन्स के लिए एक सशर्त टिप्पणी है:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
आइकन के उपयोग को कवर करने के लिए इसे 32x32 पिक्सेल पर बनाएं। rel="shortcut icon"IE के लिए ध्यान दें कि आइकन को पहचानने के लिए उस शब्द की आवश्यकता है shortcutजो मानक नहीं है। इसके अलावा, हम .icoएक IE सशर्त टिप्पणी में फ़ेविकॉन लपेटते हैं क्योंकि क्रोम और सफारी .icoफ़ाइल का उपयोग करेगा यदि यह मौजूद है, अन्य विकल्पों के उपलब्ध होने के बावजूद, वह नहीं जो हम चाहते हैं।
उपरोक्त IE के लिए IE को कवर करता है 9. IE 11 PNG फेवीकोन्स को स्वीकार करता है, हालांकि, IE 10 नहीं करता है। इसके अलावा IE 10 सशर्त टिप्पणियों को नहीं पढ़ता है इस प्रकार IE 10 एक फ़ेविकॉन नहीं दिखाएगा। IE 11 और एज उपलब्ध होने के साथ मैं IE 10 को व्यापक उपयोग में नहीं देखता, इसलिए मैं इस ब्राउज़र को अनदेखा करता हूं।
बाकी ब्राउज़रों के लिए हम फ़ेविकॉन का हवाला देते हुए मानक तरीके का उपयोग करने जा रहे हैं:
<link rel="icon" href="path/to/favicon.png">
यह आइकन सभी डिवाइसों को कवर करने के लिए आकार में 196x196 पिक्सेल होना चाहिए जो इस आइकन का उपयोग कर सकते हैं।
मोबाइल उपकरणों पर टच आइकन कवर करने के लिए हम एक टच आइकन का हवाला देते हुए Apple के मालिकाना तरीके का उपयोग करने जा रहे हैं:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
का उपयोग करते हुए rel="apple-touch-icon-precomposed"जब iOS पर बुकमार्क किए गए चिंतनशील चमक लागू नहीं होगा। IOS के लिए चमक का उपयोग लागू करें rel="apple-touch-icon"। यह आइकन 180x180 पिक्सल के आकार का होना चाहिए क्योंकि नवीनतम आईफ़ोन और आईपैड के लिए ऐप्पल द्वारा वर्तमान आकार की सिफारिश की गई है। मैंने पढ़ा है ब्लैकबेरी भी उपयोग करेगा rel="apple-touch-icon-precomposed"।
नोट के रूप में: Android राज्यों के लिए Chrome:
ऐप्पल-टच- * पदावनत हैं, और थोड़े समय के लिए ही समर्थित होंगे। (क्रोम के m31 के लिए बीटा के रूप में लिखा गया है)।
विंडोज 8.1+ पर IE 11+ के लिए कस्टम टाइलें
विंडोज 8.1 पर IE 11+ आपकी साइट के लिए पिन किए गए टाइल बनाने का एक तरीका प्रदान करता है।
Microsoft निम्नलिखित आकार में कुछ टाइल बनाने की सिफारिश करता है:
छोटा: 128 x 128
मध्यम: 270 x 270
वाइड: 558 x 270
बड़ा: 558 x 558
ये पारदर्शी चित्र होने चाहिए क्योंकि हम अगले रंग की पृष्ठभूमि को परिभाषित करेंगे।
एक बार ये चित्र बन जाने के बाद आपको एक xml फ़ाइल बनानी चाहिए जिसे browserconfig.xmlनिम्नलिखित कोड के साथ बुलाया गया है:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#009900</TileColor>
</tile>
</msapplication>
</browserconfig>
इस xml फ़ाइल को अपनी साइट के मूल में सहेजें। जब कोई साइट पिन की जाती है तो IE इस फाइल की तलाश करेगा। यदि आप xml फ़ाइल को कुछ अलग नाम देना चाहते हैं या इसे किसी अन्य स्थान पर रखना चाहते हैं, तो इस मेटा टैग को इसमें जोड़ें head:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
IE 11+ कस्टम टाइल्स पर अतिरिक्त जानकारी के लिए और XML फ़ाइल का उपयोग करके Microsoft की वेबसाइट पर जाएँ ।
यह सब एक साथ डालें:
यह सब एक साथ रखने के लिए उपरोक्त कोड इस तरह दिखेगा:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
विंडोज फोन लाइव टाइलें
यदि कोई उपयोगकर्ता विंडोज फोन का उपयोग कर रहा है तो वे अपने फोन के स्टार्ट स्क्रीन पर एक वेबसाइट डाल सकते हैं। दुर्भाग्य से, जब वे ऐसा करते हैं तो यह आपके फोन का स्क्रीनशॉट प्रदर्शित करता है, फ़ेविकॉन नहीं (ऊपर निर्दिष्ट एमएस विशिष्ट कोड भी नहीं)। अपनी वेबसाइट के लिए विंडोज फोन उपयोगकर्ताओं के लिए "लाइव टाइल" बनाने के लिए निम्नलिखित कोड का उपयोग करना चाहिए:
यहाँ Microsoft से विस्तृत निर्देश दिए गए हैं, लेकिन यहाँ एक सारांश है:
चरण 1
अपनी वेबसाइट के लिए एक वर्गाकार चित्र बनाएँ, उच्च-रिज़ॉल्यूशन स्क्रीन का समर्थन करने के लिए इसे 768x768 पिक्सेल आकार में बनाएँ।
चरण 2
इस छवि का एक छिपा हुआ ओवरले जोड़ें। यहाँ Microsoft से उदाहरण कोड है:
<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
<img src="customtile.png" width="320" height="320" />
<div style='margin-top: 40px'>
Add text/graphic asking user to pin to start using the menu...
</div>
</div>
चरण 3
फिर आप लिंक शुरू करने के लिए एक पिन जोड़ने के लिए thew निम्नलिखित पंक्ति जोड़ सकते हैं:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft अनुशंसा करता है कि आप विंडोज़ फोन का पता लगाते हैं और केवल उन्हीं उपयोगकर्ताओं को लिंक दिखाते हैं क्योंकि यह अन्य उपयोगकर्ताओं के लिए काम नहीं करेगा।
चरण 4
अगले आप ओवरले दृश्यता को टॉगल करने के लिए कुछ JS जोड़ते हैं
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
आकार पर ध्यान दें
मैं एक आकार का उपयोग कर रहा हूं क्योंकि प्रत्येक ब्राउज़र आवश्यक रूप से छवि को स्केल करेगा। यदि मैं कम बैंडविड्थ वाले लोगों के लिए वांछित कई आकारों को निर्दिष्ट करने के लिए अधिक HTML जोड़ सकता हूं, लेकिन मैं पहले से ही PNG फ़ाइलों को टिनीपीएनजी का उपयोग करके बहुत अधिक संकुचित कर रहा हूं और मुझे यह अनावश्यक लगता है। इसके अलावा, philippe_b के जवाब के अनुसार क्रोम और फ़ायरफ़ॉक्स में कीड़े होते हैं जो ब्राउज़र को सभी आकारों के आइकन लोड करने का कारण बनाते हैं। एक बड़े आइकन का उपयोग इस वजह से कई छोटे लोगों की तुलना में बेहतर हो सकता है।
आगे की पढाई
अधिक विवरण चाहने वालों के लिए नीचे दिए गए लिंक देखें: