Favicon Nedir ve Web Sayfanıza Nasıl Eklenir?

“İyi şeyler küçük paketlerde gelir” sözü, mütevazı favicon için de geçerlidir. Bu küçük marka simgeleri, 1990'lı yıllardaki Internet Explorer döneminden bu yana web tarayıcılarında yer alıyor. Günümüzde ise tarayıcı sekmelerinde ve yer imi görünümlerinde karşımıza çıkıyor. Favicon'lar, müşterinin web sitenizi markanızın görsel kimliğiyle ilişkilendirmesine yardımcı olan küçük ama etkili görsel hatırlatıcılardır.

Artık sıradan tarayıcı simgesinin ötesine geçmenin zamanı geldi. Hiç vakit kaybetmeden, markanızı yansıtan ve kullanıcıların çok sayıda sekmenin açık olduğu bir tarayıcı penceresinde web sayfanızı kolayca bulmasına yardımcı olan bir favicon oluşturabilirsiniz.

Favicon nedir?

Favicon, web tarayıcı sekmelerinde sayfa başlıklarının yanında, yer imi çubuklarında, favoriler çubuklarında, tarayıcı geçmişi sonuçlarında ve arama motoru sonuç sayfalarında (SERP'ler) görünen küçük bir simgedir.

İngilizce "favorite icon" (favori simge) ifadelerinin birleşmesinden türeyen favicon, web siteniz için görsel bir yer imi olarak işlev görür ve birden fazla sekme açıkken kullanıcıların bir web sayfasını kolayca tanımasına yardımcı olur. Favicon'lar, bir web sitesi küçültüldüğünde görev çubuğu kısayol simgeleri olarak görünebilir. Kullanıcılar web sitenizi yer imlerine eklediğinde, favicon aynı zamanda yer imi simgesi görevi görür ve web sitesini diğer kayıtlı web sayfaları arasında bulmayı kolaylaştırır.

Bazı işletim sistemlerinde, URL'leri tarayıcı penceresinden masaüstüne sürükleyip bırakmak masaüstü kısayol simgeleri oluşturur. Tarayıcı favicon'ları genellikle kısayol simgeleri olarak da yeniden kullanılır.

Favicon kullanmanın faydaları

• CTR'yi arttırın
• Marka bilinirliği oluşturun
• Kullanıcı deneyimini ve sitede kalma süresini iyileştirin

Favicon, web sitenizin arama motoru optimizasyonu (SEO) sıralamasını doğrudan yükselten sihirli bir araç değildir, ancak diğer kullanıcı deneyimi iyileştirmeleriyle birlikte kullanıldığında, web sayfanızın daha kullanıcı dostu ve profesyonel bir deneyim sunmasına katkıda bulunabilir. Favicon’un web sayfanızın performansını ve kullanıcı deneyimini etkileyebileceği diğer bazı yollar ise şunlardır:

CTR'yi arttırın

Google ve diğer arama motorları arama sonuçlarında favicon'ları görüntüler. Dikkat çekici veya kolayca tanınabilir bir favicon, marka tanınırlığını arttırabilir ve kullanıcıların web sayfanızı ziyaret etme olasılığını yükseltebilir. Bu durum, SEO için önemli bir e-ticaret metriği olan tıklama oranınızı (CTR) arttırır.

Marka bilinirliği oluşturun

Favicon, markanızın logosunu yansıtarak yer imi çubuğunda, web sayfanızın sekmesinde ve SERP’lerde ücretsiz bir reklam alanı gibi işlev görebilir.

Kullanıcı deneyimini ve sitede kalma süresini iyileştirin

Anında tanınabilen bir favicon, kullanıcıların bir web sayfasını yer imlerine ekleme olasılığını arttırabilir. Bu küçük kullanıcı deneyimi iyileştirmesi, tekrar ziyaretleri teşvik ederek web sayfası trafiğinizi ve sitede kalma süresini artırabilir.

Web siteniz için favicon oluşturma kuralları

• Doğru boyutu seçin
• Uyumlu bir dosya formatı seçin
• Animasyonlu bir favicon düşünün

İyi bir favicon, belirli boyut ve dosya formatı gerekliliklerine uyar:

Doğru boyutu seçin

Favicon için ideal boyut 16 piksele 16 pikseldir, ancak bazı favicon'lar 32 piksele 32 piksel veya 48 piksele 48 piksel olarak tasarlanır. 16'ya 16 boyutu tüm web tarayıcı görünümlerinde (adres çubuğu, sekmeler veya yer imi görünümleri) desteklenir. Bu, en güvenli seçimdir.

Uyumlu bir dosya formatı seçin

Kaynak görselin dosya formatı, favicon’un kalitesini etkileyen önemli bir faktördür. Favicon oluşturmak için en yaygın favicon dosya formatları PNG ve ICO'dur. PNG dosyaları, kayıpsız veri sıkıştırması ve şeffaflık içerir, böylece ölçeklendiklerinde görüntü kalitesi bozulmaz. Microsoft Windows Explorer'da kullanılan ICO dosyaları, birden fazla boyutta ve renk derinliğinde bir veya daha fazla görüntü içerir, dolayısıyla iyi ölçeklenebilirler. SVG formatı daha sınırlı tarayıcı desteğine sahip olsa da hızlı yüklenir ve kalite kaybı olmadan farklı boyutlara ölçeklenebilir. Küçültüldüğünde bazı görüntü verilerini kaybeden JPEG gibi formatlardan uzak durun.

Animasyonlu bir favicon düşünün

Animasyonlu GIF'ler veya JavaScript dosyaları canlılık katar ancak bunların kısıtlamaları vardır. Bunlardan birisi tarayıcı uyumluluğudur. Google Chrome'da harika görünen bir şey başka bir tarayıcıda bozulabileceğinden, animasyonlu favicon'unuzu birden fazla tarayıcıda test edin.

Popüler favicon oluşturucular

Marka kimliğinizi tamamlayan özel bir favicon oluşturmak için çevrimiçi bir favicon oluşturucu kullanabilirsiniz. İşte bazı popüler seçenekler:

• Favicon.io, bir görüntü dosyasından, bağlantıdan veya metinden favicon oluşturmanıza ve bunu farklı formatlara dönüştürmenize olanak tanır. Dönüştürülen dosyaları indirin, web sitenizin kök dizinine yerleştirin, bağlantı etiketlerini kopyalayın ve HTML sayfanızın head etiketine yapıştırın.
• RealFaviconGenerator, favicon oluşturmak için ana görüntüyü nasıl işlemesi gerektiğini belirtmenize olanak tanıyan etkileşimli bir API'dir.
• Favicon Generator, platform bazında favicon oluşturabilir, tasarımların farklı platformlarda ve tarayıcılarda nasıl göründüğünü görmenize olanak tanır.
• Dan’s Tools - Favicon.ico & App Icon Generator aracı, mevcut bir görüntüyü yüklemenize ve ICO formatına dönüştürmenize veya simge galerisindeki tasarımlara göz atmanıza olanak tanır.

HTML'e favicon nasıl eklenir?

Web sayfanızın favicon'unu oluşturduktan sonra, tarayıcıların ve web uygulamalarının görüntüleyebilmesi için web sayfanıza yüklemeniz ve kod eklemeniz gerekir.

Favicon’a işaret eden bağlantı, web sitesinin HTML dosyasının <head> bölümünde bir kod satırı olarak görünür. Tarayıcılar, favicon'u bulmak ve görüntülemek için head etiketindeki talimatları okur. Diyelim ki, favicon dosyanız "brandXicon.png" adlı bir PNG dosyası. Bu satırı <head></head> etiketinin içine ekleyin:

<link rel="icon" type="image/png" href="/brandXicon.png">

Favicon dosyası sitenizde herhangi bir dizinde bulunabilir. Örnekte, sitenin kök dizininde, yaygın bir konumda bulunuyor. Dosya yolunun doğru olduğunu kontrol edin.

Birden fazla favicon boyutuna sahip olmak ve hepsini yüklemek de mümkündür. Her boyut için, hepsi <head> </head> etiketinin içinde olmak üzere bir kod satırına ihtiyacınız olacak. Her boyuta benzersiz bir dosya adı verin, koda şöyle bir "boyut" niteliği ekleyin:

<link rel="icon" type="image/png" sizes="16x16" href="/brandXicon16x16.png">

<link rel="icon" type="image/png" sizes="32x32" href="/brandXicon32x32.png">

Shopify web sayfasına favicon nasıl eklenir?

Bir Shopify web siteniz varsa, herhangi bir kodlamaya gerek kalmadan kolayca favicon ekleyebilirsiniz:

1. Bir masaüstü web tarayıcısında, çevrimiçi mağaza yönetici panelinize gidin.

2. Tema düzenleyiciyi açmak için "Temalar" > "Özelleştir" seçeneğini seçin.

3. "Tema Ayarları" seçeneğine tıklayın. Dişli simgesini arayın.

4. Favicon'u seçin (bazı temalarda buna "Logo" denir).

5. Görüntünüzü Mağaza Kitaplığı'ndan seçin veya yeni bir tane yükleyin.

6. Mevcutsa, erişilebilirlik için favicon'un "Alternatif Metin" bölümünü düzenleyin. Bu metin, görsel yüklenemediğinde gösterilir ve ekran okuyucular için kullanılır.

7. Çalışmanızı kaydedin ve favicon'un performansını farklı tarayıcılarda test edin.

Bir iPhone veya Android cihazından favicon ekleme hakkında daha fazla bilgi edinmek için konuyla ilgili Shopify yardım konusuna bakın.

WordPress'te favicon nasıl eklenir?

Çevrimiçi mağazanız bir WordPress web sayfası ise favicon eklemek için adım adım bir kılavuz:

1. WordPress panosuna gidin, Görünüm'e tıklayın.

2. Seçenekler listesi için Özelleştir'e tıklayın.

3. Site Kimliği'ne tıklayın. Bu başlık, slogan ve logo gibi şeyleri kontrol eder.

4. Site Simgesi bölümünde, yeni favicon görüntüsünü yüklemek için Site Simgesi Seç'e tıklayın.

5. Yayına almak için Yayınla'ya tıklayın.

6. Favicon'un çeşitli web tarayıcılarındaki görünümünü test edin.

Wix'te favicon nasıl eklenir?

Bir Wix web sayfası varsayılan bir favicon ile gelir ancak Premium Plan üyeleri bunu özelleştirebilir. Wix sayfanızda favicon'u değiştirmek için:

1. Sitenin panosundaki Ayarlar'a gidin.

2. Favicon'un yanındaki Yönet'e tıklayın.

3. Görüntü Yükle'ye tıklayın veya bilgisayarınızdan bir görüntü yüklemek için Medya Yükle'ye tıklayın.

4. Sayfaya Ekle'ye tıklayın. Favicon'un tarayıcı sekmesindeki görünümünü önizleyin.

5. Kaydet'e ve ardından Yayınla'ya tıklayın.