Berapa ukuran apple-touch-icon.png untuk iPad dan iPhone?

Apakah ikon Apple touch lebih besar dari 60x60 didukung, dan jika demikian, dimensi apa yang harus saya gunakan untuk iPad dan iPhone?

Daftar yang diperbarui Desember 2019, iOS13 Satu ikon untuk iOS 180x180 px dan satu untuk android 192x192 px (dinyatakan dalam 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"
}

Daftar usang Oktober 2017, iOS11

Daftar untuk iPhone dan iPad dengan dan tanpa retina

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

Pembaruan Oktober 2017 iOS 11: iOS 11 dicentang, iPhone X dan iPhone 8 diperkenalkan

Pembaruan Nov 2016 iOS 10: Versi iOS baru iPhone 7 dan iPhone 7plus diperkenalkan, mereka memiliki resolusi tampilan, dpi, dll yang sama seperti iPhone 6s dan iPhone 7plus, hingga sekarang tidak ada perubahan yang ditemukan sehubungan dengan pembaruan 2015

Perbarui Pertengahan 2016 Android: Tambahkan Perangkat Android ke daftar karena tautan sentuhan-apel ditandai sebagai usang oleh Google dan tidak akan didukung kapan saja untuk perangkat mereka

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

Pembaruan 2015 iOS 9: Untuk iOS 9 dan iPad pro

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

IPhone baru (6s dan 6s Plus) menggunakan ukuran yang sama dengan iPhone (6 dan 6 Plus), iPad pro baru menggunakan gambar berukuran 167x167 px, resolusi lainnya masih sama.

Pembaruan 2014 iOS 8:

Untuk iOS 8 dan iPhone 6 plus

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

Iphone 6 menggunakan gambar 120 x 120 px yang sama seperti iphone 4 dan 5 sisanya sama dengan untuk iOS 7

Perbarui 2013 iOS7:

Untuk iOS 7 resolusi yang disarankan berubah:

• untuk iPhone Retina dari 114 x 114 px hingga 120 x 120 px
• untuk iPad Retina dari 144 x 144 px hingga 152 x 152 px

Resolusi lainnya masih sama

• 57 x 57 px default
• 76 x 76 px untuk iPad tanpa retina

Sumber: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Gunakan ukuran ini 57x57, 72x72, 114x114, 144x144 lalu lakukan ini di kepala dokumen Anda:

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

Ini akan terlihat bagus di semua perangkat apel. ;)

Dengan iPad (generasi ke-3) sekarang ada empat ukuran ikon 57x57, 72x72, 114x114, 144x144.

Karena ikon retina persis dua kali lipat ukuran ikon standar, kita hanya perlu membuat 2 ikon : 114 x 114 dan 144 x 144. Dengan mengatur ikon ukuran retina ke ikon standar yang sesuai, iOS akan mengatur skala sesuai dengan itu.

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

Ikon di situs Apple adalah 152x152 piksel.
http://www.apple.com/apple-touch-icon.png

Semoga itu menjawab pertanyaan Anda.

TL; DR: gunakan satu ikon PNG pada 180 x 180 px @ 150 ppi dan kemudian tautkan seperti ini:

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

Detail tentang Pendekatan

Pada 2020-04, respons kanonik dari Apple tercermin dalam dokumentasi mereka di iOS .

Secara resmi, spec mengatakan:

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

Pada kenyataannya, perbedaan ukuran ini kecil, sehingga penghematan kinerja hanya akan berpengaruh pada situs lalu lintas yang sangat tinggi.

Untuk situs dengan lalu lintas yang lebih rendah, saya biasanya menggunakan satu ikon PNG pada 180 x 180 px @ 150 ppi dan mendapatkan hasil yang sangat baik di semua perangkat, bahkan yang berukuran plus.

Saya telah mengembangkan dan merancang aplikasi iOS untuk sementara waktu dan ini adalah lembar contekan desain iOS terbaik di luar sana!

Selamat bersenang-senang :)!

Pembaruan: Untuk iOS 8+, dan perangkat baru (iPhone 6, 6 Plus, iPad Air) lihat tautan yang diperbarui ini .

Pembaruan met : Iphone 6s / 6s Plus memiliki resolusi yang sama seperti iPhone 6/6 Plus

Ini adalah gambar dari versi baru artikel:

Dokumentasi yang relevan di situs Apple, Menentukan Ikon Halaman Web untuk Klip Web .

Tidak perlu meletakkan apa pun di kepala dokumen Anda. Jika tidak ada ikon yang ditentukan menggunakan elemen tautan, direktori root situs web akan mencari ikon dengan ikon apple-touch-icon atau apple-touch-icon-precomposed awalan prefix .

Misalnya, jika ukuran ikon yang sesuai untuk perangkat adalah 57 x 57, sistem mencari nama file dalam urutan berikut:

• apple-touch-icon-57x57-precomposed.png
• apple-touch-icon-57x57.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

Iya. Jika ukurannya tidak cocok, sistem akan mengubah skala ukurannya . Tetapi lebih baik untuk membuat 2 versi ikon.

• iPad - 72x72.
• iPhone (≥4) - 114x114.
• iPhone ≤3GS - 57x57 - Jika memungkinkan.

Anda bisa membedakan iPad dan iPhone dengan agen pengguna di server Anda. Jika Anda tidak ingin menulis skrip di server, Anda juga dapat mengubah ikon dengan Javascript oleh

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

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

Ini berfungsi karena ikon hanya diminta ketika Anda menambahkan klip web.

(Belum ada cara umum untuk membedakan iPhone ≥4 dari iPhone ≤3GS di Javascript.)

Ya, lebih besar dari 60x60 didukung. Untuk kesederhanaan, buat ikon dengan 4 ukuran ini:

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

Sekarang, lebih baik menambahkannya sebagai tautan di HTML Anda sebagai:

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

Anda dapat memilih untuk tidak mendeklarasikan 4 tautan di atas tetapi hanya menyatakan satu tautan, dalam hal ini berikan ukuran tertinggi 152x152atau bahkan ukuran lebih tinggi dari itu, katakanlah 196x196. Itu akan selalu memangkas ukuran untuk re-bertujuan. Pastikan Anda menyebutkan size.

Anda juga dapat memilih untuk tidak mendeklarasikan satu pun tautan. Apple menyebutkan bahwa dalam skenario ini, ia akan mencari server root terlebih dahulu untuk ukuran segera lebih tinggi dari ukuran yang diinginkan (penamaan format:) apple-touch-icon-<size>.png, dan jika itu tidak ditemukan maka selanjutnya akan mencaridefault file: apple-touch-icon.png . Lebih baik Anda mendefinisikan tautan karena akan meminimalkan browser yang menanyakan server Anda.

Kebutuhan ikon:

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

Dalam versi yang lebih lama dari iOS 7, jika Anda tidak ingin itu menambahkan efek ke ikon Anda, maka tambahkan saja akhiran -precomposed.pngke nama file. (iOS 7 tidak menambahkan efek bahkan tanpa itu).

Saya pikir pertanyaan ini adalah tentang ikon web. Saya sudah mencoba memberikan ikon pada 512x512, dan pada simulator iPhone 4 terlihat hebat (dalam pratinjau) namun, ketika ditambahkan ke layar awal itu pixelated buruk.

Sisi baiknya, jika Anda menggunakan ikon yang lebih besar di iPad (masih dengan tes 512x512 saya) sepertinya akan keluar dalam kualitas yang lebih baik di iPad. Semoga rendering iPhone 4 adalah bug.

Saya sudah membuka bug tentang ini di radar.

EDIT:

Saya saat ini menggunakan ikon 114x114 dengan harapan akan terlihat bagus di iPhone 4 saat dirilis. Jika iPhone 4 masih memiliki bug saat keluar, saya akan mengoptimalkan ikon untuk iPad (tajam dan tidak ada ukuran pada 72x72), dan kemudian biarkan turun untuk iPhone lama.

Untuk iPhone dan iPod touch , buat ikon yang mengukur:

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

Untuk iPad , buat ikon yang mengukur:

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