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.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
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.
İlgili araçlar
Favicon Oluşturucu
Her cihaz ve tarayıcı için eksiksiz bir favicon paketi (ICO + PNG) oluşturun.
PNG'den ICO'ya Dönüştürücü
Windows ikonları, uygulama simgeleri ve web sitesi favicon'ları için ücretsiz online PNG'den ICO'ya dönüştürücü.
Favicon denetleyici
Herhangi bir sitenin favicon'unu kontrol edin — boyutları, formatları ve eksik varyantları doğrulayın.