Tidak menyediakan apple-touch-icon yang valid

Saat pengguna Safari iOS 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.

Cara audit ikon sentuh Apple Lighthouse 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 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:

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

Resource