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 của các thiết bị đó, biểu tượng xuất hiện được gọi là biểu tượng cảm ứng Apple. Bạn có thể chỉ định biểu tượng nào ứng dụng sẽ sử dụng bằng cách thêm vào Thẻ <link rel="apple-touch-icon" href="/example.png"> trong <head> của . 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 biểu tượng xuống sẽ giúp giao diện trải nghiệm người dùng.

Cách không kiểm tra được biểu tượng cảm ứng của Apple trên Lighthouse

Lighthouse gắn cờ những trang không có <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ó có kích thước chính xác.

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> trên trang của bạn:

    <!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 đượ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