Tidak menyediakan apple-touch-icon yang valid

Saat pengguna Safari iOS menambahkan Progressive Web Apps (PWA) ke layar utama mereka, ikon yang muncul itu disebut ikon Apple Touch. Anda bisa menetapkan ikon apa yang harus digunakan aplikasi dengan menyertakan Tag <link rel="apple-touch-icon" href="/example.png"> di <head> kami. Jika halaman Anda tidak memiliki tag link ini, iOS akan membuat ikon dengan mengambil screenshot konten halaman. Dengan kata lain, menginstruksikan iOS untuk mengunduh ikon akan menghasilkan {i>user experience<i}.

Bagaimana audit ikon sentuh Apple Lighthouse gagal

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

Tidak menyediakan apple-touch-icon yang valid

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

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:

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

Resource