Favicon Nedir?

Favicon Nedir? : Favicon ifadesini size en kısa şekilde anlatacak olursam, küçük ikon şeklinde sitenin ana sekmesinin başında yer alan 16px genişliği ve 16px uzunluğa sahip jpeg, png veya her hangi bir türünde olan fotoğraftır. Tüm sitelerde bulunması gereken bu ikon arama motorları sıralamalarında etkisinin az da olsa olduğunu söyleyebilirim. Bu ikonun sitenizin logosundan bir kesit veya sizi temsil eden bir bakışta anlaşılır bir öge üzerinde çıkarmanızı önermekteyim.

Favicon Web sitelerinde olması gereken açılan sekmenin hemen solunda çıkan küçük 16px / 16px boyutunda ikondur. Sitenizin güvenilir olduğunu kullanıcılara yansıtmanız için bir kriterdir.

Web sitenizi temsil eden logo veya markanızın bir harfinden oluşan küçük fotoğrafa denir. Web sitesi açıldıktan sonra sekme üzerinde bulunan küçük ikona verilen isimdir.

Favicon Web sitesini her hangi bir elektronik ortam üzerinde paylaştığınız zaman çoğunlukla gözükmektedir. Web Tasarım Konusunda da sizlere destekleyici olacaktır. Sosyal medya paylaşımlarında da her hangi bir sayfayı veya blog paylaşımızını paylaştığınız zaman hemen doğrudan bu ikon paylaşım kartınızda eklenecektir.

Not : Diğer farklı favicon boyutları bazı platformların istediği favicon setlerinden de sizlere aşağıda uygulamalar sırasında bahsedeceğim ve kodlarını da sizlerle paylaşacağım.

Siteye Favicon Nasıl Eklenir?

Siteye favicon eklemek için bir çok yolu vardır. Bu işlem oldukça basit bir işlemdir tek bir satın kod ile yapabilirsiniz. Sizlere bu işlemin nasıl yapılacağını aşağıda maddeler halinde belirteceğim. Sırasıyla ve doğru uyguladığınız taktirde sitenizin bulunduğu sekmede ikon çıkacaktır.

Uygulama;

  • 16px genişlik ve 16px yükseklik sitenizin favicon çalışmasını oluşturun. Bu siteden oluşturabilirsiniz : Favicon Oluşturma
  • Ardından bu yapmış olduğunuz çalışmayı sitenizin ana klasörüne atın.
  • Oluşturmuş olduğunuz fotoğrafın ismini uzantısıyla beraber href=”…” etiketinin içine yazmayı unutmayın.
  • Daha sonra sitenizin her sayfasında olacak şekilde HEAD etiketlerinin arasında aşağıdaki meta kodunu yazıyorsunuz.

Sonuç olarak bu şekilde ikonu farklı olarak sonuç alabilirsiniz.

Favicon Örnekleri

Kod: (favicon.png değişebilir!)

..
  <head>
    <link rel="shortcut icon" href="favicon.png">
  </head>
..

Favicon Ne işe Yarar?

Favicon sitenize bir duruş ve prestij kattığı gibi arama motorlarında da sizlere artı sağlamış olur. Yani böylelikle sizi bir adım öne taşıma işleminde yardımcı olmaktadır. Sitenizin favicon alanının dolu olması kullanıcılar açısından da çok iyi olmakla beraber sitenin güvenilirliğini yükseltme konusunda avantaj olacaktır. Site puanı da aynı şekilde yükselecektir.

Diğer Platformların İcon Kodları

Yukarıdaki kod gibi HEAD bölümü içine yazılan aşağıdaki kodlar diğer platfomların istediği paylaşım yapıldığında çıkacak ikonların kodlarıdır. Eklemeniz sizin yararınıza olabilir. Yukarıdaki favicon’u eklemeniz ilk aşamada işinizi görecektir.

..  
  <link rel="apple-touch-icon" sizes="57x57" href="ikon.png" /> <!-- 57px x 57px -->
  <link rel="apple-touch-icon" sizes="72x72" href="ikon.png" /> <!-- 72px x 72px -->
  <link rel="apple-touch-icon" sizes="114x114" href="ikon.png" /> <!-- 114px x 114px -->
  <link rel="apple-touch-icon" sizes="144x144" href="ikon.png" /> <!-- 144px x 144px -->
  <link rel="shortcut icon" sizes="196x196" href="ikon.png"> <!-- 196px x 196px -->
  <meta name="msapplication-TileImage" content="ikon.png"> <!-- 320px x 320px -->
..

Web tasarım ve diğer tüm Web konuları hakkında tüm sorularınızı aşağıdaki form üzerinden bana iletebilirsiniz. Sizlere en kısa süre içinde cevap vermeye çalışacağım. Şimdiden bu konuyla ilgilenen arkadaşlara iyi çalışmalar diliyorum.

Favicon Nedir?
Etiketlendi: