HTML'e Favicon Nasıl Eklenir?
Düz bir HTML sayfasına favicon eklemek tek satırlık bir değişikliktir; ancak modern, eksiksiz kurulum altı satırdan oluşur ve iOS, Android, karanlık mod ve PWA kurulumunu kapsar.
Her tarayıcının saygı duyduğu tek etiket <link rel = "icon" href = "/favicon.ico">'dir. favicon.ico'i site kökünüze bırakın ve işlemin %80'ini tamamlayın.
Kalan %20 (apple-touch-icon, PNG çeşitleri, karanlık mod destekli SVG ve web manifestosu) varsayılan simgeyi gösterişli bir marka deneyiminden ayıran şeydir.
Nasıl çalışır
- 1
Favicon paketinizi oluşturun
FetchFavicon paket oluşturucuyu kullanın; ihtiyacınız olan her dosyayı ve yapıştırmaya hazır işaretlemeyi üretir.
- 2
Dosyaları site köküne bırakın
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Parçayı <head>'e yapıştırın
Altı <link> etiketi + bir <meta name="theme-color">.
Hemen deneyin
HTML snippet'ini alın
Favicon OluşturucuSSS
<link> etiketleri nereye gider?+
<head>'in içinde, herhangi bir yerde — </head>'ten önce geldikleri sürece sıra önemli değildir.
Hem .ico hem de PNG'e ihtiyacım var mı?+
Evet. .ico evrensel bir geri dönüştür; PNG, yüksek DPI ekranlarda en keskin görüntüyü verir.
Peki ya karanlık mod?+
<style> bloğunun içine tercih edilen renk şeması medya sorgusunu yerleştiren bir SVG çeşidi kullanın.