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

Bu gönderi en son 8 Mayıs 2022 tarihinde güncellendi.

Bir site oluştururken, çoğumuz büyük bir fark yaratabilecek küçük bir son dokunuşu gözden kaçırırız: Favicon. Web tasarımınıza yapılan bu küçük eklemeler, gerçek boyutlarından çok daha büyük bir etkiye sahip. Bu nedenle güçlerini ve önemlerini hafife almayın.

Peki ama, faviconu web tasarımında bu kadar güçlü bir unsur haline getiren ne?

Favicon nedir?

Favicon, bir web sitesini veya bir web sayfasını temsil etmek için tarayıcılarda kullanılan küçük, 16x16 piksellik bir simgedir.

Türkçe'de 'favori simge' anlamına gelen 'favorite icon' ifadesinin kısaltması olan favicon, en yaygın olarak bir web tarayıcısının üst kısmındaki sekmelerde görüntülenir.

Peki favicon ne işe yarar ve nerelarde kullanılır?

Web sitenizin simgesi veya web sitenizi internette tanımlamanız için görsel bir işaret görevi görür.

Faviconun kullanım alanlarını sıralamak için uzun bir liste yapabiliriz; fakat en önemli ve en görünür olduğu alanları aşağıdaki gibi sıralayabiliriz:

• Sekme ikonu

• Google arama sonuçları

• Mobil arama sonuçları

• Tarayıcılar ve tarayıcı geçmişi

• Arama geçmişi

• URL ikonu

• Bookmarklar (Yer imi ikonu)

• Sık kullanılanlar

Gelin aşağıda görsel olarak favicon'nun yer aldığı farklı yerleri görelim;

Web tarayıcısında bir favicon örneği:

Yer imi çubuğunda favicon:

Tarayıcı geçmişinde favicon:

Arama sonuçlarında favicon:

Favicon neden önemlidir?

Küçücük boyutlarına rağmen faviconlar, kullanıcı deneyimini, markalaşma çabalarını ve profesyonelliğini geliştirerek web sitesi görselliği açısından büyük önem taşır.

Kullanıcı deneyimi (UX):

Favicon, web siteniz için akılda kalıcı görsel bir ipucu olarak kullanıcı deneyimini geliştirir. Kullanıcıların sitenizin sekmesini tarayıcılarında ve yer imi çubuğu gibi farklı uygulamalarda kolayca bulmasına yardımcı olarak siteye tekrar tekrar gelinmesini kolaylaştırır.

Mobilde deneyimi:

Mobil siteniz söz konusu olduğunda da kullanıcı deneyimi üzerinde olumlu bir etkiye sahip olabilir. Mobil cihazlarda web tasarımı tamamen bir etki yaratmakla ilgilidir ve çoğu zaman bunu harika bir favicondan daha güçlü veya kolay bir şekilde yapan başka bir unsura rastlamak zordur.

Markalaşma:

Gerçekten uyumlu bir marka için en küçük ayrıntıları bile gözden kaçırmamak çok önemli. Minicik boyutuyla favicon, stilinizi ve dilinizi sitenin dışına taşıyarak web sitenizin markalaşmasına ve görünürlüğüne katkıda bulunur.

Güvenilirlik:

Faviconların, sitenizin güvenlik düzeyi üzerinde hiçbir etkisi olmasa da görünüşe göre kullanıcılar, faviconu olan sitelere daha fazla güveniyor. Bunun nedeni, sizi markalı veya markasız bir arama yoluyla bulup bulmadıklarına bağlı olmaksızın, kullanıcılara açıkça sitenizde olduklarının sinyalini vermeleridir.

Kullanıcı geri dönüşü:

Faviconlar, sitenizin arama sonucu sayfalarında veya kullanıcıların tarayıcı geçmişlerinde öne çıkmasını kolaylaştıran güçlü bir marka tanımlayıcısıdır. Bu nedenle, ayırt edilebilir bir favicon, kullanıcıların sitenize daha sık dönmesine yardımcı olur. Üstelik kullanıcılar, sitenize yer imi koyduklarında favicon, sitenizin kayıtlı diğer sayfalar arasında bulunmasını da kolaylaştırır.

Favicon nasıl yapılır?

Öncelikle favicon, markanızın logosunun basitleştirilmiş bir uyarlaması olmalıdır.

Favicon oluşturma yada ekleme için;

• Profesyonel bir tasarımcı tutabilirsiniz

• Online bir tasarım programını kullanarak bir favicon oluşturabilirsiniz

Wix Logo Oluşturucu, ile tarzınızı ve ihtiyaçlarınızı en iyi şekilde yansıtmak için profesyonel ve kişiselleştirilmiş bir favicon oluşturabilirsiniz.

İleriki bölümlerde favicon tasarım ipuçlarını gözden geçireceğiz; fakat şimdi akılda tutulması gereken bazı önemli kurallara değinelim:

Boyutlar

Bir favicon oluşturmak için en uygun boyut, en sık görüntülendiği boyut olan 16x16 pikseldir.

Aşağıda bazı standart favicon boyutlarına ve her birini ne zaman kullanmanız gerektiğine ilişkin bilgilere yer verdik:

16x16: Tarayıcı faviconu

32x32: Görev çubuğu kısayolu faviconu

96x96: Masaüstü kısayolu faviconu

180x180: Apple touch faviconu

Dosyalar

Geçmişte orijinal formatı ICO idi. Günümüzdeyse faviconlar için tercih edilen dosya biçimi veya vektörel grafik, PNG veya JPEG formatındadır. Gittikçe daha fazla tarayıcının desteklemeye başladığı SVG de giderek popülerleşen bir seçim.

Tarayıcılar ayrıca GIF olarak oluşturulmuş faviconları da görüntüleyebiliyor; ancak çok küçük boyut kullanımı, GIF faviconların görülmesini zorlaştırabiliyor.

ICO: Microsoft tarafından geliştirilen bu format, faviconlar için oluşturulmuş orijinal dosya biçimiydi. ICO, tüm tarayıcılar tarafından desteklenir ve tek bir dosya içinde birkaç boyutlu görsel içerebilir. Bu da tarayıcıya bağlı kalmadan resminizi boyutlandırmanıza ve ölçeklendirmenize olanak tanır. Bir faviconun hem ICO hem de başka bir dosya türü olarak kaydedildiği durumlarda tarayıcı, ICO versiyonunu görüntülemeyi seçecektir.

PNG: Bu, web sitesi kurucularının aşina olduğu bir dosya biçimi olduğundan, faviconlar için de sıkça tercih edilmektedir. Oluşturması kolay bir dosya biçimidir ve genellikle yüksek kaliteli görüntüler ve faviconlar sunar. PNG dosyaları ayrıca az yer kaplama avantajına sahiptir; böylece hızlı bir şekilde yüklenirler.

SVG: Bu dosyaların az yer kapladığı bilinmektedir. Bu dosya formatının faviconlar açısından en büyük yararı, sayfa hızını veya site performansını düşürmeyen yüksek kaliteli görseller sunabilmesidir. Geçmişte faviconlar için SVG kullanımı, tarayıcı uyumluluğundaki eksiklikler nedeniyle sınırlıydı; ancak bu durum giderek değişiyor.

Şeffaflık: Tasarımınızın arka planı şeffaf ise, dosyanızı PNG olarak ve şeffaflık ayarı açık olarak kaydettiğinizden emin olun.

Favicon oluşturma ipuçları

Bu kadar ufacık bir şey tasarlamak parkta güzel bir yürüyüş gibi görünebilir. Ancak, faviconların çok küçük olması, hataya yer olmadığı için ekstra dikkatli olmanız gerektiği anlamına gelir.

Markanıza ve web sitenize en uygun faviconu oluşturmaya yönelik birkaç ipucu:

Basitlik

Faviconların küçük boyutu, tasarımınızın kusursuz ve net olmasını gerektirir. Küçük çizgiler, doku veya gölgeleme gibi çok fazla ayrıntıya girmekten kaçının. Bunun yerine, anında tanınabilen cesur, net ve basit bir simgeyi hedefleyin.

Sanatçı ve illüstratör Adam J. Kurtz'un Wix web sitesi, belirgin sarı yıldızıyla basit bir favicona harika bir örnek. Başka bir örnek, mücevher tasarımcısı ve Wix kullanıcısı Ilaria Bonardi'nin üç basit noktadan oluşan faviconu.

Marka kimliği

Bir favicon, web sitenizin ve markanızın ruhunu kapsamalı ve web sitenizin geri kalanıyla aynı görsel dili ve renk düzenini korumalı.

Grafik tasarımcı Bhroovi'nin Wix web sitesi için oluşturulmuş olan gökkuşağı renklerindeki favicon, web sitesindeki aynı renkli görsel dilin devamı niteliğinde.

Benzer şekilde, eBay'in favicon'u, markanın renklerini küçük bir alışveriş çantası simgesiyle birleştirerek sitenin ruhunu mükemmel bir şekilde yansıtıyor.

Çok az veya sıfır metin

Faviconunuza marka adınız gibi tipografi (metin) eklemek istiyorsanız, kendinizi bir ila üç karakterle sınırlayın. Baş harfler veya kısaltmalar genellikle metni kısaltmak için iyi çözümlerdir – tıpkı marka adınızda olduğu gibi.

Kar amacı gütmeyen kuruluş Arte'nin Wix web sitesi, logosundaki A baş harfini favicon olarak kullanıyor ve dikkat çekmek için neon yeşili bir arka plana sahip. Alternatif olarak, Brooklyn merkezli Red Fern'in Wix web sitesini süsleyen faviconda hiç metin yok.

Bunun yerine, markalarını güçlendirirken aynı zamanda sağlam bir etki yaratmak için yalnızca logolarından aldıkları yaprak simgesini kullanıyorlar.

Logo kullanımı

Bazı logolar favicon boyutunda bile en iyi şekilde görünebilirken, çoğu küçültüldüklerinde pek okunaklı değildir.

Logonuzu favicon olarak kullanmak istiyorsanız etiket satırını atlamak veya yalnızca bir baş harfi kullanmak, logoları küçük boyutlarda çalıştırmanın yollarından bazıları.

Aynı tasarım değerlerini bünyesinde barındırırken, Google'ın faviconunun logosundan nasıl biraz daha farklı olduğuna dikkat edin. Favicon, yalnızca tanıdık G harfini gösteriyor ve marka renklerinin dördünü de bu tek harfe sorunsuz bir şekilde dahil etmiş. Farklı bir yaklaşım türüne örnek olarak elle çizilmiş logosunun baş harflerini favicon olarak kullanan illüstratör ve Wix kullanıcısı Charlotte Mei'yi gösterebiliriz.

Renk

Kullanılan içeriğe ve tarayıcıya bağlı olarak faviconun farklı renkli arka planlarda görüntüleneceğini unutmayın. Bu nedenle, tasarımı tamamlamadan önce faviconunuzu gri, beyaz ve siyah arka planlar üzerinde test ettiğinizden emin olun.

HTML'de favicon nasıl eklenir?

Sitenizi bir web sitesi oluşturucu kullanarak kurduysanız, faviconunuzu HTML'de eklemek gerekli değildir. Bu adım, yalnızca bir geliştirici tarafından oluşturulan siteler için geçerlidir.

Aşağıda, favicon resminizin web sitenizde görülebilmesi için kod başlığına nasıl eklenmesi gerektiğini gösterdik:

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

Sitenizi Wix ile mi oluşturuyorsunuz?

Sıradaki bölümde faviconunuzu Wix sitenize nasıl kolayca ekleyeceğinizi ve onu nasıl özelleştireceğinizi göstereceğiz.

Wix sitenize favicon nasıl eklenir?

Wix siteleri otomatik olarak standart varsayılan bir favicon içerir. Bunu bir Premium pakete yükselterek ve sitenize bir domain bağlayarak özelleştirebilirsiniz.

Wix sitenizin faviconunu kolayca değiştirebilirsiniz:

1. Sitenizin kontrol panelinde "Ayarlar"a gidin.

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

3. "Resim Yükle"ye tıklayın ve mevcut bir resmi seçin veya bilgisayarınızdan bir resim eklemek için "Medya Yükle"ye tıklayın

4. "Sayfaya Ekle"ye tıklayın. Tarayıcı sekmenizde faviconunuzun nasıl görüneceğine dair bir önizleme göreceksiniz.

5. "Kaydet"e tıklayın ve işte bu kadar! Web sitenizin artık bir faviconu var. Yayınla'ya bastığınızda web sitenizin sekmesinde görünür.

Faviconunuzu nasıl test edersiniz?

Faviconunuzu ekledikten sonra, görüntüleneceği tüm yerlerde nasıl göründüğünü kontrol etmek iyi bir fikirdir. Bunu yaparken olası önbelleğe alma sorunlarını önlemek için gizli moda (incognito mode) geçmenizi öneriyoruz.

Şimdi, bir kullanıcının sitenizi görüntüleyebileceği tüm yerlerde (tarayıcı, yer imi sekmesi, tarayıcı geçmişi ve mümkünse arama sonuçlarında) faviconunuzu kontrol edin. Henüz herhangi bir anahtar kelimede sıralamaya girmiyor musunuz? Siteniz dizine eklenmişse, şirketinizi veya markanızı aratarak sayfanızı arama sonuçlarında bulabilmeniz gerekir. Faviconunuzu gördüğünüzde, doğru yolda ilerlediğinizden emin olursunuz.

Bu, aynı zamanda faviconunuzun görünümü üzerine düşünmek için de iyi bir zaman.

Favicon ve SEO

Faviconların bir sitenin SEO'su üzerinde doğrudan bir etkisi yoktur. Bununla birlikte, tarayıcıların tanımlamasını kolaylaştırıp genel kullanıcı deneyimini geliştirmesinden ötürü favicon'un nitelikleri, sitenizin arama sonuçlarındaki sıralanışını doğal olarak iyileştirebilir. Dolaylı bir yoldan olsa da favicon, sitenizin akılda kalıcılığı ve SEO üzerinde olumlu etki bırakabilir.

Nihai görsel tasarımı, markanızın özünü yakalamayı başarıyor mu? Eğer öyleyse, faviconunuzu dünyanın dört bir yanından ziyaretçiyle paylaşmaya hazırsınız demektir!

Yael İba Tepeleni

SEO and Content Marketing Specialist