html - वेबसाइटों के लिए ऐप्पल टच आइकन




html5 mobile (6)

2018 तक, ऐप्पल डेवलपर्स वेबसाइट आईओएस उपकरणों के लिए निम्नलिखित की सिफारिश करती है:

  <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">

ऐप शीर्षक आपकी वेबसाइट शीर्षक को प्रतिस्थापित करेगा। आमतौर पर, आप इसे चाहते हैं। स्टार्टअप छवि ऐप लॉन्च होने पर दिखाई देगी।

अब तक, मैं अपने सिर में ऐप्पल टच आइकन के लिए इस लाइन को शामिल कर रहा हूं:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

हालांकि, क्यू एंड ए में "सेब-टच-आइकन के लिए सही पिक्सेल आयाम क्या हैं?" यह स्वीकार किए गए उत्तर में कहा गया है कि ऐप्पल के दिशानिर्देशों के अनुसार अब तीन छवियों की आवश्यकता है।

तो कोड के मुख्य भाग में इन्हें डालने के बारे में कोई कैसे जाएगा?


आप popular आइकन के लिए सभी आकारों और रंगों को उत्पन्न करने के लिए omg-img उपयोग कर सकते हैं। उदाहरण के लिए:

<link rel="apple-touch-icon" sizes="152x152" 
      href="https://img.icons8.com/color/152x152/anonymous-mask.png">

यह टैग आईओएस उपकरणों के लिए अगली छवि देता है:


मेरे पुल-अनुरोध से https://github.com/h5bp/mobile-boilerplate (आईफोन 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">

मैंने कभी भी कोई सेब चश्मा नहीं पढ़ा है, मुझे स्वीकार करना होगा, लेकिन मेरी साइट पर लॉग के अनुसार, इन छवियों को रूट में जरूरी है:

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

आईफोन 7 के लिए ऐप्पल चश्मे नए आकार निर्दिष्ट करते हैं:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

और आईओएस 8 के लिए भी :

  • 180x180

इसके अलावा, precomposed प्रतीक बहिष्कृत कर रहे हैं।

नतीजतन, समर्थन करने के लिए लेकिन नए डिवाइस (आईओएस 7 चलाना) और पुराने (आईओएस 6 और पूर्व), जेनेरिक कोड है:

<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 चित्र का नाम बनाना चाहिए जिसे सेब-टच-आइकन . png नाम दिया गया है

ध्यान दें कि आईओएस /apple-touch-icon-76x76.png जैसे यूआरएल की /apple-touch-icon-76x76.png करता है, अगर उसे एचटीएमएल कोड में दिलचस्प चीजें नहीं मिलती हैं (जैसे आईई /favicon.ico साथ क्या कर रहा है)। इसलिए फ़ाइल नामों को ऊपर रखना महत्वपूर्ण है। यह भी विचार करना महत्वपूर्ण है कि एंड्रॉइड / क्रोम इन तस्वीरों का भी उपयोग कर रहा है

आप जानना चाहेंगे कि यह फेविकॉन जनरेटर इन सभी चित्रों को एक साथ बना सकता है। पूर्ण प्रकटीकरण: मैं इस साइट के लेखक हूं।


वेब क्लिप के लिए एक वेबपृष्ठ आइकन निर्दिष्ट करना

आप चाहते हैं कि उपयोगकर्ता होम स्क्रीन पर अपना वेब एप्लिकेशन या वेबपृष्ठ लिंक जोड़ सकें। इन लिंक, जो आइकन द्वारा दर्शाए जाते हैं, को वेब क्लिप्स कहा जाता है। आईओएस पर अपने वेब एप्लिकेशन या वेबपेज का प्रतिनिधित्व करने के लिए आइकन निर्दिष्ट करने के लिए इन सरल चरणों का पालन करें।

संपूर्ण वेबसाइट (वेबसाइट पर प्रत्येक पृष्ठ) के लिए आइकन निर्दिष्ट करने के लिए, रूट दस्तावेज़ फ़ोल्डर में एक फ़ाइल फ़ाइल को रखें, जिसे सेब-टच-आइकन.png कहा जाता है।

किसी वेबपृष्ठ के लिए आइकन निर्दिष्ट करने या वेबपृष्ठ-विशिष्ट आइकन के साथ वेबसाइट आइकन को प्रतिस्थापित करने के लिए, वेबपृष्ठ पर एक लिंक तत्व जोड़ें, जैसा कि:

<link rel="apple-touch-icon" href="/custom_icon.png">

उपर्युक्त उदाहरण में, custom_icon.png को अपने आइकन फ़ाइल नाम से प्रतिस्थापित करें। विभिन्न डिवाइस संकल्पों के लिए एकाधिक आइकन निर्दिष्ट करने के लिए- उदाहरण के लिए, आईफोन और आईपैड डिवाइस दोनों का समर्थन करें- प्रत्येक लिंक तत्व में एक आकार विशेषता जोड़ें:

<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

वेबपृष्ठ आइकन मेट्रिक्स के लिए आइकन और छवि आकार देखें।

नोट : आईओएस 7 पर सफारी आइकन पर प्रभाव नहीं जोड़ता है। सफारी के पुराने संस्करण -precomposed.png प्रत्यय नामक आइकन फ़ाइलों के लिए प्रभाव नहीं जोड़ेंगे। पहले चरण देखें: विवरण के लिए आईट्यून्स कनेक्ट में अपनी ऐप की पहचान करना।

स्रोत: ऐप्पल टच आइकन चश्मा





apple-touch-icon