Favicon Rehberi: Hangi Boyutlar ve Dosyalar Gerekli?

Favicon, tarayıcı sekmesinde, yer imlerinde ve bazı arama sonuçlarında sitenizin adının yanında görünen küçük ikondur. Telefonda siteyi ana ekrana eklediğinizde de aynı ikonun büyük bir sürümü kullanılır. Favicon eksik veya bulanıksa site ilk bakışta özensiz görünür.

Gereken dosyalar

HTML kodu

Dosyaları sitenizin kök dizinine yükledikten sonra sayfaların <head> bölümüne aşağıdakine benzer satırlar eklenir:

• <link rel="icon" href="/favicon.ico" sizes="48x48">
• <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
• <link rel="apple-touch-icon" href="/apple-touch-icon.png">
• <link rel="manifest" href="/site.webmanifest">

Küçük boyutta okunur bir ikon tasarlamak

• Sadeleştirin: 16 piksel çok küçüktür; logonun tamamı yerine simgesini ya da baş harfini kullanın.
• İnce çizgilerden kaçının: İnce çizgiler ve küçük yazılar küçük boyutlarda kaybolur.
• Kontrastı yüksek tutun: Hem açık hem koyu tarayıcı temalarında görünecek bir arka plan rengi seçin. Saydam arka planlı bir ikon, koyu temada kaybolabilir.
• Kare çalışın: Kaynak görseli kare ve en az 512 × 512 piksel hazırlayın; küçük boyutlar bundan üretilir.
• Apple ikonunda kenar boşluğu bırakın: iOS köşeleri otomatik olarak yuvarlar; önemli öğeleri kenarlara çok yakın koymayın.

Değişiklik görünmüyorsa

Tarayıcılar favicon'u uzun süre önbellekte tutar. Yeni ikonu yükledikten sonra eskisi görünüyorsa sayfayı zorla yenileyin veya tarayıcı önbelleğini temizleyin. Arama sonuçlarındaki ikonun güncellenmesi ise arama motorunun siteyi yeniden taramasını gerektirir ve zaman alabilir.

Tüm bu dosyaları, manifest dosyasını ve HTML kodunu tek ZIP içinde hazırlamak için Favicon Oluşturucu aracını kullanabilirsiniz; bir görselden veya birkaç harften başlayabilirsiniz.