Geçerli bir apple-touch-icon sağlamıyor

iOS Safari kullanıcıları ana ekranlarına Progresif Web Uygulamaları (PWA'lar) eklediğinde görünen simge Apple dokunma simgesi olarak adlandırılır. Sayfanızın <head> bölümüne bir <link rel="apple-touch-icon" href="/example.png"> etiketi ekleyerek uygulamanızın hangi simgeyi kullanacağını belirtebilirsiniz. Sayfanızda bu bağlantı etiketi yoksa iOS, sayfa içeriğinin ekran görüntüsünü alarak bir simge oluşturur. Diğer bir deyişle, iOS'e bir simge indirmesi talimatı vermek daha iyi bir kullanıcı deneyimi sağlar.

Lighthouse Apple dokunmatik simgesi denetimi neden başarısız olur?

Lighthouse, <head> içinde <link rel="apple-touch-icon" href="/example.png"> etiketi olmayan sayfaları işaretler:

Geçerli bir apple-touch-icon sağlanmıyor

Lighthouse, simgesinin gerçekten var olup olmadığını veya doğru boyutta olup olmadığını kontrol etmez.

Apple dokunmatik simgesi ekleme

  1. Sayfanızın <head> bölümüne <link rel="apple-touch-icon" href="/example.png"> ekleyin:

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

  2. /example.png öğesini, simgenizin gerçek yoluyla değiştirin.

İyi bir kullanıcı deneyimi sunmak için aşağıdakilerden emin olun:

  • Simge 180x180 piksel veya 192x192 piksel olmalıdır.
  • Simgenin belirtilen yolu geçerli olmalıdır.
  • Simgenin arka planı şeffaf değil

Kaynaklar