আপেল-টাচ-আইকন.পঙ্গা আইপ্যাড এবং আইফোনের জন্য কোন আকারের হওয়া উচিত?

Question

অ্যাপল টাচ আইকনগুলি কি 60x60 এর চেয়ে বেশি সমর্থিত এবং যদি তাই হয় তবে আইপ্যাড এবং আইফোনের জন্য আমার কোন মাত্রা ব্যবহার করা উচিত?

Comments

কোনও অ্যাপল-টাচ-আইকনটির জন্য সঠিক পিক্সেল মাত্রা কীগুলির

— জন

বিকাশকারী

— অ্যাপ্লিকেশন

সেরা উত্তরের জন্য, অ্যাপল ওয়েবসাইটটি একবার দেখুন: অ্যাপল বিকাশকারী

— রুব

আপনার পৃষ্ঠায় অন্তর্ভুক্ত করার জন্য সমস্ত সমর্থিত আকার এবং মার্কআপ সহ আইকনগুলি তৈরি করার জন্য আমি এই সরঞ্জামটি পেয়েছি। iconifier.net

— আগারসিয়ান

Answer 1

আপডেট হওয়া তালিকা ডিসেম্বর 2019, আইওএস 13x আইওএস 180x180 পিক্সের জন্য একটি আইকন এবং অ্যান্ড্রয়েড 192x192 পিক্সের জন্য একটি (সাইট.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, আইওএস 11

আইফোন এবং আইপ্যাডের জন্য রেটিনা সহ এবং ছাড়া তালিকাবদ্ধ করুন

<!-- 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 আইওএস 11: আইওএস 11 পরীক্ষা করা হয়েছে, আইফোন এক্স এবং আইফোন 8 চালু হয়েছে

আপডেট নভেম্বর 2016 আইওএস 10: নতুন আইওএস সংস্করণ আইফোন 7 এবং আইফোন 7 প্লাস চালু হয়েছে, তাদের আইফোন 6 এস এবং আইফোন 7 প্লাস হিসাবে একই ডিসপ্লে রেজোলিউশন, ডিপিআই ইত্যাদি রয়েছে, এখনও অবধি আপডেট 2015 সম্পর্কিত কোনও পরিবর্তন পাওয়া যায় নি

২০১ 2016 সালের মাঝামাঝি অ্যান্ড্রয়েড আপডেট করুন : অ্যাপল-টাচ লিঙ্কগুলিকে গুগল অবচিত হিসাবে চিহ্নিত করা হয়েছে বলে তালিকায় অ্যান্ড্রয়েড ডিভাইসগুলি যুক্ত করুন এবং তাদের ডিভাইসের জন্য যে কোনও সময় সমর্থন করা হবে না

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

নতুন আইফোন (6 এস এবং 6 এস প্লাস) আইফোন (6 এবং 6 প্লাস) হিসাবে একই আকার ব্যবহার করছে, নতুন আইপ্যাড প্রো 167x167 পিক্সেলের আকারের চিত্র ব্যবহার করে, অন্যান্য রেজোলিউশনগুলি এখনও একই।

আপডেট করুন আইওএস 8:

আইওএস 8 এবং আইফোন 6 প্লাসের জন্য

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

আইফোন 6 আইফোন 4 হিসাবে একই 120 x 120 পিক্স্স চিত্রটি ব্যবহার করে এবং বাকীটি আইওএস 7 এর মতোই

আপডেট করুন 2013 iOS7:

আইওএস 7-র জন্য প্রস্তাবিত প্রস্তাবগুলি পরিবর্তন করা হয়েছে:

• আইফোন রেটিনার জন্য 114 x 114 পিক্স থেকে 120 x 120 পিক্সেল
• আইপ্যাড রেটিনার জন্য 144 x 144 পিক্স থেকে 152 x 152 পিক্সেল

অন্যান্য রেজোলিউশন এখনও একইরকম

• 57 x 57 px ডিফল্ট
• আইট্যাডগুলির জন্য রেটিনা ছাড়াই 76 x 76 পিক্সেল

সূত্র: https://developer.apple.com/ios/human-interface-guidlines/icons-and-images/app-icon/

Comments

আমি আশা করি তারা কেবল এসভিজি সমর্থন করে এবং এই বাজে জিনিসটি সম্পন্ন করে। উত্তরের জন্য ধন্যবাদ, তবে!

— স্টিভেন ওয়াচন

আপডেটগুলি পছন্দ করুন ... এই উত্তরটিকে প্রাসঙ্গিক করে তোলে!

— ক্রিস অ্যালিনসন

এটি লক্ষণীয় যে জনপ্রিয় এবং যুদ্ধ-পরীক্ষিত এইচটিএমএল 5 বয়লারপ্লেট রেপো কেবলমাত্র একক ক্যাচ-অল আইকন <link rel="apple-touch-icon" href="icon.png"> github.com/h5bp/html5-boilerplate/blob/master/dist/…

— জ্যাকোকনর

এছাড়াও অ্যান্ড্রয়েড ডিভাইসগুলিকে সমর্থন করার জন্য আধুনিক পদ্ধতিটি হল একটি ম্যানিফেস্ট ফাইল ব্যবহার করা এবং সেখানে আপনার আইকনগুলি নির্দিষ্ট করা: developers.google.com/web/fundamentals/app-install-banners - এই পদ্ধতিরটি এইচটিএমএল 5 বয়লারপ্লেট দ্বারাও ব্যবহৃত হয় রেপো: github.com/h5bp/html5-boilerplate/blob/master/dist/…

— jackocnr

পরীক্ষিত। আইফোন এক্স-এ আইকনগুলি গিথুব আইকনের পাশে ধোঁয়াটে মনে হচ্ছে। : /

— কাইসারকিবি

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

আপেল থেকে ডকুমেন্টেশন সমর্থন করে: বিকাশকারী.অ্যাপল.

— com/library/safari/#docamentation/…

মাপের বৈশিষ্ট্যটি যদিও বৈধ এইচটিএমএল নয়!

পুরানো আইওএস ডিভাইসগুলি sizesবৈশিষ্ট্যটি বুঝতে পারে না এবং তাই যে কোনও মানই শেষ use অতএব <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />শেষ হওয়া উচিত। এছাড়াও, যেমন পেরেজিয়নেয়ার বলেছেন আপনি এখন আইপ্যাড রেটিনার জন্য 144x144 এ একটি নতুন আইকন যুক্ত করতে পারেন।

— অ্যাপমেটাস

আইওএস 7-র হিসাবে প্রস্তাবিত আকারগুলি পরিবর্তিত হয়েছে: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (রেটিনা)

— কোডি

@ কোডি এবং এইচটিএমএল 5Boilerplate এখন গ্রহণ করছে কেবল 152x152 আইকনটি ব্যবহার করা এবং এটি কল করা apple-touch-icon-precomposed.png, এবং অন্যান্য আইডিভাইসগুলি প্রয়োজন অনুসারে পুনরায় আকার দিন।

— ব্লেজমোনজার

Answer 3

আইপ্যাডের (তৃতীয় প্রজন্মের) সাথে এখন চারটি আইকন আকার 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 কমিয়ে স্কেল করতে দেয়। চতুর।

— সুপারলুমিনিয়

আইওএস 7-র হিসাবে প্রস্তাবিত আকারগুলি পরিবর্তন হয়েছে: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (রেটিনা)

— কোডি

@ কোডি এবং এইচটিএমএল 5Boilerplate এখন গ্রহণ করছে কেবল 152x152 আইকনটি ব্যবহার করা এবং এটি কল করা apple-touch-icon-precomposed.png, এবং অন্যান্য আইডিভাইসগুলি প্রয়োজন অনুসারে পুনরায় আকার দিন।

— ব্লেজমোনজার

Answer 4

অ্যাপলের সাইটে আইকনটি 152x152 পিক্সেল।
http://www.apple.com/apple-touch-icon.png

আশা করি এটাই তোমার প্রশ্নের উত্তর।

Comments

এই. বা 144x144 (প্রত্যাশিত আইপ্যাড রেটিনা রেস)। ভবিষ্যতের জন্য সামান্য এগিয়ে যাওয়ার পরিকল্পনার সময় এগুলির সমস্তই কম রেজোলিউড আইফোন / আইপ্যাড আকারগুলিতে নিখুঁত দেখায়।

— ডুমোমানিয়াক

অক্টোবর ২০১৩ পর্যন্ত, এখন এটি 152x152 এবং বিভিন্ন ডিভাইসের জন্য পরিবর্তিত হবে বলে মনে হচ্ছে না (যাইহোক আমার ল্যাপটপ এবং আইফোন 4 এর মধ্যে নয়)

— উইক

Answer 5

TL; DR: 180 x 180 px @ 150 ppi এ একটি পিএনজি আইকন ব্যবহার করুন এবং তারপরে এটির সাথে লিঙ্ক করুন:

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

পদ্ধতির উপর বিশদ

2020-04 পর্যন্ত, অ্যাপল থেকে প্রাপ্ত সাংস্কৃতিক প্রতিক্রিয়া আইওএস- এ তাদের ডকুমেন্টেশনে প্রতিফলিত হয়েছে ।

সরকারীভাবে, অনুমানটি বলে:

• iPhone 180px × 180px (60pt pt 60pt @ 3x)
• আইফোন 120px × 120px (60pt × 60pt @ 2x)
• আইপ্যাড প্রো 167px × 167px (83.5pt × 83.5pt @ 2x)
• আইপ্যাড, আইপ্যাড মিনি 152px × 152px (76pt × 76pt @ 2x)

বাস্তবে, এই আকার নির্ধারণের পার্থক্যগুলি ক্ষুদ্র, তাই কার্য সম্পাদনের সঞ্চয়গুলি খুব উচ্চ ট্র্যাফিক সাইটগুলিতেই কেবল গুরুত্বপূর্ণ।

নিম্ন ট্র্যাফিক সাইটগুলির জন্য, আমি সাধারণত 180 x 180 px @ 150 পিপিআইতে একটি পিএনজি আইকন ব্যবহার করি এবং সমস্ত ডিভাইস, এমনকি আরও আকারের আকারে খুব ভাল ফলাফল পাই।

Answer 6

আমি কিছুক্ষণের জন্য আইওএস অ্যাপ্লিকেশনগুলি বিকাশ এবং ডিজাইন করে চলেছি এবং এটিই iOS এর সেরা ডিজাইনের চিট শীট there

আনন্দ কর :)!

আপডেট: আইওএস 8+ এবং নতুন ডিভাইসগুলির জন্য (আইফোন 6, 6 প্লাস, আইপ্যাড এয়ার) এই আপডেট হওয়া লিঙ্কটি দেখুন ।

মেটা আপডেট: আইফোন 6 এস / 6 এস প্লাসের যথাক্রমে আইফোন 6/6 প্লাসের মতো রেজোলিউশন রয়েছে

এটি নিবন্ধটির নতুন সংস্করণ থেকে একটি চিত্র:

Answer 7

অ্যাপল এর সাইটে সম্পর্কিত ডকুমেন্টেশন, ওয়েব ক্লিপের জন্য একটি ওয়েবপৃষ্ঠা আইকন নির্দিষ্ট করে ।

আপনার দস্তাবেজের মাথায় কোনও জিনিস রাখার দরকার নেই। যদি কোনও আইকন কোনও লিঙ্ক উপাদান ব্যবহার করে নির্দিষ্ট না করা থাকে তবে ওয়েবসাইটের মূল ডিরেক্টরিটি অ্যাপল-টাচ-আইকন বা অ্যাপল-টাচ-আইকন-প্রাক্পম্পোজিত উপসর্গ সহ আইকনগুলির জন্য অনুসন্ধান করা হয় ।

উদাহরণস্বরূপ, যদি ডিভাইসের জন্য উপযুক্ত আইকন আকার 57 x 57 হয়, সিস্টেম নিম্নলিখিত ফাইলগুলিতে ফাইলের নাম অনুসন্ধান করে:

• আপেল স্পর্শ-আইকন-57x57-precomposed.png
• আপেল স্পর্শ-আইকন-57x57.png
• আপেল স্পর্শ-আইকন-precomposed.png
• আপেল স্পর্শ-icon.png

Comments

হ্যাঁ তবে এই প্রশ্নটি আইফোন 4 এবং আইপ্যাডের জন্য নতুন (বৃহত্তর) আইকনকে সম্মান করে।

— চেরোভিম

যদিও শিরোনামে কিছু নির্দিষ্ট করার প্রয়োজন নেই, এটি এখনও একটি ভাল অনুশীলন। যদি আপনি যেমন রেটিনা আইপ্যাডের জন্য 144x144 সংস্করণটি মিস করেন এবং পিক্সেল মাত্রা ব্যতীত কোনও আইকন না থাকে তবে মোবাইল সাফারি কেবল কোনও সাইটের পূর্বরূপ প্রদর্শন করতে ফিরে আসবে, যদিও এটি অপ-অনুকূল, তবে আরও ভাল, ছোট সংস্করণ ব্যবহার করতে পারে।

— রাফায়েল বুগাজেউস্কি

অন্যান্য প্লাটফর্মগুলি

— সেগুলিও

Answer 8

হ্যাঁ. যদি আকারটি মেলে না, সিস্টেম এটি পুনরায় ফিরিয়ে আনবে । তবে আইকনগুলির 2 সংস্করণ করা ভাল।

• আইপ্যাড - 72x72।
• আইফোন (≥4) - 114x114।
• আইফোন ≤3GS - 57x57 - সম্ভব হলে।

আপনি আপনার সার্ভারে ব্যবহারকারীর এজেন্ট দ্বারা আইপ্যাড এবং আইফোনকে আলাদা করতে পারেন । আপনি যদি সার্ভারে স্ক্রিপ্ট লিখতে না চান তবে আপনি জাভাস্ক্রিপ্ট দ্বারা আইকনটি দ্বারা পরিবর্তন করতে পারেন

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

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

এটি কাজ করে কারণ আপনি ওয়েব ক্লিপ যুক্ত করলেই আইকনটি অনুসন্ধান করা হয়।

(জাভাস্ক্রিপ্টে আইফোন ≤3 জিএস থেকে আইফোন ≥4 পার্থক্য করার কোনও পাবলিক উপায় নেই))

Comments

আইফোন 4 এর রেজোলিউশনটি আইফোন 3 এর থেকে দুটি ফ্যাক্টর দ্বারা স্পষ্টতই আকারে ছোট হয়ে গেছে, সুতরাং 114x114 সম্ভবত এটির জন্য আইকন আকারের জন্য একটি ভাল পছন্দ হবে।

— জ্যাব

@ জ্যাব: আইকনটিতে সীমানাগুলি যুক্ত রয়েছে তাই আইফোন ≤3GS এ প্রকৃত আইকনের আকার 59x60। যদি বিষয়টি হয় তবে 114x114 কিছুটা বন্ধ হতে পারে could

— কেনেটিএম

আইফোন 4+ এর সীমানাগুলি কি একই পরিমাণ, রেজোলিউশন-অনুসারে মাপা যায় না (যাতে আকার আকার অনুযায়ী তারা একই প্রস্থে প্রদর্শিত হয়)?

— জ্যাব

@ জ্যাব: এটি হওয়া উচিত। আমি চেক করিনি।

— কেনেটিম

আপনার সমস্ত ধারণা / পরামর্শের জন্য ধন্যবাদ। যদি আমি 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-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

আইওএস than এর চেয়ে পুরানো সংস্করণগুলিতে, আপনি যদি নিজের আইকনগুলিতে এফেক্ট যুক্ত করতে না চান তবে কেবল -precomposed.pngফাইলের নামের সাথে প্রত্যয় যুক্ত করুন । (আইওএস 7 এটি ছাড়াই প্রভাবগুলি যোগ করে না)।

Answer 10

আমি মনে করি এই প্রশ্নটি ওয়েব আইকন সম্পর্কে। আমি 512x512 এ একটি আইকন দেওয়ার চেষ্টা করেছি, এবং আইফোন 4 সিমুলেটারে এটি দুর্দান্ত দেখায় (পূর্বরূপে) তবে, হোম স্ক্রিনে যুক্ত করার সময় এটি খারাপভাবে পিক্সिलेটেড।

ভাল দিক থেকে, আপনি যদি আইপ্যাডে আরও বড় আইকন ব্যবহার করেন (তবে এখনও আমার 512x512 পরীক্ষা রয়েছে) এটি আইপ্যাডের আরও ভাল মানের বলে মনে হয়। আশা করি আইফোন 4 রেন্ডারিং একটি বাগ।

আমি রাডার এ সম্পর্কে একটি বাগ খোলা আছে।

সম্পাদনা করুন:

আমি বর্তমানে এই 114x114 আইকনটি ব্যবহার করছি যে এটি আইফোন 4-এ প্রকাশিত হওয়ার পরে ভাল লাগবে। আইফোন 4 এর যদি এখনও বাগ আসে তবে এটি আইপ্যাডের জন্য আইকনটি অপ্টিমাইজ করতে যাচ্ছি (p২x72২ খাস্তা এবং কোনও আকার পরিবর্তন করবে না), এবং তারপরে এটি পুরানো আইফোনের জন্য কমিয়ে দেওয়া হোক।

Answer 11

জন্য আইফোন এবং আইপড টাচ , তাহলে আইকনগুলি তৈরি যে পরিমাপ:

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

জন্য আইপ্যাড , যে ব্যবস্থা একটি আইকন তৈরি করুন:

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