WordPress Web Sitenize 3 Şekilde Favicon Nasıl Eklenir?

Her web sitesinin bir favicon'u olmalıdır. Küçük olmalarına rağmen, site simgeleri (veya site simgeleri) web tarayıcıları tarafından sitenizi (veya markanızı) güçlü bir şekilde temsil etmek için kullanılır. Favicons, tarayıcınızın sekmesinde yalnızca küçük bir resmi görüntülemek için kullanılmaz, aynı zamanda yer imleri ve pencere döşemeleri için de kullanılabilir. WordPress, doğrudan özelleştiriciden sitenize bir favicon eklemeyi kolaylaştırır. Ve şimdi bunu yapmak için önerilen yol budur. Ancak ihtiyaçlarınızı karşılayabilecek birkaç yol daha var.

WordPress'te Sık Kullanılanları Anlama

Favicon nedir

Favicon ("favori simge" terimi), kullanıcıların web sitenizi/şirketinizi tanıması için ek bir marka öğesi eklemek için web tarayıcıları tarafından kullanılan küçük bir simgedir. Sitenize bir favicon doğru bir şekilde yüklenmişse, tarayıcılar onu gerektiği gibi farklı konumlarda kullanır. Bu konumlar, tarayıcı sekmelerini (sayfa başlığının yanında), adres çubuklarını (URL'nin yanında), yer imlerini ve diğerlerini içerir.

WordPress'te favicons, kullanıcılara bu simgenin çeşitli durumlarda sitenizi temsil etmek için kullanılacağını bildiren yararlı bir açıklama olan "Site Simgeleri" olarak adlandırılır.

Favicon'ların Önemi

Favicons (veya Site Simgeleri), web sitenizi markalamada küçük ama çok önemli bir rol oynayabileceği için bir şirket logosuna benzer. Site simgesi olmayan bir web sitesi, kullanıcılara daha az güvenilir görünebilir (çünkü hepimiz onları görmeye alışkınız). Öte yandan, favicon'a sahip bir web sitesi, kullanıcıya ihtiyaç duyduğu güçlü görseli sunacak ve kullanıcı deneyimini artıracaktır. Bunu düşün. Yanında simgesi olan bir yer imi bulmak, metni okumaktan çok daha kolaydır.

Dosya formatları)

Sık kullanılanlar için kabul edilebilir birkaç görüntü formatı vardır, ancak en popüler ikisi ico ve png'dir. Bu biçimler, en çok tarayıcı desteğine sahiptir ve favicon'unuz için şeffaf arka planları destekler (jpg'den farklı olarak).

ICO Formatı

Geleneksel olarak, site simgeleri bir ICO dosyası (favicon.ico) olarak oluşturulur. Bir ICO dosyası, tarayıcının (masaüstü ve mobil) mevcut resimlerden gereken boyutu seçmesine izin vererek, farklı boyutlarda birden fazla görüntüyü tek bir dosyada saklamanıza olanak tanır. ico biçimiyle ilgili sorun, pek çok kişinin bunun ne olduğunu veya nasıl oluşturulacağını bilmemesidir. Gimp gibi bir fotoğraf düzenleyicide ICO dosyaları oluşturabilirsiniz, ancak en çok, özellikle şeffaf arka planlara sahip favori simgeler oluşturmak için süreci gerçekten kolaylaştıran bir çevrimiçi site simgesi oluşturucu kullanmak daha çekici görünüyor.

Neyse ki, WordPress 4.3'ün piyasaya sürülmesiyle, sitenize bir tane eklemek için ico biçiminde bir favicon oluşturma konusunda endişelenmemize gerek kalmadı. Özelleştirici, png, gif ve jpeg gibi daha popüler biçimleri kabul eden bir Site Simgesi seçeneğine sahiptir. Bu konuda daha sonra.

Not: Bazı eski tarayıcıların yalnızca ico biçimini desteklediğini ve başka hiçbir şeyi desteklemediğini ve tarayıcıların eski sürümleri için gerekli bir geri dönüş olabileceğini belirtmekte fayda var. Dolayısıyla, her iki dünyanın da en iyisine sahip olmak istiyorsanız (yani PNG ve ICO), bir eklentiye bakmanız veya manuel olarak eklemeniz gerekebilir.

PNG Formatı

HTML5'ten bu yana PNG biçimi, favori simgeleriniz için kabul edilebilir bir biçimdir ve artık tüm büyük tarayıcılar bunları desteklemektedir. Muhtemelen, bu, web genelinde yaygın kullanımı nedeniyle png daha tutarlı olduğu için ileriye dönük daha iyi bir seçenektir. Ancak, tüm tarayıcılar (eski tarayıcılar bile) ICO'yu desteklediğinden, istenmeyen 404 hatalarını önlemek için hem png hem de ico sürümlerini kullanmak en iyisi olabilir.

Boy

Sitenizin, tüm kullanım durumlarında en iyi şekilde görüntülenmesi için birden fazla favicon görüntü boyutuna ihtiyacı vardır (favicon'ların ico biçiminde başlamasının nedeni budur). Burada tüm farklı boyutlara girmeyeceğim, ancak WordPress özelleştiriciden bir site simgesi eklediğinizde, ihtiyaç duyulan en yaygın 4 boyut otomatik olarak oluşturulur, bu nedenle strese gerek yok.

Ancak, özelleştiriciye yüklediğiniz görüntünün en az 512 x 512 olduğundan emin olmanız gerekir. WordPress, bu orijinal dosyadan diğer boyutları aşağıdaki gibi oluşturacaktır:

32x32px favicon.
iPhone 6+ sürümüne kadar iOS için 180x180px uygulama simgesi.
192×192 piksel Android/Chrome uygulama simgesi.
Windows için 270x270px orta boy karo.

Adlandırma ve Yerleştirme

Favicon'un tam dosya adının "favicon.ico" olması gerektiği günleri hatırlayabilirsiniz. Sonra onu kök dizininize eklersiniz ve temelde bu kadardı. Zaman değişti ve neyse ki WordPress de değişti. Artık dosyanıza herhangi bir ad verebilir, başka biçimlerde kaydedebilir ve sitenizin herhangi bir yerinde saklayabilirsiniz. Site Simgenizi (favicon) eklemek için WordPress Özelleştirici kullanıyorsanız, WordPress birden fazla görüntü oluşturacak ve bunları medya klasörünüzde saklayacaktır.

Not: Kök dizine bir Favicon.ico yerleştirmek, geri dönüş olarak hala iyi bir fikirdir, ancak doğru yöntemi kullanmaya veya bir eklentiden yardım almaya dikkat edin.

Favicon'unuzu Oluşturma

Site simgesi bir resimdir, bu nedenle kendi site simgenizi tasarlamak kendi logonuzu tasarlamaktan farklı olmayacaktır. Gimp veya Photoshop gibi bir fotoğraf düzenleyici kullanabilirsiniz. Favicon'unuzu mükemmel bir kare olarak tasarlamayı unutmayın (ör. WordPress Site Simgeniz için 512×512). Saydam bir arka plan istiyorsanız, dosyanızı png (veya gif) olarak kaydedin. Bundan sonra, resminizi site simgemiz olarak WordPress'e yükleyebilirsiniz (bununla ilgili daha fazla bilgi daha sonra). Eğer png'nizi ico formatına dönüştürmek istiyorsanız, Convertico gibi bir çevrimiçi dosya dönüştürücü kullanmanızı öneririm.

İpucu: Bazen logonuzun kare bir bölümünü kırparak site simgenizi oluşturabilirsiniz. Süreci basitleştirmek istiyorsanız bu iyi bir fikir olabilir. Sadece bu simgenin markanızı temsil edeceğini unutmayın, bu yüzden dikkatsizliğe kapılmayın.

WordPress Web Sitenize 3 Şekilde Favicon Nasıl Eklenir?

Youtube Kanalımıza Abone Olun

#1 WordPress Özelleştirici ile Favicon Ekleme

Çoğu için, WordPress için göz önünde bulundurmanız gereken tek yöntem budur. Tek ihtiyacınız olan bir resim dosyası (png, gif, jpeg) ve gerisini WordPress halleder.

Wordrpess 4.3'ten beri, WordPress sitenize Özelleştirici içinde kolayca bir favicon (veya Site Simgesi) ekleyebilirsiniz. WordPress kontrol panelinden Görünüm > Özelleştir'e gidin.

Ardından Site Kimliği'ni seçin ve Site Simgenizi ayarlamak için bir seçenek bulacaksınız (Site Simgesi, Favicon için başka bir terimdir). Ardından medya kitaplığından görselinizi seçebilir veya yeni bir tane yükleyebilirsiniz. Görüntünüzün tüm kullanım durumları için en iyi kalitede oluşturulmasını sağlamak için dosyanızın en az 512 x 512 olduğundan emin olun.

İstediğiniz görüntüyü seçtikten sonra, tarayıcınızda doğru şekilde görüntülenmesi için görüntünüzü kırpmanız istenecektir. Bu, zaten tam olarak kare olmayan bir resim yüklüyorsanız yararlıdır.

Bu kadar! Gerisini WordPress yapacak. Resim kırpıldıktan sonra, WordPress tüm favicon kullanım durumları için gereken gerekli resim boyutlarını oluşturacaktır:

tarayıcı favicon için 32px
IOS uygulama simgesi için 180 piksel
Chrome Uygulaması Simgesi için 192 piksel
Windows kutucuğu için 270 piksel

Simgenin nasıl görüneceğine dair yararlı bir önizleme bile oluşturur.

Favicon'unuzun tarayıcınızda sihirli bir şekilde görünmesini görmek için değişikliklerinizi yayınlayın ve sayfanızı yenileyin. Hemen göremiyorsanız, site önbelleğini temizlemeniz veya sitenizi görmek için gizli/özel tarayıcı penceresinde açmanız gerekebilir.

#2 Eklenti Kullanarak Favicon Ekleme

WordPress sitenize favicon eklemek için bir eklentinin yardımını istiyorsanız, şanslısınız. WordPress deposunda basit bir arama, size aralarından seçim yapabileceğiniz bazı harika ücretsiz eklentiler sağlayacaktır. Şahsen, RealFaviconGenerator tarafından Favicon'dan başkasına bakmazdım. Bu eklenti, birden fazla görüntüyü tüm doğru yerlere yerleştirerek site simgenizin tüm tarayıcılarla uyumlu olmasını sağlar. Hatta kendi başınıza yapmak kolay olmayan her görüntünün tasarımını özelleştirmenize izin verir.

Eklentiyi kullanarak bir favicon eklemek için eklentiyi kurun ve Görünüm > Favicon'a gidin. Ardından resminizi yükleyin. Tam kare olduğundan ve en az 260 x 260 olduğundan emin olun.

Eklenti, IOS, Android(Chrome), Windows ve macOS (Safari) için site simgenizin özelleştirilmesini tamamlamak üzere sizi çevrimiçi oluşturucuya yönlendirecektir. Bu simgelerin tüm örneklerde harika görünmesini sağlamak için yalnızca birkaç dakika içinde marka renklerinizi ekleyebilirsiniz. İşiniz bittiğinde, sayfanın altındaki Favori Simgelerinizi ve HTML Kodunuzu Oluşturun düğmesini tıklayın.

Bir eklenti kullandığınız için herhangi bir kod için endişelenmenize gerek kalmayacak. Sitenize yönlendirileceksiniz ve simge ekranlarınızın güzel bir önizlemesi ile karşılaşacaksınız.

Bu kadar!

#3 Manuel Olarak Favicon Ekleme (WordPress 4.2 ve Daha Eski)

WordPress'in eski sürümlerinde (Özelleştirici yükseltmelerinden önce), sitenize iki adımda bir favicon ekleyebilirsiniz. Site dosyalarınızı değiştirmek için bir alt tema kullandığınızdan emin olun.

Öncelikle favicon.ico dosyanızı web sitenize yüklemeniz gerekir (yerel kurulum değilse FileZilla gibi bir FTP istemcisi kullanmanız gerekecektir). Site dosyalarınıza eriştikten sonra favicon'u kök dizininize yükleyin. Favicon'u alt tema klasörünüze de eklemeyi seçebilirsiniz.

Favicon'u kök dizine, tema klasörüne veya her ikisine birden eklemeniz gerekip gerekmediği konusunda farklı görüşler vardır. Örneğin, bazıları besleme okuyucularda görüntülenmek üzere kök dizinde bir favicon tutmayı önerir. Güvende olmak için, her zaman kök dizinde bir tane bulundurun. Nereye koymayı seçerseniz seçin, başlığınızdaki dosya konumuna bağlantı verdiğinizden emin olun. Tüm tarayıcıların otomatik olarak bulacağına güvenerek klasörünüze atmayın. Bazı eski tarayıcılar olmayabilir.

Favicon'unuza bağlanmak, temanızın (veya alt temanızın) başlık dosyasında (header.php) head etiketinin içinde bir html bağlantı etiketinin kullanılmasını gerektirir. İşte iki örnek.

Tema (veya alt tema) klasörünüzün kökündeki favicon'a (ICO formatında) bağlanmak için aşağıdaki kodu head etiketinin içine ekleyebilirsiniz.

<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Favicon.ico dosyasını tema klasörünüzün kök dizinine yerleştirmek için (örn. www.yourwebsite.com/wp-content/themes/twentyfourteen/favicon.ico), şunları kullanırsınız:

Favicon.ico'yu ana kök dizininize yerleştirmek için aşağıdakileri kullanın:

<link rel="icon" type="image/x-icon" href="http://www.yourdomain.com/favicon.ico">

Sizi bilmem ama ben WordPress 4.3 için gerçekten minnettarım.

Tema Seçeneklerini Kullanarak Favicon Ekleme

Genel olarak, WordPress için özel olarak oluşturulduğundan, varsa WordPress Özelleştirici'deki Site Simgesi özelliğini kullanmak yine de en iyi uygulamadır. Ancak, bazı WordPress temaları (özellikle daha eski olanlar), doğrudan tema ayarlarından bir favicon yükleme seçeneği içerir. Bu özel tema seçeneğini kullanırken dikkatli olun çünkü eski bir yöntem kullanabilir ve birden çok örnek için kullanmak üzere yalnızca bir görüntü oluşturabilir.

Ana Paket Servisler

Küçük bir özete ihtiyacınız varsa, WordPress sitenize sık kullanılan simgeler eklemeyle ilgili bazı temel çıkarımlar şunlardır:

1. Varsa, WordPress özelleştirici ile favicon'unuzu eklemelisiniz.
2. Site simgesi yerleşiminizin olması gereken her yerde olmasını sağlamak ve duruma göre site simgenizin nasıl görüneceği konusunda biraz daha fazla kontrole sahip olmak istiyorsanız, realfavicongenerator eklentisi gibi bir eklenti kullanın.
3. Herhangi bir nedenle kendinizi WordPress'in karanlık çağlarında bulursanız veya manuel bir yaklaşım benimsemeniz gerekiyorsa, doğru yöntemleri kullandığınızdan emin olun.
4. İyi bir nedeniniz olmadıkça, site simgenizi eklemek için yerleşik tema seçeneklerini (WordPress özelleştirici dışında) kullanmaktan kaçının.

Umarım bu, site simgeleri (site simgeleri) hakkında birkaç şeyi netleştirmeye yardımcı olur ve site simgenizin WordPress tarafından nasıl ele alındığı konusunda fikrinizi kolaylaştırır. Ve aşağıdaki yorumlarda konuyla ilgili olabilecek herhangi bir soru veya içgörü duymayı dört gözle bekliyorum.

Şerefe!