Favicon Nedir? Nasıl Kullanılır?

Site ikonu, sekme ikonu, kısayol simgesi veya yer imi ikonu olarak farklı kullanım alanlarına göre farklı şekillerde Türkçe’ye çevirebileceğimiz Favicon, ismi ve hatta çevirileriyle kafa karıştırabilse de, aslında internet kullanıcılarının hayatında boyutuyla ters orantılı olarak önemli bir yer tutuyor. Her gün rastladığımız bu ikon, kullanılacağı alana göre değişmekle birlikte genelde 16×16 pikselde hazırlanan küçük, simgesel ikonlar olarak tanımlanabilir. Kullandığınız web tarayıcınızın en üst bölgesindeki sekmeler kısmına bakarsanız karşınıza birçok farklı favicon çıkacaktır. Sizin de göreceğiniz gibi sekmelerinizde açtığınız farklı internet sitelerinin birbirinden farklı favicon’ları bulunuyor. Favicon simgeleri ayrıca bilgisayarların masaüstü ekranında ve akıllı cihazların ana ekranlarında da uygulama sembolü olarak kullanılmaktadır.

“Favicon Nedir? Nasıl Kullanılır?” yazımızı inceleyerek tüm detayları ile favicon dünyası ile ilgili ayrıntılı bilgi alabilirsiniz. 

Favicon Nedir?

Favicon, markanız için önemli simgelerden biridir. Küçük bir piksel simgesi olarak favicon simgesinin ana amacı, birden fazla sekme açıkken ziyaretçilerin sayfanızı daha kolay bulmasına yardımcı olmaktır. Ayrıca simgenizin başka markalarla karıştırılmaması için özgün olmasına dikkat etmelisiniz. 

Küçük boyut alanlarından dolayı, favicon’lar özellikle markanızı tanımlayan tek bir simge olarak kullanıldığında daha etkili ve akılda kalıcıdır. 

Favicon hayatımıza ilk olarak Mart 1999‘da Microsoft’un Internet Explorer 5‘in yeni “Sık Kullanılanlar” sekmesinin tanıtmasıyla hayatımıza girdi. Microsoft’un terminolojisi, Internet Explorer’daki eski yer imlerini “Sık Kullanılanlar” (İngilizce’de favorites veya bookmarks) olarak adlandırmıştı. Favoriler sekmesindeki yer imleri, her URL’nin yanına bir favori simgesi ekleme seçeneğine sahipti. Favicon adını da bu hikayeden alıyor; Favicon, isim olarak favori ikon “favorite icon” tanımlamasının kısaltılmış halidir. 

2001’de ise diğer internet tarayıcılarının da harekete geçmesiyle favicon simgesi daha da görünür olacağı tarayıcı sekmelerine de taşındı. Günümüzde ise akıllı cihazlardaki ana ekran simgelerinde de favicon’u görmek mümkün. 

Peki “Favicon Nasıl Kullanılır?” Yazımızın devamında bu sorunuza cevap bulabilirsiniz.

Favicon Nasıl Yapılır?

Sekme ikonu veya Favicon oluşturmadan önce markanızın logosunu ve renklerini gözden geçirmelisiniz. Daha sonrasında Favicon oluştururken bu logonuzun bir kısmını veya hepsini ve marka renklerinizi kullanabilirsiniz. Favicon oluştururken en büyük amacınız markanızın sekmeler alanında kaybolup gitmesinin önüne geçmektir. 

Favicon oluşturmak için Fireworks, Photoshop, Canva, Corel Paint gibi bir fotoğraf düzenleyici veya GIMP gibi ücretsiz, açık kaynaklı bir alternatif kullanabilirsiniz. Birçok işletme, tutarlı marka kimliğini desteklemek için Favicon simgesi olarak da  şirket logosunu kullanır.

Düzenlemeyi kolaylaştırmak için 64 x 64 piksellik bir kareyle başlayın ve daha sonra 16 x 16 piksele kadar tasarımınızı küçültün. Ardından dosyayı .jpg, .png, .gif, .bmp veya .tif olarak kaydetmeniz gerekir. Ardından favicon tasarımınızı favicon.ico formatına dönüştürmeniz gerekebilir. Bu, çoğu web tarayıcısı tarafından desteklenen önerilen biçimdir; fakat bazı tarayıcılar başka dosya türleri ve farklı boyutları da kabul etmektedir. 

Görselinizi .ico biçimine dönüştürmek için, iconifier.net, prodraw.net veya faviconer.com gibi çevrimiçi bir araç kullanmanız gerekebilir; tasarımınızı yükleyip simge boyutunu seçtikten sonra yeni .ico dosyanızı kaydedebilirsiniz.

Favicon İçin Gerekli Dosya Biçimleri Nelerdir?

Favicon dosyaları genel olarak .ico biçiminde kullanılıyor olsa da kullanımına göre değişiklik gerektirebilir.

Örneğin, Google Chrome, Android ve Opera, dolgu üzerinde PNG formatında ve farklı alanlarda ikonu gösterebilmek için 192×192 and 512×512 boyutlarında dosya kabul etmektedir. Ayrıca logonun gözükmesi için internet sitenize özel bir manifest.json kodu yazmanız gerekebilir. 

Apple ise kullanıcıların ana ekranında göstermek için dolgu üzerinde, PNG dosya türünde 60×60, 76×76, 120×120, 152×152 ve 180×180 boyutlarında dosya talep etmektedir. 

Birçok bilgisayar uygulaması için PNG formatında, 16×16, 32×32 ve 48×48 boyutlarında saydam arka plana sahip logo gerekmektedir.

Öte yandan, Safari internet tarayıcısı vektör formatında bir SVG dosyası olarak istemektedir. 

Favicon Boyutları Nelerdir?

Kullanıcılar,“Favicon Nedir?” sorusu kadar favicon boyutlarını da merak etmektedir. Tıpkı dosya biçimlerinde olduğu gibi, Favicon boyutları da internet tarayıcıları arasında farklılık göstermektedir. 

Apple, kullanıcılarının ana ekranında göstermek için Apple Touch favicon’ları istemektedir. Apple için PNG dosya türünde 60×60, 76×76, 120×120, 152×152 ve 180×180 boyutlarında dosya kabul etmektedir.

Google Chrome, Android ve Opera, dolgu üzerinde PNG formatında 192×192 and 512×512 boyutlarında dosya kabul etmektedir. 

Birçok bilgisayar uygulaması için PNG formatında, 16×16, 32×32 ve 48×48 boyutlarında saydam arka plana sahip logo gereklidir.

SVG formatında dosya isteyen Safari ise, dosyanın daha sonra kendileri tarafından otomatik olarak şekillendirilebilmesi için viewBox attribute ayarlarının “0 0 16 16” olarak ayarlanmasını talep etmektedir. 

Siteye Favicon Nasıl Eklenir?

Günümüzde sitenize bir simge eklemenin en kolay yolu, hosting hizmetinizin (yer sağlayıcı) Dosya Yöneticisi’ne .png veya .ico dosyası olarak görseli yüklemektir. Bu yöntem için ikonu, favicon olarak tanımlamanız faydalı olacaktır; böylece internet tarayıcıları logoyu otomatik olarak algılayabilir. 

Ayrıca web sitenizin HTML sayfasını da düzenleyebilirsiniz. .ico dosyasının web sitenizin kök dizinine (root directory) yüklenmesi gerekir. Daha sonra adresinize gittiğinizde simge görünür olmalıdır. Modern tarayıcıların çoğu, herhangi bir kod eklemeye gerek kalmadan favicon dosyanızı bulacaktır, ancak tüm uygulamaların onu düzgün şekilde görüntülediğinden emin olmak için, sayfanızın <head> başlığı altına bu kodu ekleyin: <link rel=”icon” type=”image/png” sizes=”16×16″ href=”favicon-16×16.png”>

iOS sistemlerinin favicon simgenizi algılayabilmesi için aşağıdaki kodları eklemelisiniz: 

<link rel=”apple-touch-icon” sizes=”57×57″ href=”apple-icon-57×57.png” />

<link rel=”apple-touch-icon” sizes=”72×72″ href=”apple-icon-72×72.png” />

<link rel=”apple-touch-icon” sizes=”114×114″ href=”apple-icon-114×114.png” />

<link rel=”apple-touch-icon” sizes=”144×144″ href=”apple-icon-144×144.png” />

<link rel=”apple-touch-icon” type=”image/png” sizes=”167×167″ href=”favicon-167×167.png”>

<link rel=”apple-touch-icon” type=”image/png” sizes=”180×180″ href=”favicon-180×180.png”>

Android 2.2 ve üstü sürümler de bu kodları okuyabiliyor, böylece ek bir koda ihtiyaç duymadan favicon simgenizin Android sistemlerde de gözükeceğinden emin olabilirsiniz.

Google ve Chrome için ise aşağıdaki kodları mutlaka eklemelisiniz: 

<link rel=”icon” type=”image/png” sizes=”48×48″ href=”favicon-48×48.png”>

<link rel=”icon” type=”image/png” sizes=”192×192″ href=”favicon-192×192.png”>

Favicon Kullanmanın Avantajları Nelerdir?

Favicon simgesi kullanmanız gerçekten de bir gereklilik. Üstelik favicon simgesinin birçok avantajı da var. İdeal olarak iyi bir favicon simgesi, markanızın farkındalığını ve bilinirliğini arttırır; müşterilerinizin sitenizi tekrar ziyaret etmesini ve marka sadakatini teşvik eder; Tekrarlayan ziyaretleri ve marka sadakatini teşvik eder; internet sitenize daha güvenilir, saygın ve profesyonel bir görünüm kazandırır ve site kullanılabilirliğini ve deneyimini artırarak dolaylı olarak SEO (arama motoru optimizasyonu) faydaları sunar.

Kullanıcı Deneyimini Artırır

Dikkat çekici bir Favicon, ziyaret eden kişilerin sayfanızı yer imlerine kaydetme olasılığını artırabilir; bu da Google’ın sitenizi SEO açısından güçlü bir sayfa olarak desteklemesine yol açabilir. 

Ayrıca, favicon simgeniz kullanıcıların geçmiş (history) listesinde de dikkat çekeceğinden kolayca tekrar ulaşılabilir ve haliyle sitenize dönüş oranını artırabilir. 

İlgili İçerik: UX ve UI Nedir?

Güvenilirliği Artırır

Ziyaretçilerinizin sitenizde logonuza benzer bir favicon görmesi marka imajınızı güçlendirmenin yanı sıra, sitenizin güvenilirliğini de artırır. Logonuza veya marka renklerinize benzeyen bir Favicon simgesini sekmede görünce ziyaretçileriniz doğru adrese geldiklerinden ve markanızın güvenebilecekleri bir internet sitesine sahip olduğundan emin olacaktır.

Marka Bilinirliğine Katkı Sağlar

Sembollerin insan tarihi içerisindeki yerini ve insan algısı üzerindeki etkisini siz de fark etmişsinizdir. Atalarımızın mağara duvarlarına yaptıkları resimlerden, hiyerogliflere, kalp sembolünden ying yang sembolüne kadar tüm tarihimiz sembollerle dolu. Modern dünyada da görür görmez hatırladığımız, belli duygular, kelimeler ve hatta anılarla ilişkilendirdiğimiz marka logoları var. Semboller bu kadar güçlüyken marka bilinirliğine katkı sağlamak için onları kullanmamak ise olmaz.

E-ticaret sitenize uygun kullanacağınız favicon ikonu, çok fazla sekmenin açık olduğu internet tarayıcılarında kolayca fark edilmenizi sağlayabilir. Böylece sitenizi açan fakat daha sonrasında diğer açık sekmeler arasında dolanan potansiyel müşterileriniz sizi hatırlayarak internet sitenize geri dönüş yapabilir. 

İlgili İçerik: Marka İmajı Nasıl Oluşturulur?

Favicon Örneği

ikas‘ın favicon simgesini aşağıdaki ekran fotoğrafında görebilirsiniz:

Marka logomuzla uyumlu olacak şekilde tasarlanmış olan Favicon simgemiz, ayrıca renkleriyle diğer sekmeler arasında da öne çıkmayı hedefliyor. 

Etkili Favicon Nasıl Oluşturulur?

Basit Tutun

Favicon simgesini hazırlarken bazı limitasyonlarla karşılaşabilirsiniz. Düşündüğünüz Favicon sembolünün gerekli tüm boyutlara uygun olacak şekilde aynı anda hem görünür, hem de dikkat çekici olması gerekiyor. Bütün bu özellikleri karşılayabilecek bir simge hazırlamanız için mümkün olduğunca basit düşünmeniz ve tasarlamanız gerekecektir. Emin olun, sembolünüz sizin gözünüze sade gelse dahi, etkisi bu şekilde daha fazla olacaktır. 

Metin Kullanmamaya Özen Gösterin

Takdir edersiniz ki, favicon alanınıza metin kullanmanız pek de mümkün olmayacağı gibi çok mantıklı da değil. Favicon tasarımınızda kullanacağınız uzun metinler, o kadar küçük alanlarda ne yazık ki yeterli kadar gözükmeyecek ve pek de dikkat çekmeyecektir. Haliyle, favicon simgenizi tasarlarken kelimelerden çok sembollere ve tasarımlara daha çok ağırlık vermeniz yerinde olacaktır. Bazen sembollerin kelimelerden daha güçlü anlamlar taşıyabileceğini unutmayın!

Marka Logonuzu Kullanın

Favicon simgeniz, isim ve kullanım olarak marka logonuzdan nispeten farklıdır. Fakat, marka görsel dilinizin her platformda birbirine benzer olmasına ve kullandığınız her görselin direkt olarak markanızı çağrıştırmasına dikkat etmelisiniz. Haliyle favicon simgenizde de markanızın logosundan esintiler olmasını öneririz. Marka logonuz çok uzunsa, en dikkat çekici olduğunu düşündüğünüz kısmını keserek de favicon simgeniz olarak kullanabilirsiniz. 

İlgili İçerik: Logo Tasarım: Bu 7 Adımı Bilmeden Tasarıma Başlamayın

Marka Renklerini Kullanın

Daha önce de bahsettiğimiz gibi, favicon marka bilinirliğinizin önemli bir parçasıdır. Tüm mecralarda markanızın görsel dilinin uyumlu ve tutarlı olması, markanızın bilinilirliğini ve marka sadakatini artıracaktır. Haliyle favicon sembolünüzde markanızın renklerinin bulunması direkt olarak markanızı çağrıştıracaktır. Marka renklerinizin küçük bir alanda yeterince dikkat çekmeyeceğini düşünüyorsanız logonuzun bir kısmını keserek dikkat çekeceğini ve uyumlu olacağını düşündüğünüz farklı renk kombinasyonlarından oluşan bir favicon sembolü kullanabilirsiniz.

“Favicon Nedir?” adlı yazımızda, favicon’a dair tüm detayları sizlerle paylaşmaya özen gösterdik. Diğer faydalı blog içeriklerimize erişmek için web sitemizi ziyaret etmeyi unutmayın!

İlgili İçerik: Pazarlamada Doğru Renk Kullanmanın Önemi

İlginizi Çekebilecek Diğer İçeriklerimiz:

• Dijital Pazarlama Nedir?
• Landing Page Nedir?
• WebP Nedir?