Favicon UX: Harika Bir Favicon'u Ne Yapar?

Harika bir favicon; genellikle logo simgeniz ya da bir iki harften oluşan, hem açık hem koyu tarayıcı sekmelerinde 16x16 piksel boyutunda okunabilir kalan, markanızla uyumlu olan ve nadiren değişen basit, yüksek kontrastlı bir işarettir. Bu rehberdeki her şey (piksel hizalama, renk, dolgu, saydamlık, dosya boyutu) şu hedeflere hizmet eder: sitenizi onlarca açık sekme arasında anında bulunabilir kılmak.

Favicon küçüktür ama birçok yerde karşınıza çıkar: tarayıcı sekmeleri, yer imi çubukları, geçmiş listeleri, sekme arama menüsü, mobil ve masaüstündeki Google arama sonuçları ve telefon ana ekranları. Çok sayıda sekmesi açık olan kullanıcılar için başlık çoğu zaman tamamen kısaltılır ve geriye tek ipucu olarak simge kalır. Bu da favicon'u bir süs değil, gerçek bir gezinme öğesi yapar.

1. 16x16'da okunabilirlik

Klasik favicon boyutu 16x16 CSS pikselidir. Standart bir ekranda bu tam anlamıyla 256 pikseldir; 2x retina ekranda ise tarayıcı aynı alan için genellikle 32x32'lik bir görsel seçer. Tasarladığınız her şeyin bu küçülmeye dayanması gerekir.

Sade tutun

• Tek bir şekil ya da bir iki harf. Tek bir kalın harf, içinde sembol olan bir daire veya basit bir geometrik işaret iş görür. Üç harf ya da bir kelime karmaşaya dönüşür.
• Tek bir odak noktası. Simgeyi beş kelimeyle anlatamıyorsanız fazla karmaşıktır.
• Gradyan, gölge ya da ince doku olmasın. Küçük boyutlarda bulanık lekelere dönüşürler.

Piksel ızgarasına hizalayın

16x16'da ızgaradan yarım piksel kayık duran bir çizgi iki piksel satırına yayılarak yumuşatılır ve gri ve flu görünür. Kenarları tam piksel sınırlarına yerleştirin ve şekil simetrik olduğunda çift sayılı kalınlıklar kullanın. Vektör aracından dışa aktarıyorsanız piksele yapıştırmayı (pixel snapping) etkinleştirin veya küçültülmüş sonucu kontrol edip elle düzeltin.

İnce çizgilerden kaçının

16x16'da 2 pikselden ince çizgiler (simge genişliğinin yaklaşık yüzde 12'si) kaybolmaya ya da boyutlar arasında titremeye meyillidir. Çizgileri kalınlaştırın, iç ayrıntıları kaldırın ve küçük boşlukları birleştirin. Kalın, hafifçe ağır bir glif, ayrıntılı bir logonun sadık bir minyatüründen genellikle daha iyi okunur.

Elle düzeltin

ICO ve PNG dosyalarında yazı tipi tarzı hinting yoktur; bu yüzden elle piksel düzenleme onun karşılığıdır: eğrilerin, çapraz çizgilerin ve karşıt boşlukların ("a" ya da "e" gibi harflerdeki delikler) net kalması için tek tek pikselleri ayarlarsınız. Otomatik küçültme iyi bir ilk taslaktır, ancak elle yerleştirilmiş birkaç piksel çoğu zaman bir leke ile tanınabilir bir harf arasındaki farkı yaratır. MakeFav piksel editörü tam bunun için yapıldı: 16x16 tuvali açın, sorunlu pikselleri düzeltin ve dışa aktarın.

2. Açık ve koyu sekmelerde kontrast

Tarayıcılar artık sıklıkla koyu modda çalışıyor ve birçok kullanıcının sekme çubuğu sayfa temasından farklı. Saydam arka planlı koyu lacivert bir simge beyaz bir sekmede mükemmel görünürken koyu gri bir sekmede neredeyse görünmez olabilir. Her zaman ikisini de test edin.

Pratik çözümler

• Bir arka plan şekli ekleyin. Marka renginde dolu bir yuvarlatılmış kare ya da daire, sekmeden bağımsız olarak işaretin kendi kontrastına sahip olmasını sağlar.
• İnce bir kontur ya da hale kullanın. Koyu bir glifin etrafındaki 1 piksellik daha açık bir kenar (ya da tersi) siluetin her iki temada da görünür kalmasını sağlar, ancak 16x16'da net kalması gerekir, bu yüzden test edin.
• Orta tonlu marka renkleri seçin. Canlı mavi, turuncu, yeşil veya macenta gibi renkler genellikle hem beyaz hem de siyaha yakın yüzeylerde işe yarar. Çok açık sarı ya da çok koyu lacivert risklidir.
• Uyarlanabilir bir SVG favicon kullanın. Bir SVG, simgenin sistem temasıyla değişmesi için prefers-color-scheme medya sorgusu içerebilir.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Medya sorgusunun işletim sisteminin ya da tarayıcının temasını yansıttığını unutmayın; sekme çubuğu genellikle bunu izler ama her zaman değil. SVG favicon desteği de değişkendir: Chrome ve Firefox bunları destekler, Safari ise tarihsel olarak geride kalmıştır; bu yüzden her zaman PNG veya ICO yedekleri bulundurun. Dolu arka planlı bir tasarım, hiçbir tema mantığı gerektirmediği için en sağlam seçenektir.

3. Tanınabilirlik ve marka tutarlılığı

Yazı logosunun da yer aldığı tam logo yerleşimini değil, logo simgesini (sembol ya da monogram) kullanın. 16x16'lık bir simgenin içindeki metin okunamaz ve kareye sıkıştırılmış geniş yatay bir logo ortada küçücük bir şerit bırakır.

• Markanızın bir sembolü varsa, onu sadece küçültmek yerine küçük boyutlar için sadeleştirin. Daha az ayrıntılı bir "favicon sürümü" standart uygulamadır.
• Markanız yalnızca bir yazı logosuysa, ilk harfi ya da ayırt edici bir harf çiftini alın ve marka yazı tipinizle kalın ağırlıkta yazın.
• Kullanıcı aynı markayı her yerde tanısın diye renkleri logonuz, uygulama simgeniz ve sosyal medya avatarlarınızla tutarlı tutun.

Ayırt edicilik, sadakat kadar önemlidir. Bir sıra sekmeye bakın: diğer üç site de mavi bir daire kullanıyorsa sizinki öne çıkmaz. Farklı bir şekil ya da renk, kusursuz sadık bir küçültmeden daha yararlıdır.

4. Renk: sınırlı, doygun bir palet

Bu kadar az pikselle her ek renk karmaşa katar. Bir ya da iki renk, ek olarak en fazla beyaz veya siyah hedefleyin. Doygun renkler küçük boyutlarda, sekme arka planına karışma eğiliminde olan pastel renklerden daha iyi taşınır.

Erişilebilirlik düşüncesinden biraz ilham alın. WCAG, anlamlı grafik nesneler için en az 3:1 kontrast ister (başarı ölçütü 1.4.11, Metin Dışı Kontrast). Favicon, sayfa içeriği değil tarayıcı arayüzü olduğu için resmen kapsam dışındadır, ancak glif ile arka planı arasında ve simge ile sekme arasında 3:1 sağlam bir hedeftir. Ayrıca hiçbir şeyi yalnızca renk tonuyla iletmekten kaçının: aynı simgenin kırmızı ve yeşil varyantları birçok renk körü kullanıcı için ayırt edilemez; bu yüzden şekli değiştirin ya da bir sembol ekleyin.

5. Şekil, dolgu ve güvenli alanlar

Kareyi doldurun

Tarayıcı sekmeleri favicon'u sabit küçük bir boyutta gösterir; bu yüzden fazladan kenar boşluğu işaretinizi yalnızca küçültür. Standart sekme simgeleri için tuvalin çoğunu kullanın, yalnızca bir iki piksellik nefes alanı bırakın; böylece işaret olabildiğince büyük olur.

Yuvarlak mı, kare mi?

Tarayıcılar genellikle sekme favicon'larını kırpmaz; yani çizdiğiniz şekil kullanıcıların gördüğü şekildir. Hafifçe yuvarlatılmış köşeli bir kare düzenli görünür ve tutarlı bir arka plan sağlar; saydam zemindeki serbest biçimli bir glif ya da daire ise daha hafif ve ayırt edici görünebilir. İkisi de uygundur. Birini seçin ve tüm simge setinizi tutarlı tutun.

Apple touch simgeleri

iOS, apple-touch-icon'a kendi yuvarlatılmış köşelerini ekler (olağan boyut 180x180). Önceden yuvarlatılmış köşesi olmayan, kenarlara kadar dolu bir kare sağlayın; aksi halde köşelerde görünür koyu ya da beyaz şeritler oluşabilir.

Android ve PWA'lar için maskelenebilir simgeler

Maskelenebilir simgeler işletim sistemi tarafından daireler, squircle'lar veya başka şekillerde kırpılır. Tüm önemli içeriği güvenli alanın içinde tutun: simgenin ortasında, yarıçapı simge genişliğinin yüzde 40'ı olan bir daire. Hangi maske uygulanırsa uygulansın doğru görünmesi için arka plan rengini kenarlara kadar uzatın. Kenardan kenara dolu sekme favicon'unu maskelenebilir simge olarak yeniden kullanmayın, çünkü maske onu kırpar.

6. Saydamlık

Saydamlık sekme favicon'ları için sorun değildir ve yalnızca glif içeren bir simgenin her sekme renginde temiz durmasını sağlayan şey de budur. Apple touch simgeleri için ise sorundur: iOS saydam alanları düz bir renkle (genellikle siyah) doldurur ve bu tasarımı bozabilir. Apple-touch-icon'a her zaman marka renginizde opak bir arka plan verin. Aynısı maskelenebilir simgeler ve çoğu Android ana ekran kullanımı için de geçerlidir; opak bir arka plan öngörülebilir sonuçlar verir.

7. Kararlılık: çok sık değiştirmeyin

Favicon, tekrar yoluyla tanınırlık oluşturur. Sık sık değiştirmek kullanıcıları hangi sekmenin sizin olduğunu yeniden öğrenmeye zorlar ve teknik baş ağrılarına da yol açar. Tarayıcılar favicon'ları agresif biçimde önbelleğe alır, Google da onları sayfalarınızdan ayrı olarak çeker ve saklar; bu yüzden yeni bir simgenin arama sonuçlarında görünmesi günler ya da haftalar sürebilir. Google ayrıca sabit bir favicon URL'si, boyutu 48 pikselin katı olan bir simge (48x48, 96x96 vb.) ve tarayabileceği bir dosya (robots.txt tarafından engellenmemiş) ister. Favicon değişikliğini mevsimsel bir süsleme değil, yeniden markalaşma düzeyinde bir karar olarak ele alın.

8. Bildirim durumları ve dinamik favicon'lar

Bazı web uygulamaları okunmamış mesajları, kayıt durumunu ya da bir hatayı belirtmek için favicon'u değiştirir. İyi yapıldığında yararlıdır; abartıldığında rahatsız edicidir.

• Küçük bir rozet kullanın (bir nokta ya da kısa bir sayı); köşeye yerleştirin, simgeyi baştan tasarlamayın. Ana simge tanınabilir kalmalıdır.
• Seyrek tutun. Rozetleri kullanıcı eylemi gerektiren olaylara saklayın. Simgeyi sürekli animasyonlu yapmayın.
• Sayıları sınırlayın. 16x16'da yalnızca bir iki rakam okunabilir; "137" yerine "9+" ya da düz bir nokta gösterin.
• Hemen sıfırlayın; kullanıcı öğeyi ele aldığında varsayılan simgeyi geri yükleyin.
• Yalnızca renge güvenmeyin. Kırmızı bir nokta, bilgi herkes tarafından erişilebilsin diye sayfa başlığıyla da desteklenmelidir, örneğin "(3) Gelen Kutusu".

Dinamik favicon'lar genellikle bir tuvale çizilir ve simge bağlantı öğesinin href değeri güncellenerek değiştirilir. Güncellemeleri kısıtlayın, çünkü favicon'u sürekli değiştirmek CPU kullanabilir ve kullanıcıların dikkatini dağıtabilir.

9. Performans

Favicon'lar küçüktür ama yine de kötü yönetilebilecek isteklerdir.

• Dosyaları küçük tutun. Bir PNG favicon genellikle birkaç yüz bayttan birkaç kilobayta kadardır. Basit bir SVG 1 KB'ın altında olabilir.
• Şişkin ICO dosyalarından kaçının. 16, 32 ve 48 piksellik görseller içeren çok boyutlu bir ICO yeterlidir. 256x256'lık bir görsel gömmek, tarayıcı sekmelerinde görünür bir fayda sağlamadan dosya boyutunu katlar.
• Önbellek başlıklarını ayarlayın. Simgeleri uzun bir Cache-Control süresiyle sunun, örneğin public, max-age=31536000, immutable, ve değiştirdiğinizde sürümlü veya karma (hash) değerli bir dosya adı kullanın.
• Simgeleri açıkça bildirin. Tarayıcılar varsayılan olarak /favicon.ico dosyasını ister; bu yüzden başka simgeler bildirseniz bile bir tane bulundurun ki günlüklerinizde 404 gürültüsü oluşmasın.
• Sıkıştırın. PNG'leri kayıpsız bir optimize edicden geçirin ve SVG'leri küçültün (minify).

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

Tüm bu dosyaları tek bir kaynak görselden üretmek isterseniz MakeFav favicon oluşturucu standart seti üretir, geliştiriciler sayfası ise entegrasyon seçeneklerini kapsar.

10. Erişilebilirlik

Favicon'un alternatif metni yoktur ve ekran okuyucular onu seslendirmez; bu yüzden alt öznitelikleri gibi geleneksel erişilebilirlik araçları uygulanamaz. Önemli olanlar şunlardır:

• Anlamı sayfa başlığı taşır. Benzersiz, açıklayıcı <title> öğeleri yazın. Durumu iletmek için asla simgeye güvenmeyin; her rozeti başlıkta da yansıtın.
• Az gören kullanıcılar için görünürlük. Yüksek kontrast, kalın bir şekil ve büyük bir işaret, sekmeleri gözle tarayan kullanıcılara yardımcı olur.
• Renkten bağımsızlık. Durumları yalnızca renk tonu değil, şekiller veya harfler de ayırt etsin.
• Azaltılmış dikkat dağınıklığı. Hareket hassasiyeti olan kullanıcılar için sorun olabilecek yanıp sönen veya animasyonlu favicon'lardan kaçının.

Favicon UX kontrol listesi

Test kontrol listesi

Tasarım aracınızdaki büyük önizlemeye güvenmeyin. Gerçek simgeyi gerçek koşullarda test edin:

1. Birden fazla tarayıcı. Chrome, Firefox, Safari ve Edge'i kontrol edin; her biri simgeleri ve boyutları biraz farklı seçer.
2. Açık ve koyu mod. İşletim sistemi ve tarayıcı temasını değiştirin ve her seferinde sekme çubuğuna bakın.
3. Retina ve standart ekranlar. 1x bir monitörde ve 2x ya da 3x bir ekranda kontrol edin, tarayıcıda yakınlaştırın.
4. Yer imi çubuğu. Sayfayı yer imlerine ekleyin ve simgenin diğer sitelerin yanında hâlâ okunabilir olup olmadığına bakın.
5. Çok sayıda sekme. 20 sekme açın ve kendi sekmenizi bir bakışta bulup bulamadığınıza bakın.
6. Google SERP önizlemesi. Simge yeniden tarandıktan sonra bir mobil arama sonucunu kontrol edin. Güncellenmesinin zaman alabileceğini unutmayın.
7. Ana ekran. Siteyi iOS ve Android ana ekranlarına ekleyin ve simgenin kırpılmadığını, siyah köşeleri olmadığını ve maskesi içinde çok küçük kalmadığını doğrulayın.
8. Teknik kontrol. Dosyaların var olduğunu, 200 durumu döndürdüğünü, doğru boyutlara sahip olduğunu ve HTML'inizde doğru bildirildiğini doğrulamak için alan adınızı MakeFav favicon denetleyicisinden geçirin.

Pratik bir iş akışı

1. Logo simgenizle başlayın ve onu tek bir şekle ya da harfe sadeleştirin.
2. Her iki temada da çalışan dolu veya şekilli bir arka planla kare bir tuval oluşturun.
3. 32x32 ve 16x16 boyutlarını dışa aktarın ve küçük sürümü piksel editöründe elle iyileştirin.
4. Oluşturucu ile tam seti (ICO, PNG, apple-touch-icon, manifest simgeleri) üretin.
5. Link etiketlerini ekleyin, önbellek başlıklarını ayarlayın, yayına alın ve denetleyici ile doğrulayın.

Favicon, sitenizdeki en küçük varlıklardan biri ve en sık görülenlerden biridir. Kontrast, sadelik ve tutarlılık konusunda alınan birkaç dikkatli karar, onun her sekmede, temada ve cihazda işe yaramasını sağlar.

Sık sorulan sorular

Bir favicon hangi boyutta olmalı?

Tarayıcı sekmeleri için 16x16 ve 32x32 boyutlarında tasarlayın (tarayıcı yüksek yoğunluklu ekranlarda 32x32 kullanır), iOS için 180x180'lik bir apple-touch-icon, Android ve PWA'lar için de 192x192 ve 512x512 PNG'ler sağlayın. Google arama sonuçları için boyutu 48 pikselin katı olan kare bir simge kullanın, örneğin 48x48 veya 96x96. Bir SVG kaynağı hepsine ölçeklenir.

Tam logomu favicon olarak kullanmalı mıyım?

Genellikle hayır. Yazı logosu içeren tam logolar kare bir 16x16 simge için fazla ayrıntılı ve fazla geniştir. Logo simgesini ya da bir iki harflik bir monogramı kullanın ve minik olduğunda da tanınabilir kalması için sadeleştirin.

Favicon'u koyu modda nasıl çalıştırırım?

En güvenli yaklaşım, simgeye kendi dolu arka plan şeklini ya da kontrast oluşturan bir konturu vermektir; böylece sekme rengine bağlı olmaz. Alternatif olarak renkleri değiştirmek için prefers-color-scheme medya sorgulu bir SVG favicon kullanın ve SVG simgeleri desteklemeyen tarayıcılar için PNG veya ICO yedekleri bulundurun. Her zaman hem açık hem koyu temalarda test edin.

Yeni favicon'um neden görünmüyor?

Tarayıcılar favicon'ları uzun süre önbellekte tutar ve Google kendi kopyasını saklar; bunu kendi takvimine göre, çoğu zaman günler ya da haftalar içinde yeniler. Sayfayı sert yenileyin, tarayıcı önbelleğini temizleyin, yeni sürümlü bir dosya adı kullanın ve link etiketlerinin ile kökteki /favicon.ico dosyasının doğru dosyayı gösterdiğinden emin olun. Kurulumu MakeFav denetleyicisi ile doğrulayabilirsiniz.

Favicon üzerinde bildirim rozetleri göstermek iyi bir fikir mi?

Evet, ölçülü kullanılırsa. Küçük bir nokta ya da bir veya iki haneli bir sayı, kullanıcıların işlem gerektiren bir şeyi fark etmesine yardımcı olur; ancak sürekli animasyon ya da büyük sayılar okunabilirliğe ve dikkate zarar verir. Durumu her zaman sayfa başlığında da yansıtın, öğe ele alındığında varsayılan simgeyi geri yükleyin ve yalnızca renge güvenmeyin.