IPad और iPhone के लिए Apple-touch-icon.png किस आकार का होना चाहिए?

Question

क्या Apple टच आइकन 60x60 से अधिक समर्थित हैं, और यदि हां, तो मुझे iPad और iPhone के लिए किन आयामों का उपयोग करना चाहिए?

Comments

के संभावित डुप्लिकेट क्या एक सेब के स्पर्श आइकन के लिए सही पिक्सेल आयाम कर रहे हैं?

— जॉन

डेवलपर.

— apple.com/library/ios/documentation/AppleApplications/…

सर्वोत्तम उत्तर के लिए, Apple वेबसाइट पर एक नज़र डालें: Apple डेवलपर

— Ruub

मुझे यह उपकरण आपके पेज में शामिल करने के लिए सभी समर्थित आकारों और मार्कअप के साथ आइकन बनाने के लिए मिला। iconifier.net

— agarcian

Answer 1

दिसंबर 2019 की अपडेट की गई सूची, iOS13 IOS 180x180 px के लिए एक आइकन और Android 192x192 px के लिए एक (site.webmanifest में घोषित)।

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

#### site.webmanifest
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "display": "standalone"
}

पदावनत सूची अक्टूबर 2017, iOS11

रेटिना के साथ और बिना iPhone और iPad के लिए सूची

<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

अपडेट 2017 अक्टूबर 2017 iOS 11: iOS 11 की जाँच, iPhone X और iPhone 8 पेश किए गए

अद्यतन नवंबर 2016 iOS 10: नए iOS संस्करण iPhone 7 और iPhone 7plus को पेश किया गया, उनके पास iPhone 6s और iPhone 7plus के समान ही डिस्प्ले रिज़ॉल्यूशन, डीपीआई, इत्यादि हैं, अब तक अपडेट 2015 का सम्मान नहीं मिला।

मध्य 2016 एंड्रॉइड अपडेट करें: एंड्रॉइड डिवाइस को सूची में जोड़ें क्योंकि ऐप्पल-टच लिंक Google द्वारा पदावनत के रूप में चिह्नित हैं और उनके उपकरणों के लिए कभी भी समर्थित नहीं होंगे।

<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

अपडेट 2015 आईओएस 9: आईओएस 9 और आईपैड प्रो के लिए

<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">

नए iPhones (6s और 6s Plus) iPhone (6 और 6 Plus) के समान आकार का उपयोग कर रहे हैं, नया iPad pro 167x167 px आकार की छवि का उपयोग करता है, अन्य संकल्प अभी भी समान हैं।

अद्यतन 2014 iOS 8:

IOS 8 और iPhone 6 प्लस के लिए

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

Iphone 6 में iPhone 4 के रूप में 120 x 120 px छवि का उपयोग किया गया है और बाकी iOS 7 के लिए समान है

2013 iOS7 अपडेट करें:

IOS 7 के लिए अनुशंसित संकल्प बदल गए:

• iPhone x के लिए 114 x 114 px से 120 x 120 px तक
• आईपैड रेटिना के लिए 144 x 144 पीएक्स से 152 एक्स 152 पीएक्स तक

अन्य संकल्प अभी भी वही हैं

• 57 x 57 px डिफ़ॉल्ट
• बिना रेटिना के आईपैड के लिए 76 x 76 पीएक्स

स्रोत: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Comments

काश, वे सिर्फ एसवीजी का समर्थन करते और इस बकवास के साथ किया जाता। हालाँकि, उत्तर के लिए धन्यवाद!

— स्टीवन वचोन

अद्यतन प्यार करता हूँ ... इस उत्तर को प्रासंगिक बनाता है!

— क्रिस एलिन्सन

यह ध्यान देने योग्य है कि लोकप्रिय और युद्ध-परीक्षण वाले एचटीएमएल 5 बॉयलरप्लेट रेपो सिर्फ एक कैच-ऑल आइकन <link rel="apple-touch-icon" href="icon.png"> github.com/h5bp/html5-boilerplate/blob/master/dist/…

— jacknnr

एंड्रॉइड डिवाइस का समर्थन करने के लिए आधुनिक दृष्टिकोण एक मैनिफ़ेस्ट फ़ाइल का उपयोग करना है, और वहां अपना आइकन (एस) निर्दिष्ट करना है: Developers.google.com/web/fundamentals/app-install-banners - यह दृष्टिकोण भी HTML5 बॉयलरप्लेट द्वारा उपयोग किया जाता है रेपो: github.com/h5bp/html5-boilerplate/blob/master/dist/…

— jackocnr

इसका परीक्षण किया। IPhone Xs पर प्रतीक Github आइकन के बगल में थोड़े धुंधले लगते हैं। : /

— kaiserkiwi

Answer 2

इन आकारों का उपयोग करें 57x57, 72x72, 114x114, 144x144 फिर अपने दस्तावेज़ के प्रमुख में करें:

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

   

यह सभी सेब उपकरणों पर अच्छा लगेगा। ;)

Comments

सेब से सहायक दस्तावेज: developer.apple.com/library/safari/#documentation/…

— जिम ज्यूर्ट्स

आकार विशेषता मान्य HTML हालांकि नहीं है!

पुराने iOS डिवाइस sizesविशेषता को नहीं समझते हैं और इसलिए जो भी अंतिम हो उसका उपयोग करें। इसलिए <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />अंतिम होना चाहिए। इसके अलावा, जैसा कि pezillionaire कहते हैं कि आप अब iPad रेटिना के लिए 144x144 पर एक नया आइकन जोड़ सकते हैं।

— अप्पमट्टस

Ios7 के अनुसार सुझाए गए आकार बदल गए हैं: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (रेटिना)

— कोडी Django

@ कोडी और दृष्टिकोण HTML5Boilerplate अब ले रहा है केवल 152x152 आइकन का उपयोग करें और इसे कॉल करें apple-touch-icon-precomposed.png, और अन्य iDevices को आवश्यकतानुसार आकार दें।

— ब्लेज़ेमॉन्गर

Answer 3

IPad (तीसरी पीढ़ी) के साथ अब चार आइकन आकार 57x57, 72x72, 114x114, 144x144 हैं।

क्योंकि रेटिना आइकन मानक आइकनों के आकार से दोगुना होते हैं, जिन्हें हमें वास्तव में केवल 2 आइकन बनाने की आवश्यकता होती है : 114 x 114 और 144 x 144। रेटिना के आकार के आइकॉन को इसी मानक आइकन पर सेट करके आईओएस तदनुसार उन्हें स्केल करेगा।

<!-- Standard iPhone --> 
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone --> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad --> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad --> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

Comments

मुझे यह तरीका सबसे अच्छा लगता है।

— कालेब जारेस

इस विधि में एक सुंदर सादगी है।

— पॉलस्किनर

तो हम 2 केवल चित्र बनाते हैं और डिवाइस को 2x से कम करने की अनुमति देते हैं। प्यारा।

— सुपरल्यूमिनरी

Ios7 के अनुसार अनुशंसित आकार बदल गए हैं: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (रेटिना)

— कोडी

@ कोडी और दृष्टिकोण HTML5Boilerplate अब ले रहा है केवल 152x152 आइकन का उपयोग करें और इसे कॉल करें apple-touch-icon-precomposed.png, और अन्य iDevices को आवश्यकतानुसार आकार दें।

— ब्लेज़ेमॉन्गर

Answer 4

Apple की साइट पर आइकन 152x152 पिक्सेल है।
http://www.apple.com/apple-touch-icon.png

उम्मीद है कि यह आपके सवाल का जवाब देता है।

Comments

यह। या 144x144 (अपेक्षित आईपैड रेटिना रेस)। भविष्य के लिए थोड़ा आगे की योजना बनाते समय सभी कम आकार के iPhone / iPad के आकार को कम करके देखते हैं।

— DO:४

अक्टूबर 2013 तक, अब यह 152x152 है और विभिन्न उपकरणों के लिए परिवर्तित नहीं होता है (मेरे लैपटॉप और iphone4 के बीच वैसे भी नहीं)

— विक विक

Answer 5

TL; DR: 180 x 180 px @ 150 ppi पर एक PNG आइकन का उपयोग करें और फिर इसे इस तरह लिंक करें:

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

दृष्टिकोण पर विवरण

2020-04 तक, Apple से विहित प्रतिक्रिया आईओएस पर उनके प्रलेखन में परिलक्षित होती है ।

आधिकारिक तौर पर, युक्ति कहती है:

• iPhone 180px × 180px (60pt × 60pt @ 3x)
• iPhone 120px × 120px (60pt × 60pt @ 2x)
• iPad Pro 167px × 167px (83.5pt × 83.5pt @ 2x)
• iPad, iPad मिनी 152px × 152px (76pt × 76pt @ 2x)

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

कम ट्रैफ़िक साइटों के लिए, मैं आमतौर पर 180 x 180 px @ 150 पीपीआई पर एक पीएनजी आइकन का उपयोग करता हूं और सभी उपकरणों पर बहुत अच्छे परिणाम प्राप्त करता हूं , यहां तक ​​कि प्लस आकार वाले भी।

Answer 6

मैं कुछ समय से iOS ऐप विकसित कर रहा हूं और इसे डिजाइन कर रहा हूं और यह सबसे अच्छा iOS डिजाइन है।

मज़े करो :)!

अपडेट: iOS 8+ के लिए, और नए डिवाइस (iPhone 6, 6 Plus, iPad Air) इस अपडेटेड लिंक को देखें ।

मेटा अपडेट: Iphone 6s / 6s Plus में क्रमशः iPhone 6/6 प्लस के समान रिज़ॉल्यूशन हैं

यह लेख के नए संस्करण से एक छवि है:

Answer 7

Apple की साइट पर संबंधित प्रलेखन, वेब क्लिप के लिए एक वेबपेज आइकन निर्दिष्ट करना ।

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

उदाहरण के लिए, यदि डिवाइस के लिए उपयुक्त आइकन का आकार 57 x 57 है, तो सिस्टम निम्न क्रम में फ़ाइल नाम की खोज करता है:

• सेब के स्पर्श आइकन-57x57-precomposed.png
• सेब के स्पर्श आइकन-57x57.png
• सेब के स्पर्श आइकन-precomposed.png
• सेब के स्पर्श icon.png

Comments

हां, लेकिन यह प्रश्न iphone4 और ipad के लिए नए (बड़े) आइकन का संबंध है।

— चेरोविम

हालांकि हेडर में कुछ भी निर्दिष्ट करना आवश्यक नहीं है, फिर भी यह एक अच्छा अभ्यास है। यदि आप उदाहरण के लिए रेटिना iPad के लिए 144x144 संस्करण को याद करते हैं और पिक्सेल आयाम के बिना कोई आइकन नहीं है, तो मोबाइल सफारी सिर्फ एक साइट के पूर्वावलोकन को प्रदर्शित करने के लिए वापस आ जाएगी, हालांकि यह एक गैर-इष्टतम, लेकिन अभी भी बेहतर, छोटे संस्करण का उपयोग कर सकता है।

— राफेल बुगाजेव्स्की

यह हेडर में निर्दिष्ट नहीं करने के लिए एक बहुत बुरा विचार है क्योंकि अन्य प्लेटफ़ॉर्म भी उनका उपयोग करेंगे (एंड्रॉइड,

— क्रोमओएस

Answer 8

हाँ। यदि आकार मेल नहीं खाता है, तो सिस्टम इसे फिर से खोलेगा । लेकिन आइकन के 2 संस्करण बनाना बेहतर है।

• iPad - 72x72।
• iPhone (≥4) - 114x114।
• iPhone .3GS - 57x57 - यदि संभव हो तो।

आप अपने सर्वर पर उपयोगकर्ता एजेंट द्वारा iPad और iPhone को अलग कर सकते हैं । यदि आप सर्वर पर स्क्रिप्ट लिखना नहीं चाहते हैं, तो आप जावास्क्रिप्ट के साथ आइकन भी बदल सकते हैं

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

if (... iPad test ...) {
  $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}

यह काम करता है क्योंकि आइकन केवल तभी प्रदर्शित होता है जब आप वेब क्लिप जोड़ते हैं।

(अभी तक जावास्क्रिप्ट में iPhone in3GS से iPhone no4 को अलग करने का कोई सार्वजनिक तरीका नहीं है।)

Comments

IPhone 4 का रिज़ॉल्यूशन जाहिर तौर पर iPhone 3 से दो के एक कारक द्वारा बढ़ाया जाता है, इसलिए 114x114 संभवतः उसके लिए आइकन आकार के लिए एक अच्छा विकल्प होगा।

— JAB

@JAB: आइकॉन में बॉर्डर जोड़े गए हैं इसलिए iPhone is3GS पर वास्तविक आइकन का आकार 59x60 है। अगर ऐसा हो तो 114x114 थोड़ा बंद हो सकता है।

— kennytm

क्या iPhone 4+ की सीमाओं को समान राशि, रिज़ॉल्यूशन-वार (ताकि आकार-वार वे एक ही चौड़ाई के प्रतीत हों) द्वारा स्केल नहीं किया जाता है?

— JAB

@ जेएबी: यह होना चाहिए। मैंने जाँच नहीं की।

— kennytm

आपके सभी विचारों / सलाह के लिए धन्यवाद। यदि मैं 3 संस्करण बनाता हूं तो मैं प्रासंगिक आकार के साथ प्रत्येक डिवाइस को कैसे लक्षित करूं? जब तक मैं कुछ याद नहीं कर रहा हूं और पीएनजी एक कंटेनर प्रारूप है जिसे मैं विभिन्न आकारों में डाल सकता हूं?

— हैरी

Answer 9

हाँ, 60x60 से बड़े समर्थित हैं। सादगी के लिए, इन 4 आकारों के आइकन बनाएं:

1) 60x60  <= default
2) 76x76
3) 120x120
4) 152x152

अब, उन्हें अपने HTML में लिंक के रूप में जोड़ना बेहतर होगा:

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

आप ऊपर दिए गए 4 लिंक को घोषित नहीं करने का चयन कर सकते हैं, लेकिन सिर्फ एक लिंक की घोषणा कर सकते हैं, जिस स्थिति में वह सबसे अधिक आकार देता है 152x152या उससे भी अधिक आकार देता है, कहो 196x196। यह हमेशा पुन: उद्देश्य के लिए आकार को नीचे ट्रिम कर देगा। सुनिश्चित करें कि आप उल्लेख करते हैं size।

आप एक भी लिंक घोषित नहीं करने का विकल्प भी चुन सकते हैं। Apple का उल्लेख है कि इस परिदृश्य में, वह सर्वर रूट को पहले आकार में तुरंत उच्चतर apple-touch-icon-<size>.pngरूप से देखेगा कि वह जो आकार चाहता है (नामकरण प्रारूप:) , और यदि वह नहीं मिला है तो यह अगले के लिए दिखेगा default file: apple-touch-icon.png। यह बेहतर है कि आप लिंक (ओं) को परिभाषित करें क्योंकि यह आपके सर्वर से क्वेरी करने वाले ब्राउज़र को कम कर देगा।

आइकन आवश्यकताएं:

- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors

IOS 7 से अधिक पुराने संस्करणों में, यदि आप नहीं चाहते कि यह आपके आइकनों पर प्रभाव जोड़े, तो बस -precomposed.pngफ़ाइल नाम में प्रत्यय जोड़ें । (iOS 7 इसके बिना भी प्रभाव नहीं जोड़ता है)।

Answer 10

मुझे लगता है कि यह सवाल वेब आइकन के बारे में है। मैंने 512x512 पर एक आइकन देने की कोशिश की है, और iPhone 4 सिम्युलेटर पर यह बहुत अच्छा लग रहा है (पूर्वावलोकन में), हालांकि, जब होम-स्क्रीन पर जोड़ा जाता है तो यह बुरी तरह से पिक्सेलित होता है।

अच्छी तरफ, अगर आप iPad पर एक बड़े आइकन का उपयोग करते हैं (अभी भी मेरे 512x512 परीक्षण के साथ) तो यह iPad पर बेहतर गुणवत्ता में सामने आता है। उम्मीद है कि iPhone 4 रेंडरिंग एक बग है।

मैंने रडार पर इसके बारे में एक बग खोला है।

संपादित करें:

मैं वर्तमान में एक 114x114 आइकन का उपयोग कर रहा हूँ उम्मीद है कि यह iPhone 4 पर अच्छा लगेगा जब यह रिलीज़ होगा। अगर iPhone 4 में अभी भी एक बग है, जब वह बाहर निकलता है, तो मैं iPad (कुरकुरा और 72x72 पर कोई आकार नहीं) के लिए आइकन को अनुकूलित करने जा रहा हूं, और फिर पुराने iPhones के लिए इसे नीचे पैमाने पर कर दूंगा।

Answer 11

के लिए iPhone और आइपॉड टच , माउस बनाने कि उपाय:

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

के लिए आईपैड , कि उपायों एक आइकन बना:

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)