Favicon Nedir? Favicon Nasıl Yapılır?

Web siteler için ve marka bilinirliği için oldukça fazla önem arz eden favicon her siteyi ziyaret ettiğimizde veya arama sonuçlarında karşımıza çıkmaktadır. Hazırladığımız bu yazımızda favicon nedir? favicon nasıl yapılır? icon ölçüleri nelerdir? gibi merak ettiğiniz pek çok soruyu hazırladığımız yazımız da bulabilir kendi web sitenizde deneyebilirsiniz sadece yazı değil eklediğimiz videoları izleyerek de istediğiniz iconları oluşturabilir ekleyebilirsiniz.

Favicon Nedir? Ne Demek?

Favicon, tarayıcıların sekme bölümünde web sitenin küçültülmüş logosu olarak kullanılmaktadır. Siteyi ziyaret eden kullanıcılarda marka bilinirliği yaratabilmek için mutlaka kullanılması gerekmektedir.

Kısayol simgesi, web site iconu, url iconu, gibi görsellerin küçük simgeleştirilmiş halleridir. Genellikle grafik tasarımcılar tarafından veya hazır programlar tarafından belirli standartlaşmış ölçüler ile oluşturulmaktadır.

Faviconlar genellikle tarayıcının sol köşesinde gözükmektedir. Aşağıda bizim sitemizin iconu yer alıyor.

favicon-nedir-favicon-nasil-yapilir-1
 İcon Örneği

İcon, title sol tarafında bulunmaktadır. sıklıkla 16×6 boyutunda kullanılmaktadır bu standart olarak kullanılmaktadır. İconlar sadece tarayıcıların sekme bölümünde değil serp yani arama sonuçları bölümünde de gözükmektedir.

favicon-nedir-favicon-nasil-yapilir-2
İconların mobil serp görünümü

Favicon Nasıl Yapılır?

İcon ekleme nasıl yapılır diye merak ediyorsanız aşağıda yer alan adımları uygulayarak kendi sitenize istediğiniz şekilde icon oluşturabilir ve icon ekleyebilirsiniz. Eğer aşağı da yer alan adımları uygulamak istemiyorsanız eklediğimiz iki videoyu da izleyip kendi istediğiniz iconları oluşturabilirsinz.

  1. Photoshop programını açın.
  2. 32×32 pixel ölçülerine uygun bir dosya oluşturun.
  3. Web sitenin logosunu ortaya ekleyip küçültün.
  4. Küçülttüğünüz logoyu .gif formatında bilgisayara kaydedin.
  5. .gif uzantılı dosyayı icona dönüştürmek için favicon generator sitesine giriş yapip yükleyin.
  6. “Generate icon” tıklayın ve iconu indirebilirsiniz.
  7. WordPress sitesinin içerisinde head kodları ortasına iconu ekleyebilirsiniz.

Favicon Nasıl Eklenir

SEO ve kullanıcı deneyimi açısından oldukça önemli olan iconları kullanmak için öncelikle 16×16 boyutlarında icon oluşturmalısınız. İcon oluşturabilmek için pek çok farklı programdan yararlanabilirsiniz.

  • İcon ekleyeceğiniz sayfanın <head> </head> html formattaki etiketlerin ortasına ekleyebilirsiniz.
  • Favicon ekleme için kod bölümünde href ekleyeceğiniz görselin bulunacağı yeri göstermektedir.
  • <link rel=”seo icon” href=”favıcon.ico”>

Favicon Ölçüleri

SEO açısından oldukça önemli olan favicon ölçüleri standart boyutları bulunmaktadır. Kare veya transparan olarak kullanılmaktadır. Aşağıda kullanabileceğiniz icon ölçüleri listeledik inceleyebilir web sitenizde bu icon ölçülerini kullanarak ekleyebilirsiniz.

  • 16×16
  • 32×32
  • 48×48
  • 64×64
  • 128×128

İlginizi Çekebilecek Yazılarımız

İcon Tarihi

İcon ilk olarak 1999 yılında internet explorer 5 de kullanılmıştır. Sık kullanılan sayfalar da sayfa yer imlerine ve adres çubuklarına eklenerek kullanılmıştır. Sayfanın kök dizini içerisine eklenmiştir. İcon kullanılmasının ortaya çıkmasın da en önemli sebep kullanıcıya serp te istediği sayfayı bulabilmesine yardımcı olabilmek için hatırlamasını sağlamasıdır.

İcon kullanımı 1999 yılında html4.01 içerisinde www consortium tarafından belirli standartlara oturultuldu. Daha sonraki dönemler de xhtml1.0 içerisinde <head> rel bağlantısı olarak kullanılmaya başlandı.  Kullanılacak iconun dosya ve konumunu belirlemek için web sitenin bulunduğu sayfalara göre ekleme yapma değiştirilebilir.

2003 yılına gelindiğinde MIME türü olarak bilinen .ico formatı internette atanmış numaralar kurumu bu ölçüleri üçüncü kaynaklar olarak kabul etti.  İlk olarak explorer tarayıcısında kullanılmaya başlandı ve standart ölçülerde kullanılmaya devam etti.

Ortaya çıkmasından kısa bir süre sonra icon ile ilgili bazı tartışmalar ortaya çıktı. Bu tartışmalar içerisinde site hızını olumsuz etkilediği ve 404 sayfalara neden olabileceği ile ilgili oldukça fazla tartışma yapıldı fakat günümüze gelindiğinde siteler için vazgeçilmez bir görsel unsur halini aldı.

SEO ile İlişkisi Nedir?

  • İcon kullanmak SEO çalışmaları açısından oldukça önemlidir. Özellikle kullanıcı deneyimi içerisinde markanızın ve sitenizin bilinirliği algısını yaratabilir.
  • Sitenizin serp bölümünde icon sahip olması güvenilir olduğunuzu gösterebilir ve tıklamaya sebep olabilir.
  • Kullanacağınız iconun görsel olarak düşük kb sahip olmasına dikkat edin.
  • Mutlaka sitenin logosunu kullanın ve akılda kalmasını isteyeceğiniz dikkat çekici bir logo oluşturun.
  • İcon yükledikten sonra sitenizin hızını ve sitenizin yüklenmesi sırasında hızının azalmamasına dikkat edin ve bunları test ederek düzeltin.

Kullandığımız Kaynaklar

İcon Nedir?

İcon Vikipedia

İbrahim Şahin
Author

İbrahim Şahin, SEO uzmanı ve SEO & Sosyal Medya, Dijital Pazarlama Yayınları Yapan SEO Defteri Kurucusudur. Teknik SEO, Semantik SEO, Google Algoritmaları, Kullanıcı Deneyimi, Sosyal Medya, Veri Bilimi, Siber Coğrafya ve Dil Bilimi İlgi Alanlarıdır. 2018'den beri SEO, Dijital Pazarlama ve Sosyal Medya Sektöründe Aktif Olarak Proje Yönetmektedir. SEO ve Dijital Pazarlama Sektörlerinden Elde Ettiği Tecrübeleri Paylaşmak ve Doğru Bilgiye Ulaşmayı Kolaylaştırmak için SEO Defteri Blogunu Kurmuştur. Group DP Şirketinde Search Engine Optimization Specialist Pozisyonunda Proje Yönetmeye Devam Etmektedir.