Favicon Örnekleri, En İyi Uygulamalar ve Teknikler

Tarayıcı sekmelerinin üstündeki bu küçük simgelere hiç dikkat ettiniz mi? Bir web sitesine veya sayfaya kısayol kaydettiğinizde ne olur? Bu küçük görüntüler veya favicons, özellikle bu amaç için tasarlanmıştır.

İyi ya da kötü minik ikonu yapan şey arasında oldukça belirgin bir fark vardır. Tasarım kararlarının küçük çapta daha az önemli olduğunu düşündüğünüz için affedilirsiniz. Ancak kötü tasarlanmış bir favicon markanıza kötü yansıyabilir.

Bugün bu simgelerin ne olduğuna, onlar için temel tasarım tekniklerine ve takip etmeniz gereken özelliklere bakıyoruz.

Envato Elements'i keşfedin

Bir Favicon Nedir?

Basitçe, bir favicon bir web sitesini, markayı veya işletmeyi temsil etmek için kullanılan küçük, şeffaf bir simgedir. Favicons, web sitesi ziyaretçilerine tutarlı bir görsel sayesinde gezdikleriyle aynı sitede olduklarını söyleyen tutarlı bir işaretçi sağlayarak kullanıcı deneyimini geliştirmeye yardımcı olur.

Favicon terimi “favori simgesi” nden gelir. Bu terminoloji, yer imlerine eklenmiş sayfaların "Sık Kullanılanlar" olarak adlandırıldığı Internet Explorer günlerine kadar uzanır. Favicon ilk olarak 2000 dolaylarında HTML 4.0 için World Wide Web Consortium (W3C) tarafından kabul edildi ve ertesi yıl tarayıcı pencerelerinde daha tutarlı görünmeye başladı.

Tarayıcı sekmeleri arasında hızlıca geçiş yapmak, bir yer işaretini belirlemek veya telefonunuzda kaydedilmiş bir uygulama veya kısayol bulmak için favicons kullanın. Görsel tanımlayıcı, çoğu insanın bu bağlantıları ve sayfaları erişmek için sağ düğmeyle ilişkilendirmek için kullandıkları şeydir.

Geleneksel olarak, favicons bir .ico dosya biçimi kullandı, ancak bu artık daha az sorun. Herhangi bir şeffaf dosya türü çoğu durumda çalışır; .png genellikle seçim biçimidir.

Teknik Hususlar

Bir kerede tüm favicons süper küçük 16 piksel karelerdi. Daha yüksek çözünürlüklü retina ekranları ve dikkate alınması gereken kısayol simgeleri ile artık durum böyle değil.

HTML 5, küçük tarayıcı simgelerinden bilgisayar yerleştirme istasyonu simgelerine, ana ekran simgelerine kadar her türlü kullanım için çoklu boyutlarda favicons standartları içerir. Artık 16 piksel kareye bile ihtiyacınız yok.

Modern favicon boyutları ve kullanımı:

• 32 × 32: Çoğu masaüstü tarayıcı için standart (16 × 16'nın yerine geçer)
• 128 × 128: Chrome mağazası ve küçük Windows 8 yıldızlı ekran simgesi
• 152 × 152: iPad dokunmatik simgesi
• 167 × 167: iPad Retina dokunmatik simgesi
• 180 × 180: iPhone Retina simgesi
• 192 × 192: Google Geliştirici web uygulaması önerisi
• 196 × 196: Android ana ekran simgesi

En İyi Uygulamalar

Genel tasarım açısından önemsiz olabilecek bir simge gibi görünse de, bu doğru olmaktan uzaktır.

Bir favori simgesi, markanız ve web siteniz hakkında çok şey söylüyor. Kullanıcılar, onları adlarıyla tanımlayamazlarsa onları beklemeye gelmişlerdir. Bu küçük unsurlar genel kullanıcı deneyimine ve markasına katkıda bulunur.

Peki bir favicon'dan en iyi şekilde nasıl yararlanabilirsiniz?

Bu en iyi uygulamaları aklınızda bulundurun:

• Bir favicon marka kimliğinize bağlanmalıdır, ancak genellikle tüm bir logoyu içeremeyecek kadar küçüktür. Marka adınızın ilk harfi veya marka ile birlikte kullandığınız küçük bir işaret gibi tanımlanabilir bir öğe kullanın.
• Şekli düşünün. Bir favicon için alan varsayılan olarak karedir. Başka bir şey istiyorsanız, şeffaf bir arka plan gereklidir. Bazı sistemler, kenarları yuvarlayarak da akılda tutulması gereken başka bir husus olabilir.
• Dosyanın küçük, ancak çok küçük olmadığından emin olun. Çoğu cihazda düzgün bir şekilde görüntülenecek, ancak web sitesinin tamamını bozmayacak bir favori simgesi yükleyin.
• Favicon tasarımında kelimelerden veya karmaşık öğelerden kaçının.
• Favicon için basit bir renk paletine sadık kalın. Renklerle delirmek için çok küçük. Bu yüzden bu küçük simgelerin çoğu arka plan ve ön plan renginden biraz daha fazlasını kullanır ve ikisi arasında çok fazla kontrast bulunur.

Tasarım Teknikleri

Bir favicon küçük olduğundan, Photoshop'ta bir kapris üzerinde tasarlamaya meyilli olabilirsiniz. Uzun ömür için önerilen yol bu değildir.

Favicons için en iyi görsel tasarım kuralı, tasarımı basit tutmaktır. Renk veya metin veya marka öğeleriyle aşırıya kaçmayın.

Favicon'unuzu Illustrator veya Sketch gibi bir vektör aracında oluşturun, ardından tasarımı gerekli boyutlara dışa aktarın. Bu, ekran çözünürlükleri değiştikçe, zamanın testine dayanan bir favicon'a sahip olmanızı sağlayacaktır. (Tek yapmanız gereken yeni bir boyutta yeniden dışa aktarmaktır.)

Favicons için en iyi görsel tasarım kuralı, tasarımı basit tutmaktır. Renk veya metin veya marka öğeleriyle aşırıya kaçmayın. Bu gönderideki örneklere baktığınızda, bu küçük öğelerin neredeyse tümünün 16 x 16 pikselde okunabileceğini göreceksiniz.

Animasyon gibi numaralardan kaçının; sadece buraya girerler.

Bir tasarım zorluğu olarak düşünün. Okuması kolay olacak kadar küçük bir şey oluşturmak oldukça zor olabilir.

Dosyayı saydam bir png olarak kaydedin. Favicon'da tuhaf kenarlar veya kenarlıklar elde etmemenizi sağlayan iyi bir alışkanlık. (Hiçbir şey simgeyi çevreleyen pürüzlü beyaz bir kenardan daha kötü görünmez.)

İyi tasarım ilkelerini kullanır. Favicon'un daha büyük, daha görünür boyutta bir şey için ne zaman kullanılabileceğini asla bilemezsiniz. Örneğin, bir web sitesi yer işaretini kaydetmek, favicon'un büyük bir sürümünü kullanabilir. Aynı şey yerleştirme ve hatta arama motoru sonuç önizlemeleri için de geçerlidir.

Küçük olmasına rağmen, bu simge markanızı temsil eder. İyi tasarlayın.

Dosyayı hazır hale getirdikten sonra, sadece birkaç satır kod ile web sitenize ekleyebilirsiniz. (Birçok WordPress teması ve web sitesi oluşturucusunda zaten bir favicon öğesi vardır, bu nedenle bu adımı düşünmenize bile gerek yoktur.)

Resim dosyasını yükledikten sonra, “iconpath” ve “iconname” ifadelerinin belirli dosya öğenize işaret ettiğini belirterek web sitenizin başlığına aşağıdaki kodu ekleyin:

• HTML dizin dosyası:
• WordPress:

Örnekler

Aşağıdaki örnekler, ilişkili favicons içeren bazı marka öğelerini içerir. (Tıklayın ve tasarımcılara Dribbble sayfalarında biraz sevgi gösterdiğinizden emin olun.)

Prodigi.team Duyarlı Logo

Butterscotch Önerilen Logo Sistemi

Logo Favicon Ekranı

Favicon Şablonu

TEC Logo Seçenek 2

Sonuç

Hangi favicons boyutu eksik, kullanıcı deneyimi telafi. Bu simgeler, sitenizdeki ziyaretçiler ve çok fazla tarayıcı sekmesi açık bırakma eğiliminde olanlar için gezinme araçları işlevi görür.

Genel bir kural olarak, favicon, kullanıcıyı dijital varlığınıza bağlayan hızlı bir görsel tanımlayıcıdır. Markanızın en iyi, daha doğru bir temsili olduğundan emin olmak için ona dikkat edin.