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

134

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

iphone  ipad  icons 
— Harry
sumber
— John
— Blazemonger
Untuk jawaban terbaik, lihat di situs web Apple
— Ruub
1
Saya menemukan alat ini untuk membuat ikon dengan semua ukuran yang didukung dan markup untuk disertakan dalam halaman Anda. iconifier.net
— agarcian

Jawaban:

145

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/

— felipep
sumber
30
Saya berharap mereka hanya mendukung SVG dan selesai dengan omong kosong ini. Namun, terima kasih atas jawabannya!
— Steven Vachon
2
suka pembaruan ... buat jawaban ini sangat relevan!
— Chris Allinson
1
Patut dicatat bahwa repo HTML5 Boilerplate yang populer dan telah teruji merekomendasikan hanya menggunakan ikon catch-all <link rel="apple-touch-icon" href="icon.png"> github.com/h5bp/html5-boilerplate/blob/master/dist/…
— jackocnr
Juga pendekatan modern untuk mendukung perangkat Android adalah dengan menggunakan file manifes, dan tentukan ikon Anda di sana: developers.google.com/web/fundamentals/app-install-banners - pendekatan ini juga digunakan oleh HTML5 Boilerplate repo: github.com/h5bp/html5-boilerplate/blob/master/dist/…
— jackocnr
Mengujinya. Pada iPhone Xs, Ikon tampaknya agak buram di sebelah Ikon Github. : /
— kaiserkiwi
117

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. ;)

— Darren
sumber
8
Dokumentasi pendukung dari apple: developer.apple.com/library/safari/#documentation/…
— Jim Geurts
6
Atribut ukuran bukan HTML yang valid!
8
Perangkat iOS lama tidak mengerti sizes atributnya dan karenanya menggunakan nilai apa pun yang terakhir. Karena itu <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />harus menjadi yang terakhir. Juga, seperti yang dikatakan pezillionaire, Anda sekarang dapat menambahkan ikon baru di 144x144 untuk iPad Retina.
— appmattus
5
Pada ios7 ukuran yang disarankan telah berubah: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (retina)
— Cody Django
4
@Cody dan pendekatan yang sekarang diambil oleh HTML5Boilerplate adalah dengan hanya menggunakan ikon 152x152 dan menyebutnya apple-touch-icon-precomposed.png, dan biarkan ukuran iDevices lain sesuai kebutuhan.
— Blazemonger
94

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" />
— pezillionaire
sumber
Saya suka metode ini yang terbaik.
— Caleb Jares
Metode ini memiliki kesederhanaan yang indah.
— PaulSkinner
1
Jadi kami hanya membuat 2 gambar dan memungkinkan perangkat untuk menurunkan 2x. Imut.
— superluminary
9
Pada ios7 ukuran yang disarankan telah berubah: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (retina)
— Cody Django
4
@Cody dan pendekatan yang sekarang diambil oleh HTML5Boilerplate adalah dengan hanya menggunakan ikon 152x152 dan menyebutnya apple-touch-icon-precomposed.png, dan biarkan ukuran iDevices lain sesuai kebutuhan.
— Blazemonger
34

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

Semoga itu menjawab pertanyaan Anda.

— abe
sumber
1
Ini. Atau 144x144 (diharapkan res Retina iPad). Semua dari mereka terlihat baik diperkecil ke ukuran res iPhone / iPad sementara merencanakan sedikit ke depan untuk masa depan.
— DOOManiac
6
Pada Oktober 2013, sekarang 152x152 & sepertinya tidak berubah untuk perangkat yang berbeda (tidak antara laptop & iphone4 saya)
— Wick
17

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.

— serraosay
sumber
16

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

Selamat bersenang-senang :)!

gambar ini dari artikel itu :)

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:

Info perangkat iOS 8 dan pertengahan 2014

— MrHaze
sumber
6

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
— Jan M
sumber
Ya tapi pertanyaan ini berkaitan dengan ikon baru (lebih besar) untuk iphone4 dan ipad.
— cherouvim
Meskipun tidak perlu menentukan apa pun di header, itu masih merupakan praktik yang baik. Jika Anda misal melewatkan versi 144x144 untuk retina iPad dan tidak ada ikon tanpa dimensi piksel, Mobile Safari akan kembali menampilkan hanya pratinjau situs, meskipun itu bisa menggunakan versi yang lebih tidak optimal, tetapi masih lebih baik, lebih kecil.
— Rafael Bugajewski
Ini adalah ide yang sangat buruk untuk tidak menentukan di header karena platform lain akan menggunakannya juga (Android, ChromeOS, Blackberry, ...)
— Remi Grumeau
5

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.)

— kennytm
sumber
1
Resolusi iPhone 4 tampaknya ditingkatkan dari iPhone 3 dengan faktor dua, jadi 114x114 mungkin akan menjadi pilihan yang baik untuk ukuran ikon untuk itu.
— JAB
@ JAB: Ada batas yang ditambahkan ke ikon sehingga ukuran ikon sebenarnya di iPhone ≤3GS adalah 59x60. Jika itu yang terjadi, 114x114 bisa menjadi sedikit salah.
— kennytm
Apakah batas pada iPhone 4+ tidak diskalakan dengan jumlah yang sama, resolusi-bijaksana (sehingga ukuran-bijaksana mereka tampaknya sama lebar)?
— JAB
@ JAB: Seharusnya begitu. Saya tidak memeriksa.
— kennytm
Terima kasih atas semua ide / saran Anda. Jika saya membuat 3 versi, bagaimana cara menargetkan setiap perangkat dengan ukuran yang relevan? Kecuali saya kehilangan sesuatu dan PNG adalah format wadah yang saya dapat memasukkan ukuran yang berbeda?
— Harry
2

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).

— Ethan
sumber
1

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.

— Chris Drackett
sumber
0

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)
— Prashant Aggarwal
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.