Ücretsiz Bayi Ol
Oturum Aç

Favicon Nasıl Eklenir? Favicon Hakkında Bilmeniz Gerekenler

web sitenize favicon nasıl eklenir

Favicon'lar karşılaşacağınız en küçük grafiklerden bazıları olabilir, ancak web sitelerinde ve markalaşmada büyük rolleri vardır. İşte bu yüzden çok önemlidir.

Web sitenize favicon eklemek için, web sitenizin yönetim panelinde ana sayfada yer alan Site Yayınlama Tercihleri düğmesine tıklayın ve daha önceden hazırlamış olduğunuz PNG formatında, 512px genişliğinde ve 512px yüksekliğindeki şeffaf resim dosyanızı (icon) seçip gönder tuşuna basmanız yeterlidir.

Web Sitesine Favicon Nasıl Eklenir?

1. Adım: Site yayınlama tercihleri sayfasına gidin.

favicon eklemek için yönetim panelinde site yayın

2. Adım: Favicon dosyanızı bilgisayardan seçip, kaydet tuşuna basın.

genel tercihler alanından favicon dosyanızı seçip

Favicon'lar, ne olduklarını bilsek de bilmesek de hepimizin gördüğü bir şeydir. Şu anda açık olan tarayıcı sekmelerinize bir göz atarsanız, bu açık web sayfasında BulutPress'in "B" harfini göreceksiniz. Bu küçük grafik süsleme, favicon olarak bilinir.

Site simgelerinin nereden geldiğine, nasıl kullanıldıklarına ve kendi site simgelerinizi tasarlamayla ilgili ipuçlarına daha yakından bakalım. Web sitesinde önemli yeri olan favicon hakkında bilmeniz gerekenleri anlatalım.

Favicon'un Başlangıcı

Favicon'lar, Internet Explorer 5'e kadar uzanır. O zamanlar, bugün hala kullanımda olan oldukça basit "favicon.ico" adıyla web sitelerinin kök dizinlerinde yaşıyorlardı. Internet Explorer'da bir web sitesini sık kullanılanlara eklediyseniz, yer imleri listenizin yanı sıra adres çubuğunda da sitenin yanında bir favicon görünür.

Bir tasarım unsuru olma rollerine ek olarak, favicon'lar aynı zamanda ziyaretçi sayılarını takip etmenin ilkel bir yolu olarak da kullanılıyordu. Bir web sitesinin popülaritesi, bir favicon'un indirilme sayısına bağlı olarak ölçülebilir. Neyse ki, metrikler ve blog ziyaretçilerini ölçmek, bu oldukça kaba başlangıçlardan bu yana uzun bir yol kat etti.

Faviconları Nerede Bulacaksınız

Favicon'lar, masaüstü tarayıcı sekmelerinizin sol tarafında görünür. Küçük olabilirler - genellikle retina tabanlı ekranlarda 16x16 veya 32x32 piksel çözünürlükte olabilir. Bir web sitesi oluştururken bu küçük görsel markalaşma sürecinde çok önemlidir bu yüzden gözden kaçırılmamalıdır.

Bir favicon görüntüsü, bir logonun, bir sembolün ve hatta tek bir karakterin soyulmuş bir versiyonu şeklini alabilir. Modern tarayıcıların sağladığı küçük alana sığmaları gerektiğinden, basit ama etkili olmaları gerekir.

Favicon içeren, BulutPress® ile hazırlanmış bir web sitesinin HTML koduna bakıyorsanız, bunu <head> etiketinde ve şu biçimde görürsünüz:

örnek favicon kodları

Farklı uygulamalara ve cihazlara uyum sağlamak için kodlarda ek favicon boyutları da görebilirsiniz, bu bilgiye biraz sonra değineceğiz.

Favicon'lar tarayıcı sekmeleriyle sınırlı değildir ve web sitelerini listeleyen veya görüntüleyen diğer yerlerde görülebilir.

Site simgelerini tarayıcınızın geçmişinde bulacaksınız. Chrome, Safari, Firefox veya başka bir modern tarayıcı kullanıyor olun, temsil ettiği web sitesinin yanında bir favicon görünecektir. Google Chrome'da şu şekilde görünüyorlar:

chrome tarayıcı geçmişinde favicon nasıl göru

Favicon'lar, Google'ın arama çubuğundaki otomatik oluşturulan önerilen sonuçlarda, yer imi açılır listelerinde ve tarayıcı araç çubuklarında da görünür. Bu pratik serp listelerinde favicon'lar, herhangi bir metni okumamıza gerek kalmadan web sitelerini tanımlamamıza olanak tanır.

Site Simgeleri (Favicons) En Doğru Şekilde Nasıl Kullanılır?

Favicon'lar görsel kılavuz görevi görerek daha tutarlı bir kullanıcı deneyimi ve genel marka kimliği oluşturur. Bir web tasarımında bir araya gelen CSS stillerinin uyumu için çaba sarf ettiğiniz gibi, bir favicon'un da genel temanıza ve markanıza nasıl uyduğuna dikkat etmelisiniz.

Kendi site simgenizi tasarlarken göz önünde bulundurmanız gereken örnekler arasında YouTube'un oynat düğmesi, Twitter'ın mavi kuşu ve Google'ın renkli "G" simgesi yer alır. Bu site simgeleri benzersizdir, hemen tanımlanabilir ve sekmeler taranırken markanın kolayca fark edilmesini sağlar.

Aynı derecede akılda kalıcı bir site simgesi oluştururken göz önünde bulundurmanız gereken bazı şeyler şunlardır:

Favicon'unuzu Küçük Ama Okunaklı Yapın

Dikkate alınması gereken birkaç favicon boyutu vardır, ancak 16x16 piksellik en küçük görünen versiyonların bile okunabilir olmaları gerektiğini unutmayın. Bu, bir markanın özünü yakalayan ve markanın anında tanınmasını sağlayan görsel bir kanca oluşturmak anlamına gelir.

Harika bir örnek, favori tasarım web sitelerimizden biri olan Behance'in net metinlerinin bu şekilde kullanılmasıdır. Bu küçük ölçekte bile, tanım eksikliği yoktur ve görüntü yüksek kaliteli ve kolayca tanımlanabilir görünür.

Favicon Tasarlarken Aşırıya Kaçmayın

Bu kadar sınırlı bir alanla, minimalist bir yaklaşım benimsemek en iyisidir. Site simgesi oluşturmanın en kolay yollarından biri, önceden var olan logonuzdan bir öge almaktır. Örneğin biz BulutPress® logomuzun ilk harfini favicon olarak kullanıyoruz.

logonun ilk harfi olan 512 piksel favicon örneği

Favicon Tasarımı Sadece Birkaç Karakterde Kalmalıdır

Bir logodan sembolik bir öge çekmenin yanı sıra, bir favicon'da bir karakter de kullanabilirsiniz. Kim olduklarını temsil etmek için tek bir harf kullanan site simgelerine sahip birçok marka var.

Favicon İçin Vektör Tabanlı Bir Grafik Kullanmak En İyisidir

Photoshop'ta hızlı bir şeyler yaratmak cazip gelse de, vektör grafikleri kullanmak gelecekte size yardımcı olacaktır. Illustrator, Sketch, Figma veya başka bir vektör tabanlı tasarım uygulamasında bir favicon oluşturduğunuzda, onu daha sonra yeniden boyutlandırmak ve değiştirmek çok daha kolaydır.

Birçok tasarımcı, SVG tabanlı bir favicon grafiğiyle başlar ve ardından bunları png, gif, jpg veya ico gibi vektörleştirilmemiş dosyalara dönüştürür.

Bir Favicon Üreteci İle Site Simgeleri Oluşturmayı Düşünün

Favicon oluşturucular, bir simge bulmanın ve birden çok boyut oluşturmanın hızlı bir yolunu sunar. Tasarımlarınızı farklı uygulamalarda ve cihazlarda görüntüleyerek uygulayabileceğiniz HTML kodu üretmede de kullanışlıdırlar.

Favicon İçin Doğru Dosya Biçimini Kullanın

Bugün, favicon.ico hala çeşitli tarayıcılarda yaygın bir desteğe sahiptir. Ancak, daha çağdaş web siteleri favicon.png kullanma eğilimindedir. Internet Explorer'ın yalnızca .ico'yu desteklediğini ve .png biçiminin görüntülenmeyeceğini unutmayın. Favicon'un hem .ico hem de .png sürümünü depolayarak bu sorunun önüne geçebilirsiniz, böylece birden çok tarayıcıda düzgün şekilde görünür.

Favicon'ları Düzgün Şekilde Boyutlandırma

Site simgeleri için standart boyut 16x16 pikseldir, ancak çoğu tasarımcı retina ekranları yerleştirmek için 32x32 pikselle başlar. Bu şekilde, daha büyük site simgeleri retina ekranlarda güzel bir şekilde görünür ve küçültülebilir.

Tabii ki başka favicon boyutları da var ve OS Safari'dekiler gibi Apple dokunmatik simgelerinin 180 x 180 boyutları gerektirdiğini, Android Chrome'un 192 x 192'de bir favicon'a ihtiyacı olduğunu ve Opera Coast'un en iyi şekilde çalıştığını belirtmekte fayda var. 228 x 228. Tasarımcılar genellikle hem masaüstü tarayıcıları hem de diğer uygulamaları barındırmak için çeşitli farklı boyutlar oluşturur.

Son olarak, akıllı telefon ve tabletlerde, ana ekrana ekle düğmesine bastığınızda web sitenizin simgesi olarak favicon kullanılacağından Android ve Iphone cihazlarda ideal boyut 512px karedir. Bu yüzden BulutPress® yönetim panelinizden favicon eklemek için 512 piksel kare şeklinde yüklemelisiniz. Bu sayede diğer tüm çözünürlüklerde ve cihazlarda en yüksek görsel kalitesine ulaştığınızdan emin olursunuz.

birlikte-hep-daha-iyiye