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

iOS Safari kullanıcıları ana ekranlarına Progresif Web Uygulamaları (PWA) eklediklerinde, görünen simgeye Apple dokunma simgesi denir. Sayfanızın <head> bölümüne <link rel="apple-touch-icon" href="/example.png"> etiketi ekleyerek uygulamanızın hangi simgeyi kullanması gerektiğini 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ını vermek, daha kaliteli bir kullanıcı deneyimi sunar.

Lighthouse Apple dokunma simgesi denetimi nasıl başarısız oluyor?

Lighthouse, <head> içinde <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 var olup olmadığını veya simgenin doğru boyutta olup olmadığını kontrol etmez.

Apple dokunma simgesi ekleme

  1. Sayfanızın <head> kısmına <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 yerine simgenizin gerçek yolunu yazın.

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

  • Simge 180x180 piksel veya 192x192 pikseldir
  • Simge için belirtilen yol geçerli
  • Simgenin arka planı şeffaf değil

Kaynaklar