अब तक, मैं इस तरह से अपने सिर में एप्पल टच आइकन के लिए लाइन शामिल कर रहा हूं:
<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">
हालांकि, क्यू एंड ए में "ऐप्पल-टच-आइकन के लिए सही पिक्सेल आयाम क्या हैं?" यह स्वीकार किए गए उत्तर में कहा गया है कि अब Apple के दिशानिर्देशों के अनुसार तीन छवियों की आवश्यकता है।
तो कोड के हेड सेक्शन में इन्हें डालने के बारे में कोई कैसे जानेगा?
जवाबों:
न्यूनतम समाधान - अनुशंसित
एक सामान्य अभ्यास एक एकल 180x180 आइकन बनाना है, जो उच्चतम अपेक्षित रिज़ॉल्यूशन है, और आईओएस डिवाइसों को आवश्यकतानुसार नीचे ले जाने दें। इसके साथ घोषित किया जाता है:
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
अत्यधिक समाधान - अनुशंसित नहीं
Apple चश्मा iOS7 के लिए नए आकार निर्दिष्ट करता है:
इसके अलावा, पहले से लगाए गए आइकनों को हटा दिया गया है।
परिणामस्वरूप, दोनों नए उपकरणों (iOS7 चलाने) और पुराने (iOS6 और पूर्व) का समर्थन करने के लिए, सामान्य कोड है:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
इसके अलावा, आपको एक 180x180 चित्र बनाना चाहिए , जिसका नाम Apple-touch-icon.png है ।
ध्यान दें कि iOS URL की तरह दिखता है /apple-touch-icon-76x76.png, अगर उसे HTML कोड में दिलचस्प सामग्री नहीं मिलती है (थोड़ा सा जैसा IE के साथ कर रहा है /favicon.ico)। इसलिए यह जरूरी है कि फ़ाइल के नाम वे ऊपर हों। यह भी विचार करना महत्वपूर्ण है कि एंड्रॉइड / क्रोम भी इन चित्रों का उपयोग कर रहा है ।
आप जानना चाहते होंगे कि यह फ़ेविकॉन जनरेटर एक ही बार में इन सभी चित्रों को बना सकता है। पूर्ण प्रकटीकरण: मैं इस साइट का लेखक हूं।
<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />काफी है। और यहां तक कि अगर आप अलग-अलग आकार के चित्र बनाते हैं, तो जहां तक मैं आपको बता सकता हूं कि आप सभी ऐप्पल-टच-आइकन लिंक को हटा सकते हैं और आईओएस खुद ही फाइलों की तलाश करेंगे, जो कि पसंदीदा आकार (जैसे ऐप्पल-टच-आइकन-180x180) से शुरू होता है। png) और यदि कोई अन्य फाइल नहीं मिली है तो Apple-touch-icon.png का उपयोग करें।
apple-touch-icon)।
यहाँ तुम जाओ, आशा है कि यह मदद करता है।
यदि आप चाहते हैं कि Apple आपके लिए एस्थेटिक बिट करे (ग्लॉस जोड़ें) तो आप इन <head>टैग्स में डाल देंगे :
<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />
यदि आप छवि को पूर्वनिर्मित करना चाहते हैं , ताकि Apple इसे बिना चमक के प्रदर्शित करे, तो आप ऐसा करेंगे:
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
आपको एक से अधिक शामिल करना, iOS डिवाइस सही आकार की खोज करेगा और स्वचालित रूप से उस छवि का उपयोग करेगा। जैसा कि आप उदाहरण में छवियों के नाम से देख सकते हैं, रेटिना डिस्प्ले वाले iPad को एक आइकन की आवश्यकता होती है जो 144x144px, iPhone 4 / 4S / 5 के लिए एक आइकन की आवश्यकता होती है जो 114x114px, मूल iPad (और iPad 2, के रूप में) स्क्रीन रिज़ॉल्यूशन अलग नहीं है) एक आइकन की आवश्यकता है जो 72x72px है, और मूल iPhone को आकार विनिर्देश की आवश्यकता नहीं है, लेकिन आपके संदर्भ के लिए यह 57x57px है।
चूंकि इनमें से कुछ उत्तर पहले से ही पुराने हैं, इसलिए मैं सभी चित्रों और मार्कअप को उत्पन्न करने के लिए http://realfavicongenerator.net/ का उपयोग करने की सलाह देता हूं - मैं हर बार एक युगल यूरो का दान करता हूं जब मैं इस उम्मीद में उपयोग करता हूं कि यह उन्हें रखने में सक्षम बनाता है। IOS, Android और Windows पर वर्तमान में मान्य के रूप में आज तक, इसलिए मुझे नहीं करना है।
2018 के अनुसार, Apple डेवलपर्स वेबसाइट iOS उपकरणों के लिए निम्नलिखित की सिफारिश करती है:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="/launch.png">
<meta name="apple-mobile-web-app-title" content="AppTitle">
ऐप शीर्षक आपकी वेबसाइट के शीर्षक को बदल देगा। आमतौर पर, आप ऐसा चाहते हैं। स्टार्टअप छवि वह है जो ऐप लॉन्च करते समय दिखाई देगी।
वेब क्लिप के लिए एक वेबपेज आइकन निर्दिष्ट करना
आप चाहते हैं कि उपयोगकर्ता आपके वेब एप्लिकेशन या वेबपेज लिंक को होम स्क्रीन पर जोड़ने में सक्षम हों। एक आइकन द्वारा दर्शाए गए इन लिंक को वेब क्लिप्स कहा जाता है। IOS पर अपने वेब एप्लिकेशन या वेबपेज का प्रतिनिधित्व करने के लिए एक आइकन निर्दिष्ट करने के लिए इन सरल चरणों का पालन करें।
संपूर्ण वेबसाइट के लिए एक आइकन निर्दिष्ट करने के लिए (वेबसाइट पर हर पृष्ठ), ऐप्पल-टच-आइकन.पिंग नामक रूट दस्तावेज़ फ़ोल्डर में पीएनजी प्रारूप में एक आइकन फ़ाइल रखें।
किसी एकल वेबपेज के लिए एक आइकन निर्दिष्ट करने के लिए या वेबपेज-विशिष्ट आइकन के साथ वेबसाइट आइकन को बदलने के लिए, वेबपेज के लिए एक लिंक तत्व जोड़ें, जैसे:
<link rel="apple-touch-icon" href="/custom_icon.png">
उपरोक्त उदाहरण में, अपने आइकन फ़ाइल नाम के साथ custom_icon.png बदलें। विभिन्न डिवाइस रिज़ॉल्यूशन के लिए कई आइकन निर्दिष्ट करने के लिए- उदाहरण के लिए, iPhone और iPad दोनों उपकरणों का समर्थन करें - प्रत्येक लिंक तत्व में निम्नानुसार एक आकार विशेषता जोड़ें:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
डिवाइस के लिए सबसे उपयुक्त आकार वाला आइकन उपयोग किया जाता है। यदि कोई आकार विशेषता सेट नहीं है, तो तत्व का आकार 60 x 60 तक डिफॉल्ट करता है। यदि कोई आइकन नहीं है जो डिवाइस के लिए अनुशंसित आकार से मेल खाता है, तो अनुशंसित आकार से बड़ा सबसे छोटा आइकन उपयोग किया जाता है। यदि अनुशंसित आकार से बड़ा कोई आइकन नहीं हैं, तो सबसे बड़े आइकन का उपयोग किया जाता है।
यदि कोई आइकन लिंक तत्व का उपयोग करके निर्दिष्ट नहीं किया जाता है, तो वेबसाइट रूट डायरेक्टरी को ऐप्पल-टच-आइकन ... उपसर्ग के साथ आइकन के लिए खोजा जाता है। उदाहरण के लिए, यदि डिवाइस के लिए उपयुक्त आइकन का आकार 60 x 60 है, तो सिस्टम निम्न क्रम में फ़ाइल नाम की खोज करता है:
apple-touch-icon-76x76.png
apple-touch-icon.png
वेबपेज आइकन मेट्रिक्स के लिए चिह्न और छवि आकार देखें।
नोट : IOS 7 पर सफारी माउस के प्रभाव को नहीं जोड़ता है। Safari के पुराने संस्करणों में -precomposed.png प्रत्यय के साथ नामित आइकन फ़ाइलों के लिए प्रभाव नहीं जोड़ा जाएगा। पहले चरण देखें: आईट्यून्स में अपने ऐप को पहचानना विवरण के लिए कनेक्ट करें।
स्रोत: Apple टच आइकन चश्मा
मैंने कभी भी कोई सेब चश्मा नहीं पढ़ा है, मुझे मानना होगा, लेकिन मेरी साइट पर लॉग के अनुसार, इन छवियों को रूट में आवश्यक है:
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png
मेरे पुल-अनुरोध से https://github.com/h5bp/mobile-boilerplate (iPhone 6 आइकन के साथ):
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!--
Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
आप लोकप्रिय आइकनों के लिए सभी आकारों और रंगों को उत्पन्न करने के लिए omg-img का उपयोग कर सकते हैं । उदाहरण के लिए:
<link rel="apple-touch-icon" sizes="152x152"
href="https://img.icons8.com/color/152x152/anonymous-mask.png">
यह टैग iOS उपकरणों के लिए अगली छवि देता है:
<link>यदि ग्राहक के कैश में नहीं हैं तो क्या प्रत्येक टैग में सभी फाइलें डाउनलोड की गई हैं? भले ही पृष्ठ का अनुरोध किया गया हो (फोन, टैबलेट, पीसी, विंडोज़, एंड्रॉइड ...)? मैं प्रदर्शन के निहितार्थ के बारे में थोड़ा चिंतित हूँ ...