Güvenilir bir HTML favicon'u tek bir sihirli etikete bağlı değildir. Erişilebilir birkaç dosya ve head bölümüne yerleştirilen bağlantılar kullanır. Bu yöntem, eski varyantları çoğaltmadan modern sekmeleri, eski istemcileri ve mobil kısayolları kapsar.
Dosyaları hazırlayın
Çok küçükken de okunabilir kalan kare bir sembolle başlayın. favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest ve manifestin başvurduğu PNG dosyalarını alan adının kökünden sunulan public klasörüne koyun.
/favicon.svg gibi bir yol, alan adının kökünden başlar. Bu nedenle sayfaya göre çözümlenebilen favicon.svg yolunun aksine /products veya /blog/article sayfalarında da doğru kalır.
Öğeleri head bölümüne ekleyin
Önce SVG'yi rel icon ve type image/svg+xml ile, ardından ICO'yu rel icon ve sizes any ile tanımlayın. iOS için rel apple-touch-icon, web uygulaması kurulumu için rel manifest ekleyin.
Tür, gerçekten sunulan dosyayla eşleşmelidir. PNG'nin adını .ico yapmayın: içerik ve üstbilgi ICO biçimini kullanmalıdır.
| Amaç | İlişki | Dosya |
|---|---|---|
| Modern tarayıcı | icon | /favicon.svg |
| Uyumluluk | icon | /favicon.ico |
| iOS ana ekranı | apple-touch-icon | /apple-touch-icon.png |
| Web uygulaması | manifest | /site.webmanifest |
Yolları bozmadan yayına alın
Yayına aldıktan sonra her dosyanın URL'sini doğrudan açın. Yanıt, başarılı durum koduyla bir görsel veya manifest olmalı; yanıltıcı durum koduyla dönen giriş sayfası veya 404 HTML sayfası olmamalıdır.
Site bir alt dizinde bulunuyorsa yolları veya herkese açık temel yolu ayarlayın. Son sayfayı geliştirici araçlarında inceleyin: tarayıcı, başka bir sunucuya yönlenmeden beklenen URL'leri istemelidir.
Sonucu doğrulayın
Önbellek devre dışıyken yeniden yükleyin ve üretilen DOM içindeki link öğelerini inceleyin. Ardından sekmeyi, yer imini ve uygun olduğunda siteyi gerçek cihazın ana ekranına eklemeyi test edin.
Arama sonucundaki favicon ayrıca arama motorunun kurallarına ve tarama takvimine tabidir. Bu nedenle tarayıcıda görünen simge, arama sonuçlarının hemen güncelleneceğini garanti etmez.
Birincil kaynaklar
Sık sorulan sorular
Favicon öğesi body bölümüne mi eklenir?
Hayır. Simgeleri ve manifesti tanımlayan link öğeleri, belgenin head bölümüne aittir.
Kökteki favicon.ico yeterli mi?
Yararlı bir yedektir, ancak Apple Touch simgesini veya kurulabilir manifest simgelerini tanımlamaz. Bu amaçlar için ilgili biçimleri tanımlayın.
Neden / ile başlayan yol kullanılmalı?
Alan adının kökünden başlar ve iç içe bir sayfanın dosyayı kendi klasöründe aramasını önler.