Elbette, birden fazla durumda bir favicon duymuşsunuzdur. Bu, web tasarımıyla yakından ilgilidir ve her sayfada, bir çevrimiçi mağaza, bir blog, bir web sitesi vb. size soracaklar. Fakat, Site ikonu nedir? Bu ne için? Ve en önemlisi, nasıl yapılır?
Bununla ilgili pek çok şüpheniz varsa, burada size anahtarları vereceğiz, böylece onu anlayabilirsiniz ve her şeyden önce, projenizde sunabilmeniz ve daha iyi bir sunum yapabilmeniz için. Sizi temin ederiz!
Site ikonu nedir
Bunu anlayabilmeniz için favicon'un ne olduğunu açıklayarak başlayacağız. Ve bunun için size pratik bir örnek vermekten daha iyi bir şey olamaz. Şu anda göz attığınızı hayal edin (aslında bizi okuyorsunuz). Ancak tek bir sekmeniz yok, birkaç tane var. YouTube (arka plan müziğini dinlediğiniz için), Gmail (postanız açık olduğu için) veya bu sayfa olsun, her birinde, o sayfanın yansıttığı adın göründüğünü fark etmiş olabilirsiniz.
Her ismin yanında, solda bir kare içinde küçük bir resim belirir. YouTube ve Gmail'deki, sahip oldukları logolarla tanımlanacaklarından emin olabilirsiniz, peki ya geri kalan sekmeler?
Aslında gördüğünüz şey favicon. Başka bir deyişle, bu bir ziyaret ettiğiniz sayfayla ilgili simge, Bu nedenle, bu ayrıntıya dikkat etmek çok önemlidir, çünkü sık kullanılanlara veya kısayollara bir sayfa eklediğinizde, favicon o sayfanın "görüntüsü" olur ve bu nedenle tasarımına dikkat etmeniz gerekir, böylece mükemmel bir şekilde ilişkilidir (ve her şeyden önce onu diğerlerinden ayırmak için iyi görünür).
Bu küçük simgenin boyutu genellikle 16 × 16 pikseldir (32x32 piksel olarak da ayarlanabilir). İçine koyduğunuz her şeyin doğru görünmesine dikkat etmelisiniz, aksi takdirde küçük bir nokta olarak görünecektir (ve bu, sayfanızın çok kötü bir görüntüsünü verecektir).
Site simgesi neden bu kadar önemli?
Artık favicon'un ne olduğunu bildiğinize ve onu genellikle açtığınız sayfalarda bulduğunuza göre, bugün giderek daha az sayfanın eksik olduğunu fark ettiniz mi? Çünkü zarafet ve bilgi birikimi vizyonu vermek gerçekten çok önemli. Yani detayları önemseyen bir marka veya kurum imajı aktaracaksınız.
Bununla birlikte, favicon'un aşağıdaki gibi başka kullanımları da vardır:
- Sayfanızın kimliği olarak sunun. Genellikle bu favicon, web sitenizde bulunan logo ile ilgilidir, yalnızca daha küçük boyuttadır. Ancak logo çok büyük olduğunda ve küçük düğmede görünmediğinde, onunla ilgili bir şey seçme eğilimindesiniz.
- Sayfanızı kaydeden kullanıcıların onu görsel olarak tanımlamasına yardımcı olacaksınız. Böylece, url'yi veya şirketin adını hatırlamasalar bile, favicon'un görüntüsü nedeniyle onu bulacaklardır.
- SEO ile "iyi" olmak. Bu cımbızla alınmalıdır. Ve bir favicon'a sahip olmak ya da olmamak, SEO'yu doğrudan etkilemeyecektir (yani, sahip olduğunuz ya da olmadığınız için sizi daha iyi ya da daha kötü konuma getirmeyecektir). Şimdi, bir tarayıcı bir sayfaya girdiğinde o favicon'u araması ve bulamadığında 404 hatası vermesi gittikçe daha yaygın hale geliyor ve bu hataların SEO için iyi olmadığını biliyorsunuz. bir sayfanın.
Site ikonu nasıl yapılır
Gördükten sonra, bir web sayfasına sahip olurken favicon'un önemli bir unsur olduğu açıktır. Şimdi nasıl yaparsın?
Çoğu durumda ne yaptığını bilmelisiniz o web sitesinin logosunu veya çok büyükse onu tanımlayan bir şeyi seçin. Örneğin, bir şekilde aradığınız bir televizyon web siteniz olduğunu hayal edin. Ancak favicon'da bu çok büyük. Bunun yerine, onu ilişkilendirmek için bir televizyonun resmini koyabilirsiniz. Bu durumlarda, daha iyi tanımlamak için web sitenizle aynı renkleri giymeniz önerilir.
Ve şimdi, nasıl favicon oluşturabiliriz? Pekala, birkaç seçeneğiniz var:
Photoshop, Gimp ...
Başka bir deyişle, bir favicon bir görüntüyle tamamen aynı şekilde oluşturulduğundan, görüntü düzenleme programlarından bahsediyoruz. Tabii ki jpg, gif veya benzeri olarak bırakılamayacağı için öyle tanınması için .ico formatında kaydetmeniz gerekiyor.
Bunu yapmanın bu yolu favicon'u çok daha iyi özelleştirmenize olanak tanır, sıfırdan yaratmayı ve istediğiniz sonlandırmayı başarmak. Normalde bunun için normal boyuttaki bir resimle çalışırsınız ve ardından onu bu düğmenin boyutuna uyarlarsınız.
Aslında, iyi görünüp görünmediğini, temsili olup olmadığını ve her şeyden önce anlaşılıp anlaşılmadığını görmek için farklı tarayıcılarda yüklenmeli ve test edilmelidir.
Çevrimiçi araçları kullanma
Bu durumda, istediğiniz herhangi bir görüntüyü birkaç saniye içinde favicon'a dönüştürmeye özen gösteren web sayfalarına atıfta bulunuyoruz. Ama aynı zamanda seçeneğiniz de var favicon'unuzu doğrudan bu sayfalarla tasarlayın.
Birincisini istiyorsanız (görüntüyü yükleyin ve dönüştürün), Favicon Generator veya Favic-o-matic'i öneririz. Ama ikincisini istiyorsanız (sıfırdan tasarlayın), favicon.io veya x-icon editörü üzerine bahis yapın.
WordPress ile
Sayfanız WordPress'te mi yapıldı? Ve favicon'unuzu oluşturmak için bu sistemi kullanabileceğinizi biliyor musunuz? Bunun için, yüklediğiniz (veya yüklediğiniz) bir görüntüye göre bu düğmeyi oluşturmanıza izin veren bazı eklentileri kullanabilirsiniz. Ayrıca aracılığıyla "Görünüm / Özelleştir" yapabilirsiniz.
Favicon'u bir kez yaptıktan sonra, web sitenize koymanız ve sayfanızın adının sol alanında ve favorilere kaydederken gösterebilmek için onu tanımanız gerekir. Bu şekilde, gerçekten ziyaret etmek istedikleri sayfa olup olmadığını okumayı bırakmadan sizi kolayca tanıyacaklardır.