Biểu tượng Apple Touch cho các trang web

83

Cho đến nay, tôi đã đưa dòng biểu tượng Apple Touch vào đầu như thế này:

<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">

Tuy nhiên, trong phần Hỏi & Đáp "Kích thước pixel chính xác cho biểu tượng quả táo là gì?" nó được nêu trong câu trả lời được chấp nhận rằng ba hình ảnh hiện là cần thiết theo hướng dẫn của Apple.

Vậy làm cách nào để chèn chúng vào phần đầu của mã?

html  mobile  apple-touch-icon 
— J82
nguồn

Câu trả lời:

88

Giải pháp tối giản - Được đề xuất

Một phương pháp phổ biến là tạo một biểu tượng 180x180 duy nhất, là độ phân giải mong đợi cao nhất và để các thiết bị iOS thu nhỏ nó khi cần thiết. Nó được khai báo với:

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

Giải pháp cạn kiệt - Không được khuyến nghị

Thông số kỹ thuật của Apple chỉ định kích thước mới cho iOS7:

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

Và cũng cho iOS8 :

  • 180x180

Ngoài ra, các biểu tượng thành phần trước không được dùng nữa.

Do đó, để hỗ trợ cả thiết bị mới (chạy iOS7) và cũ hơn (iOS6 trở về trước), mã chung là:

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

Ngoài ra, bạn nên tạo hình 180x180 có tên apple-touch-icon.png .

Lưu ý rằng iOS tìm kiếm URL giống như /apple-touch-icon-76x76.png, nếu nó không tìm thấy nội dung thú vị trong mã HTML (hơi giống với những gì IE đang làm với /favicon.ico). Vì vậy, điều quan trọng là phải giữ tên tệp ở trên. Điều quan trọng là phải xem xét rằng Android / Chrome cũng đang sử dụng những hình ảnh này .

Bạn có thể muốn biết rằng điều này tạo favicon có thể tạo ra tất cả những hình ảnh cùng một lúc. Tiết lộ đầy đủ: Tôi là tác giả của trang web này.

— philippe_b
nguồn
2
Tất cả các tệp trong mỗi <link>thẻ có được tải xuống không nếu chúng không có trong bộ nhớ cache của máy khách? Bất kể trang được yêu cầu ở đâu (điện thoại, máy tính bảng, pc, windows, android ...)? Tôi hơi lo ngại về tác động của hiệu suất ...
— RayOnAir.
1
Đối với iOS8, cũng có độ phân giải 180x180 mới. Bạn cũng không thực sự phải liên kết đến các biểu tượng từ HTML - trừ khi bạn muốn các biểu tượng cụ thể chỉ cho một trang cụ thể. Apple có danh sách gần đây về những kích thước mà họ thích: developer.apple.com/library/ios/documentation/UserExperience/… . Tìm mục nhập "Biểu tượng clip web" trong bảng.
— qingu
1
Với tôi, việc thêm quá nhiều dữ liệu vào tiêu đề của mỗi trang dường như là không cần thiết - nếu biểu tượng không lớn trong phiên bản 180x180 (của tôi thường là từ 2kb đến 5kb) thì chỉ cần có <link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />là đủ. Và ngay cả khi bạn tạo ảnh có kích thước khác nhau, theo như tôi có thể nói, bạn chỉ cần xóa tất cả các liên kết biểu tượng apple-touch-touch và iOS sẽ tự tìm kiếm các tệp, bắt đầu với kích thước ưa thích (như apple-touch-icon-180x180. png) và sử dụng apple-touch-icon.png nếu không tìm thấy tệp nào khác.
— iquito,
1
@iquito Đúng vậy, bạn hoàn toàn có thể chỉ sử dụng một khai báo. Với tư cách là người sáng lập RealFaviconGenerator, tôi đang nghiên cứu giải pháp phù hợp với tất cả mọi người này. Có một vấn đề có thể xảy ra, mặc dù iOS làm rất tốt: iOS sử dụng một thuật toán tương tự như Mitchell để thu nhỏ các biểu tượng. Tùy thuộc vào thiết kế cụ thể của bạn, đó có thể không phải là những gì bạn muốn. Tôi sẽ cập nhật câu trả lời của mình khi tôi có thêm phản hồi về điều này.
— philippe_b
2
Nhân tiện, RealFaviconGenerator thực sự tuyệt vời, điều duy nhất tôi nghĩ có thể tốt hơn là nhiều liên kết tiêu đề không thực sự cần thiết - cả khi tạo biểu tượng yêu thích mới và kiểm tra xem trang web đang hoạt động như thế nào. Có thể khi được cải tiến hơn nữa, trang web có thể hiển thị các khả năng khác nhau - những phần nào hoàn toàn có lợi (và những gì chúng làm / giải thích thêm), và những phần nào có thể bị bỏ sót và thường được trình duyệt tự động phát hiện (theo tôi biết iOS cũng tìm kiếm các kích thước cụ thể trong thư mục gốc nếu trang không có bất kỳ thông tin nào về apple-touch-icon).
— iquito
70

Của bạn đây, hy vọng điều này sẽ giúp.

Nếu bạn muốn Apple làm chút thẩm mỹ cho bạn (thêm độ bóng) thì bạn sẽ đặt những thứ này vào các <head>thẻ:

<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />

Nếu bạn muốn precompose hình ảnh, vì vậy mà Apple hiển thị nó mà không có bóng, sau đó bạn muốn làm điều này:

<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />

Cung cấp cho bạn nhiều hơn một, thiết bị iOS sẽ tìm kiếm kích thước chính xác và tự động sử dụng hình ảnh đó. Như bạn có thể thấy từ tên của các hình ảnh trong ví dụ, iPad có màn hình retina cần có biểu tượng là 144x144px, iPhone 4 / 4S / 5 cần có biểu tượng là 114x114px, iPad gốc (và iPad 2, là độ phân giải màn hình cũng không khác) cần một biểu tượng có kích thước 72x72px và iPhone gốc không cần thông số kích thước, nhưng để bạn tham khảo, nó là 57x57px.

— Charles Cooke
nguồn
Tại sao thành phần sẵn có nghĩa là không có độ bóng? Tôi không thể đưa ra định nghĩa của jibe được tạo sẵn với "không có bóng". Và không, tôi không hề mỉa mai, tôi thực sự muốn biết.
— boatcoder
@ Mark0978 Tôi đọc nó có nghĩa là: "nó đã được sáng tác, tức là 'iOS theo kiểu' (do bạn), vì vậy iOS sẽ không gây rối với nó (ngoại trừ để làm tròn các góc)"
— Michael Haren
5
Đây là lỗi thời như iOS 7.
— bjb568
Có thể chỉ có một hình ảnh và để Apple tự động thay đổi kích thước của nó không?
— Aaron Franke
12

Vì một số câu trả lời trong số này đã lỗi thời, tôi khuyên bạn nên sử dụng http://realfavicongenerator.net/ để tạo tất cả hình ảnh và đánh dấu - tôi tặng một vài euro mỗi lần tôi sử dụng nó với hy vọng rằng nó cho phép họ giữ lại cập nhật những gì hiện có hiệu lực trên iOS, Android và Windows, vì vậy tôi không cần phải làm như vậy.

— Tim Iles
nguồn
3
(Tôi vừa mới nhận thấy một trong những câu trả lời khác ở đây là từ tác giả của realfavicongenerator.net - vui lòng upvote câu trả lời của mình thay vì của tôi!)
— Tim Iles
3
Hỗ trợ nhà phát triển này, vì trang web này hoàn hảo
— whiteshooz
Tim + @whiteshooz: Cảm ơn bạn đã ủng hộ! (vâng, tôi nhận thấy bình luận của bạn ngay bây giờ)
— philippe_b
7

Kể từ năm 2018, Trang web dành cho nhà phát triển của Apple đề xuất những điều sau cho thiết bị iOS:

  <link rel="apple-touch-icon" href="touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
  <link rel="apple-touch-startup-image" href="/launch.png">
  <meta name="apple-mobile-web-app-title" content="AppTitle">

Tiêu đề ứng dụng sẽ thay thế tiêu đề trang web của bạn. Thông thường, bạn muốn điều đó. Hình ảnh khởi động là những gì sẽ xuất hiện trong khi ứng dụng đang khởi chạy.

— Pedro Ferrari
nguồn
6

Chỉ định Biểu tượng Trang web cho Clip Web

Bạn có thể muốn người dùng có thể thêm ứng dụng web hoặc liên kết trang web của bạn vào Màn hình chính. Các liên kết này, được biểu thị bằng một biểu tượng, được gọi là Đoạn Web. Làm theo các bước đơn giản sau để chỉ định một biểu tượng đại diện cho ứng dụng web hoặc trang web của bạn trên iOS.

Để chỉ định một biểu tượng cho toàn bộ trang web (mọi trang trên trang web), hãy đặt một tệp biểu tượng ở định dạng PNG trong thư mục tài liệu gốc có tên apple-touch-icon.png

Để chỉ định biểu tượng cho một trang web hoặc thay thế biểu tượng trang web bằng biểu tượng dành riêng cho trang web, hãy thêm phần tử liên kết vào trang web, như trong:

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

Trong ví dụ trên, thay thế custom_icon.png bằng tên tệp biểu tượng của bạn. Để chỉ định nhiều biểu tượng cho các độ phân giải thiết bị khác nhau — ví dụ: hỗ trợ cả thiết bị iPhone và iPad — hãy thêm thuộc tính kích thước vào từng phần tử liên kết như sau:

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

Biểu tượng có kích thước thích hợp nhất cho thiết bị sẽ được sử dụng. Nếu không có thuộc tính kích thước nào được đặt, kích thước của phần tử sẽ mặc định là 60 x 60. Nếu không có biểu tượng nào phù hợp với kích thước được đề xuất cho thiết bị, thì biểu tượng nhỏ nhất lớn hơn kích thước được đề xuất sẽ được sử dụng. Nếu không có biểu tượng nào lớn hơn kích thước được đề xuất, biểu tượng lớn nhất sẽ được sử dụng.

Nếu không có biểu tượng nào được chỉ định bằ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 .... Ví dụ: nếu kích thước biểu tượng thích hợp cho thiết bị là 60 x 60, hệ thống sẽ tìm kiếm tên tệp theo thứ tự sau:

apple-touch-icon-76x76.png

apple-touch-icon.png

Xem Kích thước biểu tượng và hình ảnh để biết số liệu biểu tượng trang web.

Lưu ý : Safari trên iOS 7 không thêm hiệu ứng vào các biểu tượng. Các phiên bản Safari cũ hơn sẽ không thêm hiệu ứng cho các tệp biểu tượng có tên với hậu tố -precomposed.png. Xem Các bước đầu tiên: Xác định ứng dụng của bạn trong iTunes Connect để biết chi tiết.

Nguồn: Thông số kỹ thuật biểu tượng cảm ứng của Apple

xin chào bạn có biết tôi có thể tải những hình ảnh png biểu tượng đó từ đâu không?
— BKSpurgeon
2

Tôi chưa bao giờ đọc bất kỳ thông số kỹ thuật táo nào, tôi phải thừa nhận, nhưng theo nhật ký trên trang web của tôi, những hình ảnh này được yêu cầu trong root:

apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png

apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png
— Tomáš Zato - Phục hồi Monica
nguồn
2

Từ pull-request của tôi đến https://github.com/h5bp/mobile-boilerplate (với các biểu tượng iPhone 6):

<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

<!--
    Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
    If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
— Pinal
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.