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

Khi người dùng iOS Safari 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 bạn 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 chỉn chu hơn.

Cách thức kiểm tra biểu tượng cảm ứng Lighthouse Apple 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 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ó kích thước chính xá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.

Để 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 được 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