WordPress Sitenize Favicon Nasıl Eklenir

WordPress'e favicon eklemek yaklaşık 30 saniye sürer: Görünüm → Özelleştir → Site Kimliği → Site Simgesi yolunu izleyin, 512x512 boyutunda bir PNG yükleyin ve Yayımla'ya tıklayın. Tamam.

Ancak bu işe yaramazsa — veya daha fazla kontrol istiyorsanız — okumaya devam edin. Bilmeniz gereken birkaç püf noktası var.

Hızlı Yol: WordPress Özelleştiricisi

Bu yöntem, 4.3 veya üzeri sürüm çalıştıran her WordPress sitesinde işe yarar (2015'te yayınlandı). Görece güncel bir sürüm kullanıyorsanız bu seçenek sizde mevcuttur.

Adım 1: Özelleştiriciyi Açın

• WordPress yönetici panelinde Görünüm → Özelleştir yolunu izleyin
• Veya sitenizi görüntülerken yönetici çubuğundaki "Özelleştir"e tıklayın

Adım 2: Site Kimliğini Bulun

• Özelleştirici kenar çubuğunda Site Kimliği'ne tıklayın
• Site Simgesi'ne kadar kaydırın

Adım 3: Görselinizi Yükleyin

• Site simgesi seç'e tıklayın
• En az 512 x 512 piksel boyutunda bir PNG görsel yükleyin
• WordPress ihtiyaç duyduğu tüm küçük boyutları otomatik oluşturur (32x32, 180x180 vb.)
• İstenirse kırpın, ardından Yayımla'ya tıklayın

Bu kadar. Gerisini WordPress halleder — tarayıcı faviconları, Apple touch ikonları ve hatta Windows kutucuk görseli için <link> etiketlerini oluşturur.

Kod Yöntemi: Faviconu Manuel Olarak Ekleme

Bazen Özelleştirici yaklaşımı yeterli olmaz. Belki özel bir tema oluşturuyorsunuz veya temanız varsayılan davranışı geçersiz kılıyor. İşte kod ile nasıl ekleyeceğiniz.

Seçenek A: Dosyaları Temanıza Ekleyin

Favicon dosyalarınızı temanızın kök dizinine yükleyin, ardından temanızın functions.php dosyasına şunu ekleyin:

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

Seçenek B: SVG Favicon Kullanın

SVG faviconlar mükemmel ölçeklenir ve koyu modu destekler. Bunu functions.php'ye ekleyin:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

PNG yedek seçeneği, SVG faviconlarını henüz tam olarak desteklemeyen Safari için oradadır.

Eklenti Kullanımı (Tercih Ederseniz)

Birçok eklenti faviconları yönetir, ama dürüst olmak gerekirse yerleşik Özelleştirici çoğu site için gayet iyi çalışır. Eklentiler şu durumlarda mantıklıdır:

• Her sayfa veya yazı için farklı faviconlar
• Farklı simgelerin A/B testi
• Site başına faviconlu çoklu site yapısı

Popüler seçenekler arasında All in One Favicon ve Flavor (eski adıyla flavicon) bulunur. Ama tekrar söylüyorum — önce Özelleştirici'yi deneyin.

WordPress Blok Temaları (Tam Site Düzenleme)

Twenty Twenty-Four veya Twenty Twenty-Five gibi bir blok tema kullanıyorsanız süreç biraz farklıdır:

1. Görünüm → Düzenleyici yolunu izleyin
2. Stiller (yarım daire simgesi) seçeneğine tıklayın
3. Sitenizin genel stillerine gidin
4. Site Simgesi ayarı hâlâ Görünüm → Özelleştir → Site Kimliği altındadır

Blok temalar favicon için hâlâ aynı Özelleştirici'yi kullanır. WordPress bunu henüz Site Düzenleyici'ye taşımamıştır.

Önerilen Favicon Dosyaları

Tam kapsam için şu dosyaları hazırlayın:

WordPress Özelleştiricisi, 512x512 boyutunda bir görsel yüklediğinizde bunların çoğunu otomatik olarak oluşturur. SVG ve ICO dosyalarını istiyorsanız manuel olarak eklemeniz gerekir.

Sorun Giderme: Favicon Görünmüyor

Her Şeyi Temizleyin

WordPress favicon sorunları neredeyse her zaman önbellekten kaynaklanır:

1. Tarayıcı önbelleği: Ctrl+Shift+R (Windows) veya Cmd+Shift+R (Mac) ile zorla yenileyin
2. WordPress önbelleği: WP Super Cache, W3 Total Cache veya LiteSpeed Cache kullanıyorsanız — temizleyin
3. CDN önbelleği: Cloudflare, Fastly veya kullandığınız her ne ise — favicon URL'lerini temizleyin
4. Gizli modu deneyin: Önbelleğe alınmış dosya olmadan temiz bir oturum açar

Eklenti Çakışmalarını Kontrol Edin

Bazı SEO eklentileri ve tema çerçeveleri kendi favicon etiketlerini ekler. Sayfa kaynağınızda yinelenen <link rel="icon"> etiketleri görüyorsanız:

1. Sayfa kaynağını görüntüleyin (Ctrl+U)
2. "icon" veya "favicon" arayın
3. Yineleniyorsa hangi eklentinin eklediğini kontrol edin
4. Eklentinin favicon özelliğini devre dışı bırakın veya manuel kodunuzu kaldırın

Tema Geçersiz Kılma Sorunları

Bazı temalar (özellikle premium olanlar) Özelleştirici'yi geçersiz kılan kendi favicon ayarlarına sahiptir. Şunları kontrol edin:

• Tema Seçenekleri panelinde bir favicon ayarı
• Temanın header.php dosyasında sabit kodlanmış <link rel="icon"> etiketleri
• Favicon talimatları için tema belgeleri

Sorun Giderme: Google Yanlış Faviconu Gösteriyor

Google, arama sonuçlarındaki faviconları güncellemek için günler veya haftalar sürebilir. İşte hızlandırmanın yolu:

Google'ın Favicon Gereksinimleri

Google'ın arama sonuçlarında favicon göstermek için belirli kuralları vardır:

• 48 pikselin katı olmalıdır (48x48, 96x96, 144x144)
• Kare olmalıdır
• Uygunsuz veya müstehcen içerik olmamalıdır
• Web sitesini temsil etmelidir (genel bir simge olmamalı)

Güncellemeyi Hızlandırın

1. Faviconunuzun yayında ve erişilebilir olduğundan emin olun
2. Google Search Console açın
3. Ana sayfanızda URL İnceleme kullanın
4. Dizine Ekleme İste'ye tıklayın
5. Bekleyin — genellikle 1-2 hafta sürer

Sorun Giderme: Masaüstünde Görünen Favicon Mobilde Görünmüyor

Mobil tarayıcılar favicon formatları konusunda daha seçicidir:

• iOS Safari: apple-touch-icon (180x180) gerektirir — normal favicon ana ekranda gösterilmez
• Android Chrome: Ana ekran için simge referansları içeren manifest.json arar
• PWA: Web uygulama manifest'inde tanımlanmış hem 192x192 hem 512x512 simge gerektirir

WordPress sitenizde bir web uygulama manifest'i varsa (bazı temalar ve eklentiler ekler), içindeki simge yollarının doğru olduğundan emin olun.

Çoklu Site Yapısı Hakkında

WordPress Çoklu Site yapısı mı kullanıyorsunuz? Her sitenin kendi faviconuna ihtiyacı var.

• Özelleştirici site başına çalışır, bu nedenle her alt site kendi simgesine sahip olabilir
• Ağ düzeyindeki ayarlar varsayılan bir favicon içermez
• Ağ genelinde varsayılan bir favicon istiyorsanız, zorunlu eklentiler (wp-content/mu-plugins/) içinde functions.php üzerinden ekleyin

En İyi Uygulamalar

• Büyük başlayın: En az 512x512 yükleyin — WordPress küçültür, asla büyütmez
• PNG kullanın: Saydam arka planlar JPEG'den daha iyi çalışır
• Sade tutun: Faviconunuz küçüktür — karmaşık logolar 16x16'da okunamaz
• Tarayıcılar arası test edin: Kurulumunuzu doğrulamak için Favicon.im kullanın
• Faviconunuzu versiyonlayın: Önbelleği kırmak için güncellerken URL'ye ?v=2 ekleyin

SSS

WordPress'e favicon nasıl eklerim?

Görünüm → Özelleştir → Site Kimliği → Site Simgesi yolunu izleyin, 512x512 boyutunda bir PNG görsel yükleyin ve Yayımla'ya tıklayın. WordPress gerekli tüm boyutları otomatik oluşturur.

WordPress faviconu hangi boyutta olmalıdır?

En az 512 x 512 piksel yükleyin. WordPress otomatik olarak 32x32, 180x180 ve diğer boyutları oluşturur. Google arama sonuçları için 48 pikselin katlarını kullanın.

WordPress faviconum neden görünmüyor?

Genellikle bir önbellekleme sorunudur. Tarayıcı önbelleğinizi, WordPress önbellek eklentisini ve CDN önbelleğini temizleyin. Gizli pencere deneyin. Ayrıca yinelenen favicon etiketlerine neden olan eklenti çakışmalarını kontrol edin.

WordPress'te SVG favicon kullanabilir miyim?

WordPress güvenlik nedeniyle varsayılan olarak SVG yüklemelerini desteklemez. functions.php kodu aracılığıyla SVG favicon desteğini manuel olarak ekleyebilir veya SVG yüklemelerini etkinleştiren bir eklenti kullanabilirsiniz.

WordPress'te açık ve koyu mod için farklı faviconlar nasıl eklenir?

prefers-color-scheme için gömülü CSS medya sorguları içeren bir SVG favicon kullanın. Özelleştirici yalnızca PNG/ICO formatlarını desteklediğinden SVG dosyasını functions.php aracılığıyla manuel olarak ekleyin.

Kaynaklar

1. Site Icon - WordPress Developer Resources - WordPress Resmi Belgeleri
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Favicon test ve doğrulama aracı