Favicon, logonun küçültülmüş kopyası olmaz. Logo 16 piksellik bir kareye sığdırıldığında ince çizgiler kaybolur, yazı okunmaz, geriye renkli bir leke kalır. Doğru yol, logonun en tanınır parçasını seçmek ve onu küçük alana göre baştan çizmektir. Çoğu markada bu parça amblem ya da baş harftir.
Tarayıcıda yirmi sekme açıkken kullanıcıyı sizin sitenize götüren şey çoğunlukla o küçük simgedir. Başlıklar kısalır, simge kalır.
Favicon nerede görünür?
Tarayıcı sekmesinde, yer imlerinde, geçmiş listesinde ve mobil arama sonuçlarında site adının yanında. Telefonda ana ekrana eklenen kısayol da bu simgeyi kullanır. Her yerde aynı dosya farklı boyutlarda gösterilir: sekmede 16 ila 32 piksel, kısayolda çok daha büyük.
Yani favicon tek bir resim sayılmaz, birkaç boyuttan oluşan bir ailedir. Teknik tarafı ayrı bir yazıda ele aldık: logo tarayıcı sekmesinde (favicon) nasıl optimize edilir. Burada tasarım kararlarına odaklanıyoruz.
Neden sadece küçültmek yetmez?
Çoğu logo 200 piksel ve üstü bir alan düşünülerek çizilir. İnce çizgiler, küçük yazılar, detaylı simgeler o ölçekte rahat okunur. 16 piksellik bir karede ise toplamda 256 piksel var. Bu alanda bir daireyi, bir harfi, bir kalın çizgiyi çizebilirsiniz. Daha fazlasını değil.
Bir örnek düşünün: üstte bir simge, altında firma adı ve onun altında ince bir slogan olan dikey bir logo. 16 pikselde adı ve sloganı okumak imkânsızdır, simge de sıkışıktır. Sonuç, gri bir lekedir. Bu sorun sık görülür ve logo küçük boyutta okunabilir mi yazısı bir kontrol listesi veriyor.
Hangi parça seçilir?
Karar logonun türüne bağlıdır.
Sembol ve yazıdan oluşan logolarda favicon için sembol seçilir. Yazı bu boyutta okunmaz. Sadece yazıdan oluşan logolarda (logotype) baş harf ya da kısa bir monogram kullanılır. Mesela “Doruk Mobilya” için bir “D”. Sembolü olmayan, baş harfi de zayıf olan bir isimde, markanın ana rengiyle doldurulmuş sade bir geometrik form düşünülebilir.
Seçilen parça en az iki şeyi taşımalı: kolay tanınmalı ve küçükken de ayrışmalı. Bazen simgenin bir kısmını kırpmak, yani yalnızca en karakteristik çizgiyi alıp büyütmek işe yarar.
Yeniden çizimde nelere dikkat edilir?
Kalın çizgiler kullanın, ince çizgileri çıkarın. İç boşlukları açın; küçük boyutta dar aralıklar kapanır. Renk sayısını iki üç ile sınırlayın. Gradyan ve gölge kullanmayın, çünkü küçük boyutta bulanıklık olarak görünür. Arka planı düz renk yapın ya da tamamen saydam bırakın; koyu temalı tarayıcılarda koyu bir simge kaybolacaksa açık bir zemin ekleyin.
Test için favicon’u gerçek boyutuyla ekrana alın. Büyütüp bakmak yanıltır; 16 pikselde gerçekten ne gördüğünüze bakın. Bir de başka sekmelerin yanında deneyin: sosyal medya, e-posta, arama motoru simgeleri yan yanayken sizinki seçiliyor mu?
Üç farklı markadan üç farklı karar
Bir mobilya atölyesinin logosunda sandalye silueti ve yanında firma adı varsa, favicon’a siluetin sadeleştirilmiş hâli girer. Bir avukatlık bürosunun logosu iki isimden ve bir terazi çiziminden oluşuyorsa, terazi küçük boyutta dağılır; bu durumda büronun baş harfi ve marka rengi çalışır. Bir kafenin logosu el yazısı bir isimden ibaretse, ismi okutmaya çalışmak yerine ilk harfi kalın bir biçimde çizmek ya da kahve çekirdeği gibi tek bir sembol seçmek gerekir. Her üç örnekte de aynı mantık var: büyük logodan tanınmayı sağlayan tek bir öğeyi ayırın ve onu küçük alana göre yeniden çizin.
Birden fazla aday çıkarsanız yan yana koyup bir arkadaşınıza gösterin ve hangisini daha hızlı tanıdığını sorun. Hız, bu testte kaliteden önemlidir.
Logoyla bağı korumak
Favicon logodan farklı çizilse de aynı markanın parçası olarak hissedilmelidir. Renk paleti aynı kalmalı, köşe yumuşaklığı çelişmemeli. Logoda keskin köşeli bir simge varsa favicon’u yuvarlatmayın. Kullanıcı sekmede gördüğü simgeyi sayfada gördüğü logoyla ilişkilendiremezse, marka algısı bölünür.
Sosyal medya profil fotoğrafı da aynı köke bağlanmalı. Favicon, profil resmi ve uygulama simgesi birbirinin kardeşi olmalı: aynı amblem, ufak uyarlamalarla. Profil resmi tarafı için logo sosyal medya profillerinde nasıl kullanılır yazısına bakın.
Aynı simgeyi uygulama ikonu, bildirim görseli ya da paylaşım kartı için de kullanacaksanız, bu kullanımlar için ayrı boyutlar çıkarın. Her biri aynı amblemin farklı kırpılmış hâli olur; hepsini tek dosyadan ölçekleyerek üretmek, kenarlarda tutarsızlık yaratır.
Arama sonuçlarında favicon
Google mobil arama sonuçlarında site adının yanında favicon’u gösteriyor. Sonuç listesinde sizin simgeniz yan yana duran on başka sitenin simgesiyle yarışıyor. Net, kendine özgü bir simge, bir bakışta ayrışmanıza yardım eder. Bunun tıklamayı ne kadar artırdığına dair güvenilir bir rakam yok; yalnızca markalı aramada sizi tanıdık göstermesi mantıklı bir beklenti.
Siteniz yeni açıldıysa favicon’un arama sonuçlarında görünmesi biraz zaman alabilir. Google simgeyi yeniden taramak zorundadır ve bu sürede eski veya varsayılan simge görünebilir.
Ne zaman hazırlanmalı?
Favicon, logo tesliminin parçası olmalı. Tasarımcıdan logoyla birlikte favicon ve profil fotoğrafı sürümlerini isteyin. Yoksa web sitesi yapılırken en son an aklınıza gelir ve acele bir çözümle logonun köşesi kırpılır. Web tasarım projelerimizde favicon setini logo dosyalarından baştan ayrı hazırlıyoruz.
Logo ve kurumsal kimlik paketinin bedeli fiyatlar sayfasında 10.000 ₺ + KDV olarak yer alıyor. Mevcut logonuzdan favicon çıkarmak için iletişim sayfasından yazabilirsiniz.