एक सेब-टच-आइकन के लिए सही पिक्सेल आयाम क्या हैं?

मुझे यकीन नहीं है कि सही आकार क्या होना चाहिए।

कई साइटें दोहराने लगती हैं कि सेब-टच-आइकन 57x57 पिक्सल होना चाहिए लेकिन उनके स्रोत के रूप में एक टूटा लिंक उद्धृत करना चाहिए।

Hanselman's and playgroundblues's comments suggest different sizes including 163x163 and 60x60.

ऐप्पल का स्वयं का apple.com आइकन 12 9 x12 9 है!

See my related question: How do I give my web sites an icon for iPhone?

 0
जोड़ा संपादित
विचारों: 73
स्रोत
ro fr bn
संबंधित: मुझे Apple-touch-icon-precomposed.png के लिए त्रुटि क्यों मिल रही है और एक अतिरिक्त अच्छा ऑनलाइन संसाधन प्रतीत होता है : जो भी आप हमेशा स्पर्श आइकन के बारे में जानना चाहते थे (मार्च 2011; माथीस बायेंस द्वारा )
जोड़ा लेखक hakre, स्रोत
developer.apple.com/library/ios/ प्रलेखन / AppleApplicati और ​​जेडडब्ल्यूएनजे; ऑन / & hellip;
जोड़ा लेखक Blazemonger, स्रोत
अब Apple.com का आइकन 152x152 है ...
जोड़ा लेखक Wick, स्रोत

11 उत्तर

ऐप्पल डेवलपर कनेक्शन - वेब ऐप्स देव केंद्र - डिज़ाइनिंग सामग्री के Google कैश से ...

Create a Web Clip Bookmark Icon

iPhone and iPod touch allow a user to save a Web Clip bookmark to your site on their Home Screen.

To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons.

To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.

The bookmark icon dimensions should be 57x57 pixels. If the icon is a different size it will be scaled and cropped to fit.

Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.

0
जोड़ा
स्रोत
आपका जवाब पुराना है। stackoverflow.com/questions/1598/…
जोड़ा लेखक Georg Schölly, स्रोत

NilObject's link led me to the great blog post Catchup on your Icon at makentosh.com

... निश्चित रूप से इस असंगतता के सभी   अंततः निपटाया जाना था,   सही? खैर 2.0 ठीक से इसके साथ निपटाया   फैशन! अंत में 57x57 वास्तव में मतलब था   57x57।

     

... प्रत्येक पिक्सेल ... प्रस्तुत किया गया   पूरी तरह से।

0
जोड़ा
स्रोत

मुझे नहीं लगता कि एक "सही आकार" है। चूंकि आईफोन वास्तव में ओएसएक्स चला रहा है, आइकन रेंडरिंग सिस्टम बहुत मजबूत है। जब तक आप इसे सही पहलू अनुपात के साथ एक उच्च-गुणवत्ता वाली छवि देते हैं और कम से कम एक वास्तविक रिज़ॉल्यूशन के रूप में एक संकल्प होगा, तो ओएस बहुत साफ हो जाएगा। मेरी साइट 158x158 का उपयोग करती है और आइकन आईफोन स्क्रीन पर पिक्सेल-परिपूर्ण दिखता है।

0
जोड़ा
स्रोत

आधिकारिक आकार 57x57 है। मैं इस तथ्य के कारण सटीक आकार का उपयोग करने की अनुशंसा करता हूं कि लोड होने पर कम स्मृति लेती है (जब तक कि ऐप्पल स्केल किए गए प्रतिनिधित्व को कैश न करे)। इसके साथ ही, रेक्स सही है </ए> कि कोई वर्ग आकार काम करेगा

0
जोड़ा
स्रोत
सिवाय इसके कि यह आईपैड और आईफोन 4 एस पर धुंधला लग सकता है ...
जोड़ा लेखक Simon East, स्रोत

मैं उन आकारों के लिए एक स्रोत उद्धृत नहीं कर सकता क्योंकि आधिकारिक संदर्भ लॉक और एडीसी की कुंजी के नीचे है।

हालांकि, गैर-एनडीए साइटों में से कई में आइकन बनाने के तरीके पर ट्यूटोरियल हैं। उदाहरण के लिए यहां:

0
जोड़ा
स्रोत

अपनी सफारी वेब सामग्री मार्गदर्शिका के हिस्से के रूप में, ऐप्पल में वास्तव में " वेब क्लिप के लिए एक वेबपृष्ठ आइकन निर्दिष्ट करना " (जावास्क्रिप्ट आवश्यक) जिसमें सभी संकल्प और उनके कार्यान्वयन शामिल हैं।

0
जोड़ा
स्रोत

आपको अब सही आकार के लिए परेशान करने की ज़रूरत नहीं है। यदि आपके पास आइकन के आर्टवर्क फ़ाइल (यानी 1024 * 1024 आकार की फ़ाइल) है, तो मैंने यह एप्लिकेशन बनाया है जो आपको प्रदान की गई जानकारी के आधार पर सभी आइकन प्रदान करेगा यहां । यहां से एप्लिकेशन प्राप्त करें, और आईओएस एप्लिकेशन के लिए सभी आवश्यक आइकन बनाने के लिए रीडेमे फ़ाइल में निर्देशों का पालन करें।

0
जोड़ा
स्रोत

अपडेट की गई सूची अक्टूबर 2014, आईओएस 8

रेटिना के साथ और बिना आईफोन और आईपैड की सूची

<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">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">

2014 आईओएस अपडेट करें 8:

आईओएस 8 और आईफोन 6 प्लस के लिए

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

आईफोन 6 उसी 120 x 120 पीएक्स छवि का उपयोग करता है जैसे आईफोन 4 और 5 बाकी आईओएस 7 के समान है

Update 2013 iOS7:

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

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

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

  • 57 x 57 पीएक्स डिफ़ॉल्ट
  • रेटिना के बिना iPads के लिए 76 x 76 px
0
जोड़ा
स्रोत

इस पर निर्भर करता है कि आप कितना विस्तार चाहते हैं, इसे 1: 1 का पहलू अनुपात होना चाहिए (मूल रूप से - इसे वर्ग होना चाहिए)

मैं ऐप्पल के अपने 12 9 * 12 9 के साथ जाऊंगा

0
जोड़ा
स्रोत

ऐसा लगता है कि 3 अगस्त, 2010 को ऐप्पल दिशानिर्देशों में अब "उच्च रिज़ॉल्यूशन" छवियां (आईफोन 4 के लिए) उनके "आवश्यक" आइकन आकारों में शामिल हैं।

ऐसा लगता है कि हमें अब 57x57 और 114x114 छवि दोनों प्रदान करने की आवश्यकता है, साथ ही साथ 640x960 शीर्षक छवि भी प्रदान की जानी चाहिए।

कस्टम आइकन और छवि निर्माण दिशानिर्देश (जावास्क्रिप्ट आवश्यक) जो पूरे दस्तावेज़ का हिस्सा है:

0
जोड़ा
स्रोत
मुझे शीर्षक छवियों को काम करने में कुछ परेशानी थी। यहां एक कामकाजी उदाहरण मिला: gist.github.com/472519 ( अनुभाग)
जोड़ा लेखक Blaise, स्रोत
यह लिंक अब काम नहीं करता है, developer.apple.com/library/ios/documentation/AppleApplicati‌ ons / & hellip; इसके बजाए
जोड़ा लेखक thelem, स्रोत
ध्यान दें कि आईपैड आइकन के लिए निम्न आकारों का उपयोग करते हैं: 72x72 1 और 2 जीन; 3 जी जनरल "रेटिना" के लिए 144x144।
जोड़ा लेखक donut, स्रोत

Apple specs specify new sizes for iOS7:

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

जबकि आईओएस 6 और पहले के लिए पुराने आकार हैं:

  • 57x57
  • 72x72
  • 114x114
  • 144x144

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

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

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

इसके अतिरिक्त, आपको apple-touch-icon.png ।

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

0
जोड़ा
स्रोत