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

iOS Safari kullanıcıları ana ekranlarına progresif web uygulamaları (PWA) eklediğinde görünen simgeye Apple dokunma simgesi adı verilir. Sayfanızın <head> bölümüne <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. Başka bir deyişle, iOS'e bir simge indirmesi talimatı vermek daha iyi bir kullanıcı deneyimi sağlar.

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

Lighthouse, <head> bölümünde <link rel="apple-touch-icon" href="/example.png"> etiketi olmayan sayfaları işaretler:

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

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

Apple dokunma 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 şunlardan emin olun:

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

Kaynaklar