Tidak menyediakan apple-touch-icon yang valid

Saat pengguna iOS Safari menambahkan Progressive Web App (PWA) ke layar utama, ikon yang muncul disebut ikon sentuh Apple. Anda dapat menentukan ikon yang harus digunakan aplikasi dengan menyertakan tag <link rel="apple-touch-icon" href="/example.png"> di <head> halaman Anda. Jika halaman Anda tidak memiliki tag link ini, iOS akan membuat ikon dengan mengambil screenshot konten halaman tersebut. Dengan kata lain, menginstruksikan iOS untuk mendownload ikon akan menghasilkan pengalaman pengguna yang lebih baik.

Bagaimana audit ikon sentuh Lighthouse Apple gagal

Lighthouse menandai halaman tanpa tag <link rel="apple-touch-icon" href="/example.png"> di <head>:

Tidak menyediakan apple-touch-icon yang valid

Lighthouse tidak memeriksa apakah ikon benar-benar ada atau apakah ikon memiliki ukuran yang benar.

Cara menambahkan ikon Apple Touch

  1. Tambahkan <link rel="apple-touch-icon" href="/example.png"> ke <head> halaman Anda:

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

  2. Ganti /example.png dengan jalur sebenarnya ke ikon Anda.

Untuk memberikan pengalaman pengguna yang baik, pastikan bahwa:

  • Ikon berukuran 180x180 piksel atau 192x192 piksel
  • Jalur yang ditetapkan ke ikon valid
  • Latar belakang ikon tidak transparan

Referensi