Favicon Nedir? Nasıl Yapılır? Seo İçin Önemi Nedir?



Web sitelerinin logosu malum belirli standart yerlerde görüntülenir. Favicon dediğimiz küçük resimler ise browserların üst başlığında, site adının hemen yanında görüntülenir. Web site yer imlerine eklendiğinde bu küçük icon ile tanınır. Ayrıca yoğun bir browser' da fark edilmesi için iyidir. Seo için tavsiye edilen web sitesinin kullanılabilirliğini arttıran, yapılması basit bir ektir. Google tarafından kullanılması da tavsiye edilir.

Nasıl Bir Favicon Oluşturmalı?

Favicon boyut olarak kare olan ebatlardadır. Minimum 16x16 pixel' den oluşur, katları olarak da artabilir. Burada dosya boyutu da önemlidir. Sonuçta hiçbir zaman büyümeyecek küçük bir resmi daha büyük pixel olarak kullanmak mantıklı değildir. Dosya boyutunu da düşünmemiz gerekir.

Resim küçük olduğundan anlaşılabilir bir tasarım için genelde harf tercih edilir. Örneğin web sitenizin baş harfleri olabilir. Bu kaidelerden yola çıkarak yapılacak favicon idealdir.

Favicon Tasarımı

Dosya uzantısı olarak .ico / .icon tercih edilir. Yine de diğer dosya uzantılarından bazılarının (.png, .gif) chrome ve mozilla tarafından desteklendiğini biliyorum. Standartlardan çıkmamak için .ico / .icon tercih edilmesi daha uygundur.

Eğer Photoshop' da favicon oluşturacaksanız. Çalışmanızı kaydedeceğiniz .ico / .icon formatı varsayılan olarak bulunmaz. Şu adrese girerek eklentiyi edinirseniz .ico dosya kaydedebilirsiniz. Daha sonra indirdiğiniz dosyayı adobenin kurulu olduğu dosya yolu "C:\Program Files\Adobe\Photoshop \Plug-Ins\" içerisine yapıştırın. Photoshop' u kapatıp açtıktan sonra .ico olarak dosya kaydede-bileceksiniz.



Bazı online araçlarda bulunuyor. Herhangi bir grafik uygulaması kullanmak istemiyorsanız online araçlara da bakabilirsiniz. Şunu deneyin http://www.favicon.co.uk

Web Sitesinde Favicon Nasıl Kullanılır?

Oluşturduğunu favicon dosyasını <head></head> tagları içerisine <link rel="shortcut"> tagı ile ekliyoruz. Favicon.ico dosyanızı kök dizine yükledikten sonra şu kodu yapıştırın.

 
<link rel=”shortcut icon” href=”www.example.com/favicon.ico">

2010 Html5 standartlarına göre rel="ICON" tanımlaması da link tag ına eklendi. Bu kod üstteki ile aynı yalnızca shortcut ibaresi yer almamaktadır.. Aynı zamanda desteklenen browserlar: Chrome, FireFox, Opera, Safari ve IE11.

 
<link rel=”shortcut icon” href=”www.example.com/favicon.ico”>

IE9 ve üstü için;
 
<link rel=”icon” href=”www.example.com/favicon.ico” type=”image/vnd.microsoft.icon”>

veya png için;
 
<link rel=”icon” href=”www.example.com/favicon.png” type=”image/png>

yada gif için;
 
<link rel=”icon” href=”www.example.com/favicon.gif” type=”image/gif”

Blogger İçin Favicon Kullanımı

Bloggerda favicon kullanımı oldukça basittir. Favicon.ico dosyanızı oluşturduysanız Yerleşim > Sık Kullanılan Simge > Düzenle adımlarını izleyin ve açılan pencerede favicon.ico dosyanızı yükleyin. Hepsi bu kadar.


Son Olarak: Favicon' un Seo İçin Önemi Nedir?

Favicon' un iki adet önemi görünüyor. Biri yer imleri için diğeri ise web sitesinin kullanılabilirliği. Kullanılabilirlik seo açısından önemli bir kriterdir. Bir web sitesi ne kadar işlevli ve Google kriterlerine dikkat ediyorsa o kadar rekabette var demektir. Bu nedenle hiç olmamasındansa online araçları kullanarak siteniz için favicon oluşturmanızı tavsiye ediyorum.


Başka bir yazıda görüşünceye dek hoşçakalın :)

2 yorum

  1. Hocam çok ayrıntılı bir biçimde yazmışınız makalelerinizi takip ediyorum. Tebrik etmeden geçemedim bir yorum bırakayım dedim.

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederim :) Bilirsin seo için backlink önemli olduğu kadar, içerik orjinal olduğunda hem okuru böylece arama motorunu da cezbeder :)

      Sil

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0