HTML Favicon Ekleme
Favicon dosyalarının nerede görüneceği ne işe yaradığı bilgisini verdikten sonra siteye favicon ekleme için gerekli olan HTML favicon ekleme kodları yer alıyor.
Favicon nedir?
Web sayfaların başlık çubuğunda bulunan küçük simgeye favicon denir.
Site başlığının yanındaki turuncu Y simgesine favicon denir. Sayfa sık kullanılanlara eklenmiş ise sık kullanılanlarda da gözükecektir.
Sayfayı sık kullanılanlara eklediğimde web sayfamda favicon olduğundan sık kullanılanlarda favicon ve sayfa başlığı gözüküyor.
Favicon eklemek için ilk olarak favicon dosyasına ihtiyacımız olacak.
Dosyayı hazır bulabileceğiniz gibi kendinizde yapabilirsiniz.
Favicon simgesi olarak sitenin ilk harfi veya varsa site maskotunun ikonu kullanılabilir.
Favicon ekleme
Favicon eklemenin çeşitli yöntemleri var.
1 – Favicon sitenin ana klasörüne favicon.ico dosya adı ile atılır. Fakat bu kullanımı tavsiye etmiyorum.
2 – HTML <head> etiketi içerisine eklenen <link> kodu href özelliğine favicon dosyasının adresini belirterek.
Kullanım – 1
<link rel="icon" href="favicon adresi" type="image/x-icon" />Kullanım – 2
<link rel="shortcut icon" href="favicon adresi" type="image/x-icon" />Örnek – 1
<link rel="icon" href="https://www.yusufsezer.com.tr/favicon.ico" type="image/x-icon" />Örnek – 2
<link rel="shortcut icon" href="https://www.yusufsezer.com.tr/favicon.ico" type="image/x-icon" />Favicon nereye atılır?
1 – Favicon sitenin ana klasörüne favicon.ico dosya adı ile atılır.
2 – HTML <head> etiketi içerisine eklenen <link> kodu href özelliğine verdiğimiz adrese atılır.
Favicon boyutu
Favicon ikon dosyalarının boyutu 16×16, 32×32, 64×64 ebatlarında yüksekliği ve genişliği aynı olması gerekir.
Dosya yükseklik ve genişliğinin 128×128 üzeri olmamasına dikkat edilmelidir.
Çünkü yükseklik ve genişlik arttıkça, dosya boyutu da artacağından sitenin geç açılmasına neden olacaktır.
Favicon dosya uzantıları
En çok kullanılan ve önerdiğim favicon dosya uzantısı .ico‘dur.
Hareketli favicon ekleme istiyorsanız .gif uzantılı resim dosyaları da kullanabilirsiniz.
İki dosya formatının haricinde .png, .jpg ve .jpeg dosya formatlarını da desteklemektedir.
Hayırlı günler dilerim.