1. Anasayfa
  2. Blog
  3. WordPress Kılavuzları

WordPress Siteye Favicon Nasıl Eklenir?

WordPress Siteye Favicon Nasıl Eklenir?

Favicon (favori simge / site simgesi), tarayıcıda web sitenizin markasını ya da online kimliğini temsil eden genellikle 16×16 piksel boyutundaki küçük simgelerdir. Tarayıcı sekmelerinde, arama sonuçlarında, yer imlerinde, geçmiş arşivlerinde vb. görülen bir Favicon’a sahip olmak özellikle marka bilinirliğine büyük katkı sağlar. Peki WordPress’e Favicon nasıl eklenir? Bu yazıda, Favicon kullanmanın önemine ve WordPress Favicon ekleme yöntemlerine değineceğiniz.

Dönüşüm oranını %400’e kadar artırma potansiyeline sahip olan favicon, marka tanıma ve kullanıcı deneyimini geliştirmenin yanı sıra, bir ziyaretçiye doğru web sitesinde gezindiğini ve doğru sayfada olduğunu garanti eder. Örneğin; bir İnternet kullanıcısı birkaç sekme açık olduğunda web sitenize karşılık gelen sekmeyi favicon sayesinde daha kolay bulabilir. Ayrıca, favicon sitenize profesyonel bir görünüm kazandırarak favicon kullanmayan sitelere göre daha avantajlı olmanızı sağlar.

Favicon avantajları

İlk kez 1999 yılında Internet Explorer 5 ile hayatımıza giren favicon, bugün web standartlarının vazgeçilmez bir parçası haline geldi. Google bile arama sonuçlarında favicon’ları gösteriyor – bu da SEO açısından ne kadar önemli olduğunun göstergesi.

Favicon Oluşturma ve WordPress Siteye Favicion Ekleme

Artık Favicon’un ne demek olduğunu ve web siteleri için önemini anladığımıza göre, şimdi sıra geldi “Favicon nasıl nasıl oluşturulur?” sorusunu yanıtlamaya!

Favicon oluştururken göz önünde bulundurulması gerekenler:

  • Favicon oluştururken en ideal çözünürlük 512×512 piksel olarak kabul edilir. Bu boyut, farklı tarayıcılarda ve cihazlarda net bir görüntü sunmak için oldukça uygundur.
  • Favicon, tarayıcılarda genellikle 16×16 veya 32×32 piksel boyutlarında gösterildiği için fazla detaylı veya karışık tasarımlar göz yorabilir ve anlaşılmaz hale gelebilir. Bu yüzden simgenizin olabildiğince sade, net ve tanınabilir olmasına dikkat edin.
  • Favicon tasarımınızın, web sitenizin logosu veya marka kimliğinizle uyumlu olması çok önemli. Aynı renk paleti, yazı tipi ya da sembolleri kullanarak bütünlük sağlayabilirsiniz. Örneğin Google’ın favicon’u, markayı temsil eden 4 ana rengi içeren bir “G” harfiyle oldukça tanıdık ve akılda kalıcıdır.
  • Arama sonuçlarında favicon gösterimine uygun olmak için her zaman Google tarafından sağlanan Yönergelere uyduğunuzdan emin olun.
Boyut GereksinimleriDosya FormatlarıTasarım İpuçları
Modern web için 512×512 piksel öneriliyor. WordPress otomatik olarak farklı boyutlar oluşturur:

— 16×16 px – Eski tarayıcılar
— 32×32 px – Standart ekranlar
— 180×180 px – Apple cihazlar
— 192×192 px – Android cihazlar
WordPress’in desteklediği formatlar:

PNG: Şeffaf arka plan destekler
ICO: Klasik format
SVG: Vektörel
JPG: Kullanılabilir ama önerilmez
PNG formatı en güvenli seçenek.
— Basit ve anlaşılır tutun
— Markanızın renklerini kullanın
— Çok detaydan kaçının
— Logonuzun sadeleştirilmiş versiyonu ideal
— Kontrastı yüksek renkler tercih edin
— Şeffaf arka plan kullanın

💡 İpucu: Favicon’unuzu oluştururken hem açık hem koyu tema modunda nasıl göründüğünü test edin. Modern tarayıcılar artık tema bazlı görünüm değişikliklerini destekliyor!

Favicon oluşturmanın çeşitli yolları mevcut. Markanızı iyi tanımlayan profesyonel görünümlü bir favicon tasarlayabilecek tasarımcılarla çalışabilirsiniz. Favicon’unuzu kendiniz tasarlamak isterseniz Adobe photoshop ya da Canva gibi araçlardan faydalanabilirsiniz. Ayrıca, Favicon oluşturmak için WordPress Favicon Eklentisini kullanabilir ya da Favicon-Generator gibi online araçları kullanabilirsiniz.

  • Favicon Generator ile favicon oluşturmak için önce Favicon-Generator bağlantısını ziyaret edin ve aşağıdaki resimde gösterildiği gibi favicona dönüştürmek istediğiniz resmi yükleyin. Gerekli işaretlemeleri yapın ve “Create Favicon” butonuna tıklayın.
favicon olusturma
  • Şimdi karşınıza indirilebilir bir zip dosyası ve bir kod dizisi çıkacak. Zip dosyasını bilgisayarınıza indirip ardından sitenizin kök dizinine yükleyebilir ya da indirme dosyasının altındaki kodları kopyalayıp header.php dosyanızda <head> etiketlerinin arası yapıştırabilirsiniz. (Aşağıda detaylı olarak anlatacağız.)

📌 Favicon’unuzu tasarlamak için herhangi bir araç kullanmak yerine kendiniz tasarlamayı seçtiyseniz, Favicon’u tasarladıktan sonra dosyayı desteklenen dosya formatında kaydetmeniz gerekir. Daha önce, yaygın olarak kullanılan dosya türü “Favicon.ico” idi. Ancak günümüzde tüm modern web tarayıcıları artık PNG, GIF ve ICO dosya formatlarını destekliyor.

1. Tema Özelleştirici ile WordPress Favicon Ekleme

WordPress 4.3 sürümünden itibaren, admin panelden siteye kolaylıkla favicon eklenebilmektedir. Bu yöntemin en büyük avantajı, WordPress’in otomatik olarak tüm gerekli boyutları oluşturması ve doğru yerlere yerleştirmesi. Siz sadece tek bir yüksek çözünürlüklü görsel yüklersiniz, gerisini sistem halleder.

  • WordPress Yönetim paneline giriş yapın.
  • Sol menüden Görünüm » Özelleştir‘i tıklayın ve ardından sol kenar çubuğundan Site Kimliği sekmesine tıklayın.
  • “Site Simgesi” veya “Site Icon” yazan alana tıklayın.
  • Şimdi medya kitaplığından bir görüntü seçebilir ya da bilgisayarınızdan bir görüntü yükleyebilirsiniz. Görüntüyü yükledikten sonra “Seç” butonuna tıklayın.
  • WordPress otomatik olarak bir kırpma aracı açacak. Görselin kare bir alan içinde doğru şekilde yerleştiğinden emin olun.
  • Son olarak, değişiklikleri uygulamak için üstteki mavi Yayınla düğmesine tıklayın.
wordpress favicon ekleme 1
  • Görüntüden memnun değilseniz ya da herhangi bir nedenle değişiklik yapmanız gerekiyorsa, yine aynı yolu kullanarak WordPress favicon değiştirme işlemini gerçekleştirebilirsiniz.
  • Değişiklikleri göremiyorsanız tarayıcınızın önbelleğini temizleyin. Ayrıca bir önbellek eklentisi kullanıyorsanız, yaptığınız değişiklikleri görmek için sitenizin de önbelleğinii temizlemeyi unutmayın.

2. Eklenti Kullanarak WordPress Favicon Ekleme

Varsayılan WordPress site simgesi özelliği dışında daha fazla seçenek arıyorsanız, WordPress Favicon eklentilerinden yardım alabilirsiniz. Aynı kolay işlevselliğe sahip olan, ancak size çok daha fazla özelleştirme seçneği sunan çeşitli ücretsiz Favicon Eklentileri mevcut.

Bu alanda en çok tercih edilen ve kullanımı oldukça kolay olan seçeneklerden biri Favicon by RealFaviconGenerator eklentisidir. Eklentinin kurulumu ve kullanımı için;

  • Öncelikle, WordPress panosu > Eklentiler > Yeni ekle aracılığıyla ReavFaviconGenerator eklentisini yükleyin (Bkz- WordPress Eklenti Yükleme İşlemi Nasıl Yapılır?)
  • Şimdi Görünüm > Favicon’a gidin ve medya kitaplığından en az 70×70 olması gereken bir resim seçin ve aşağıda gösterildiği gibi Favicon Oluştur düğmesine tıklayın.
eklenti ile wordpress favicon ekleme 1
  • Favicon oluştur’a tıkladığınızda, eklenti sitesine yönlendirileceksiniz. Sayfayı aşağı kaydırarak “Generate your Favicon and HTML code” düğmesini bulup tıklayın. Böylece web sitenize tekrar yönlendirileceksiniz. Ardından Favicon ekleme işleminin başarılı olduğuna dair bir bildirim göreceksiniz.

3. FTP ile Manuel Favicon Ekleme

Bazı durumlarda WordPress’in yerleşik sistemini kullanamayabilirsiniz – tema uyumsuzlukları, eski WordPress sürümleri veya özel gereksinimler söz konusu olabilir. İşte manuel yöntem:

  • Favicon dosyanızı hazırlayın: Dosyayı favicon.ico olarak adlandırın (PNG de kullanabilirsiniz ama ICO daha evrensel)
  • FTP istemcinizi açın: FileZilla, Cyberduck veya hosting panelinizin dosya yöneticisini kullanabilirsiniz
  • Sunucunuza bağlanın: FTP bilgilerinizi hosting sağlayıcınızdan alabilirsiniz
  • Kök dizine gidin: public_html veya www klasörünü bulun
  • Favicon’u yükleyin: Dosyayı doğrudan kök dizine atın.

Manuel yükleme yaptıktan sonra, bazı durumlarda favicon’un tanınması için tema dosyalarınıza kod eklemeniz gerekebilir. header.php dosyanızın <head> bölümüne şu kodu ekleyin:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

⚠️ Önemli not: Manuel yöntem teknik bilgi gerektirir ve hata riski taşır. Mümkünse yerleşik WordPress özelleştiriciyi kullanmanızı öneririz. Ancak özel durumlarda (örneğin çoklu favicon desteği, farklı temalarda farklı favicon’lar) bu yöntem daha fazla esneklik sağlar.


Editör Notu: İçeriğimiz okuyucu desteğiyle finanse edilmektedir. Bu, bağlantılarımızdan bazılarına tıkladığınızda komisyon kazanabileceğimiz anlamına gelir.

Burada sadece teorik bilgiler değil, gerçek deneyimlere dayanan pratik çözümler var. Burada yol arkadaşı olacağız. Karmaşık konuları birlikte çözecek, teknik detayları birlikte aşacağız...

Yazarın Profili