Kích thước nào của apple-touch-icon.png dành cho iPad và iPhone?

Các biểu tượng cảm ứng của Apple có được hỗ trợ lớn hơn 60x60 không và nếu có thì tôi nên sử dụng kích thước nào cho iPad và iPhone?

Danh sách cập nhật tháng 12 năm 2019, iOS13 Một biểu tượng cho iOS 180x180 px và một biểu tượng cho Android 192x192 px (được khai báo trong 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"
}

Danh sách không dùng nữa Tháng 10 năm 2017, iOS11

Danh sách cho iPhone và iPad có và không có võng mạc

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

Cập nhật tháng 10 năm 2017 iOS 11: kiểm tra iOS 11, giới thiệu iPhone X và iPhone 8

Cập nhật tháng 11 năm 2016 iOS 10: Phiên bản iOS mới iPhone 7 và iPhone 7plus được giới thiệu, chúng có cùng độ phân giải màn hình, dpi, v.v. như iPhone 6s và iPhone 7plus, cho đến bây giờ không có thay đổi nào liên quan đến bản cập nhật 2015

Cập nhật Android giữa năm 2016: Thêm thiết bị Android vào danh sách vì các liên kết apple-touch được đánh dấu là không được Google chấp nhận và sẽ không được hỗ trợ bất cứ lúc nào cho thiết bị của họ

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

Cập nhật 2015 iOS 9: Dành cho iOS 9 và iPad pro

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

IPhone mới (6s và 6s Plus) đang sử dụng cùng kích cỡ với iPhone (6 và 6 Plus), iPad pro mới sử dụng hình ảnh có kích thước 167x167 px, các độ phân giải khác vẫn giống nhau.

Cập nhật 2014 iOS 8:

Dành cho iOS 8 và iPhone 6 plus

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

Iphone 6 sử dụng hình ảnh 120 x 120 px tương tự như iphone 4 và 5 phần còn lại giống với iOS 7

Cập nhật iOS7 2013:

Đối với iOS 7, độ phân giải được đề xuất đã thay đổi:

• cho iPhone Retina từ 114 x 114 px đến 120 x 120 px
• cho iPad Retina từ 144 x 144 px đến 152 x 152 px

Độ phân giải khác vẫn như cũ.

• Mặc định 57 x 57 px
• 76 x 76 px cho iPad không có võng mạc

Nguồn: https://developer.apple.com/ios/human-interface-guferences/icons-and-images/app-icon/

Sử dụng các kích thước 57x57, 72x72, 114x114, 144x144 sau đó thực hiện việc này trong phần đầu của tài liệu của bạn:

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

Điều này sẽ nhìn tốt trên tất cả các thiết bị táo. ;)

Với iPad (thế hệ thứ 3) hiện có bốn kích thước biểu tượng 57x57, 72x72, 114x114, 144x144.

Vì các biểu tượng võng mạc có kích thước chính xác gấp đôi kích thước của các biểu tượng tiêu chuẩn, chúng tôi thực sự chỉ cần tạo 2 biểu tượng : 114 x 114 và 144 x 144. Bằng cách đặt biểu tượng có kích thước võng mạc thành biểu tượng tiêu chuẩn tương ứng, iOS sẽ chia tỷ lệ cho chúng.

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

Biểu tượng trên trang web của Apple là 152x52 pixel.
http://www.apple.com/apple-touch-icon.png

Hy vọng rằng câu trả lời câu hỏi của bạn.

TL; DR: sử dụng một biểu tượng PNG ở 180 x 180 px @ 150 ppi và sau đó liên kết với nó như thế này:

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

Chi tiết về cách tiếp cận

Kể từ 2020-04, phản hồi kinh điển từ Apple được phản ánh trong tài liệu của họ về iOS .

Chính thức, thông số kỹ thuật nói:

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

Trong thực tế, những khác biệt kích thước này là rất nhỏ, vì vậy tiết kiệm hiệu suất sẽ thực sự chỉ quan trọng trên các trang web lưu lượng truy cập rất cao.

Đối với các trang web có lưu lượng truy cập thấp hơn, tôi thường sử dụng một biểu tượng PNG ở 180 x 180 px @ 150 ppi và nhận được kết quả rất tốt trên tất cả các thiết bị, ngay cả những trang có kích thước cộng.

Tôi đã phát triển và thiết kế các ứng dụng iOS được một thời gian và Đây là bảng cheat thiết kế iOS tốt nhất hiện có!

chúc vui vẻ :)!

Cập nhật: Đối với iOS 8+ và các thiết bị mới (iPhone 6, 6 Plus, iPad Air) hãy xem liên kết được cập nhật này .

Cập nhật meta: Iphone 6s / 6s Plus có độ phân giải tương ứng với iPhone 6/6 Plus

Đây là một hình ảnh từ phiên bản mới của bài viết:

Các tài liệu liên quan trên trang web của Apple, Chỉ định Biểu tượng Trang web cho Clip trên Web .

Không cần phải đặt bất cứ điều gì vào đầu tài liệu của bạn. Nếu không có biểu tượng nào được chỉ định bằng cách sử dụng phần tử liên kết, thư mục gốc của trang web sẽ được tìm kiếm các biểu tượng có tiền tố apple-touch-icon hoặc apple-touch-icon-pre-pre-pre-pre .

Ví dụ: nếu kích thước biểu tượng phù hợp cho thiết bị là 57 x 57, hệ thống sẽ tìm kiếm tên tệp theo thứ tự sau:

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

Đúng. Nếu kích thước không phù hợp, hệ thống sẽ bán lại nó . Nhưng tốt hơn là tạo 2 phiên bản của các biểu tượng.

• iPad - 72x72.
• iPhone (≥4) - 114x114.
• iPhone 3GS - 57x57 - Nếu có thể.

Bạn có thể phân biệt iPad và iPhone theo tác nhân người dùng trên máy chủ của mình. Nếu bạn không muốn viết tập lệnh trên máy chủ, bạn cũng có thể thay đổi biểu tượng bằng Javascript bằng cách

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

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

Điều này hoạt động vì biểu tượng chỉ được truy vấn khi bạn thêm clip web.

(Không có cách nào để phân biệt iPhone 4 với iPhone 3GS trong Javascript.)

Có, lớn hơn 60x60 được hỗ trợ. Để đơn giản, hãy tạo biểu tượng của 4 kích thước sau:

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

Bây giờ, tốt hơn là thêm chúng dưới dạng liên kết trong HTML của bạn dưới dạng:

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

Bạn có thể chọn không khai báo 4 liên kết ở trên mà chỉ khai báo một liên kết duy nhất, trong trường hợp đó sẽ cho kích thước cao nhất 152x152hoặc thậm chí là một kích thước cao hơn thế 196x196. Nó sẽ luôn cắt giảm kích thước để tái mục đích. Đảm bảo bạn đề cập đếnsize .

Bạn cũng có thể chọn không khai báo ngay cả một liên kết. Apple đề cập rằng trong kịch bản này, nó sẽ tìm kiếm root máy chủ trước tiên để có kích thước cao hơn kích thước mà nó muốn (định dạng đặt tên apple-touch-icon-<size>.png:) và nếu không tìm thấy thì nó sẽ tìm tiếp theo default file: apple-touch-icon.png. Tốt hơn là bạn nên xác định (các) liên kết vì điều đó sẽ giảm thiểu trình duyệt truy vấn máy chủ của bạn.

Biểu tượng cần thiết:

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

Trong các phiên bản cũ hơn iOS 7, nếu bạn không muốn nó thêm hiệu ứng vào biểu tượng của mình, thì chỉ cần thêm hậu tố -precomposed.pngvào tên tệp. (iOS 7 không thêm hiệu ứng ngay cả khi không có nó).

Tôi nghĩ rằng câu hỏi này là về các biểu tượng web. Tôi đã thử đưa ra một biểu tượng ở 512x512 và trên trình giả lập iPhone 4, nó trông rất tuyệt (trong bản xem trước), tuy nhiên, khi được thêm vào màn hình chính, nó bị pixel xấu.

Về mặt tốt, nếu bạn sử dụng một biểu tượng lớn hơn trên iPad (vẫn với thử nghiệm 512x512 của tôi), nó dường như xuất hiện với chất lượng tốt hơn trên iPad. Hy vọng kết xuất iPhone 4 là một lỗi.

Tôi đã mở một lỗi về điều này trên radar.

BIÊN TẬP:

Tôi hiện đang sử dụng biểu tượng 114x114 với hy vọng nó sẽ đẹp trên iPhone 4 khi được phát hành. Nếu iPhone 4 vẫn có lỗi khi phát hành, tôi sẽ tối ưu hóa biểu tượng cho iPad (sắc nét và không thay đổi kích thước ở 72x72), sau đó cho phép thu nhỏ cho iPhone cũ.

Đối với iPhone và iPod touch , hãy tạo các biểu tượng đo:

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

Đối với iPad , hãy tạo một biểu tượng đo:

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