Favicon, web sayfalarının başlık çubuğunda siteyi tanımlayacak küçük resim/logolara favicon denir. Web sayfamızın simgesi de diyebiliriz. Aşağıdaki internet tarayıcısı adres satırının ekran görüntüsünden daha da iyi anlaşılacaktır.

Yukarıdaki ekran görüntüsündeki işaretli yerdeki küçük resimler sitelerin faviconlarıdır.

Bu yazımda web sayfalarımıza favicon simgeleri nasıl ekleyeceğimizi anlatacağım.

Favicon eklemeden önce eklemek istediğimiz sitemizi tanımlayacak bir resim yapmamız gerekmektedir. İnternetten bir resim dosyasını ya da kendi oluşturacağımız bir resim dosyasını favicon olarak kullanabiliriz.

Hangi Tür Resimler Favicon Olur:

Faviconunuz ister resim dosyası olsun, ister simge (icon) olsun fark etmez. Hangi tür resim kolayınıza geliyorsa onu yapabilirsiniz. Aşağıdaki dosyalar favicon olarak kullanılabilir. Hangi tür dosyayı kullanacağınız size kalmış. Ben sitemde ico uzantılı simge dosyası kullanıyorum.

.ico

.jpg

.gif

.png

Yukarıda anlatılanlara göre favicon dosyamızı oluşturduysak sırada kod ile web sayfasına faviconu ekleyeceğiz.

Favicon Ekleme:

Favicon resimler link etiketi ile eklenirler. Bu etiketin detayına girmeyeceğim ama bilinmesi gereken bir şey var o da favicon kodları sitemizin head etiketleri arasına yazılırlar. Aşağıda ekleyeceğimiz kodu göreceksiniz:

<link rel="Shortcut Icon"  href="Resim Dosyası Adresi"  type="image/x-icon">

Favicon, yukarıdaki kod ile web sayfalarına eklenir. Dikkat etmemiz gereken şey href=”” yazan yere simge dosyamızın adresini doğru yazmalıyız.

Örnek:  href=”resim/sitesimge.gif”  ya da    href="http://www.mustafakarsli.com/resim/sitesimge.gif"  şeklinde yazılabilir.

Aşağıda farklı dosya formatlarının verildiği örnekleri inceleyebilirsiniz.

<link rel="Shortcut Icon" href="resim/sitesimge.ico" type="image/x-icon">

<link rel="Shortcut Icon" href="resim/sitesimge.gif" type="image/x-icon">

<link rel="Shortcut Icon" href="resim/sitesimge.jpg" type="image/x-icon">

<link rel="Shortcut Icon" href="resim/sitesimge.png" type="image/x-icon">

Yukarıdaki anlatılanlara göre web sayfalarınıza favicon ekleyebilirsiniz. Haydi sizin de sitenizin simgesi olsun.

Başka derslerde görüşmek üzere. Sağlıcakla kalınız…

Mustafa KARSLI