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. Dengan kata lain, menginstruksikan iOS untuk mendownload ikon akan menghasilkan pengalaman pengguna yang lebih baik.

Penyebab kegagalan audit ikon sentuh Apple Lighthouse

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 ukuran ikon sudah benar.

Cara menambahkan ikon sentuh Apple

  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 ditentukan ke ikon valid
  • Latar belakang ikon tidak transparan

Resource