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>
:
Lighthouse tidak memeriksa apakah ikon benar-benar ada atau apakah ikon memiliki ukuran yang benar.
Cara menambahkan ikon Apple Touch
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> …
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