Không cung cấp apple-Touch-icon hợp lệ

Khi người dùng Safari trên iOS thêm Ứng dụng web tiến bộ (PWA) vào màn hình chính, biểu tượng xuất hiện sẽ được gọi là Biểu tượng cảm ứng của Apple. Bạn có thể chỉ định biểu tượng mà ứng dụng của mình sẽ sử dụng bằng cách thêm thẻ <link rel="apple-touch-icon" href="/example.png"> vào <head> của trang. Nếu trang của bạn không có thẻ liên kết này, iOS sẽ tạo một biểu tượng bằng cách chụp ảnh màn hình nội dung trang. Nói cách khác, việc hướng dẫn iOS tải một biểu tượng xuống sẽ mang lại trải nghiệm người dùng tinh tế hơn.

Cách kiểm tra biểu tượng cảm ứng của Apple trong Lighthouse không thành công

Lighthouse gắn cờ các trang không có thẻ <link rel="apple-touch-icon" href="/example.png"> trong <head>:

Không cung cấp biểu tượng apple-touch-icon hợp lệ

Lighthouse không kiểm tra xem biểu tượng có thực sự tồn tại hay không hoặc biểu tượng có đúng kích thước hay không.

Cách thêm biểu tượng cảm ứng của Apple

  1. Thêm <link rel="apple-touch-icon" href="/example.png"> vào <head> của trang:

    <!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="apple-touch-icon" href="/example.png">
    …
  </head>
  …

  2. Thay thế /example.png bằng đường dẫn thực tế đến biểu tượng của bạn.

Để mang lại trải nghiệm tốt cho người dùng, hãy đảm bảo rằng:

  • Biểu tượng có kích thước 180x180 pixel hoặc 192x192 pixel
  • Đường dẫn đã chỉ định đến biểu tượng là hợp lệ
  • Nền của biểu tượng không trong suốt

Tài nguyên