Favicon Nedir, Nasıl Oluşturulur? Boyutlar, ICO, Apple Touch Icon

Tarayıcı sekmesinde, yer imlerinde, telefon ana ekranında ve artık Google arama sonuçlarında sitenizin yanında duran o küçük simge favicon'dur. Eksikse sekmede boş bir dünya ikonu görünür, arama sonuçlarında Google varsayılan bir simge koyar ve site bir anda özensiz görünür. Sorun şu ki 2026'da "favicon" tek bir dosya değil, en az beş farklı boyut ve üç farklı formattan oluşan bir pakettir. Bu rehber hangi dosyaların gerçekten gerektiğini, nasıl üretileceğini ve HTML'e nasıl ekleneceğini anlatır.

Kısa cevap: Favicon, tarayıcı sekmesinde ve Google arama sonuçlarında sitenizin yanında görünen küçük simgedir. Kare, en az 512 piksellik bir logo ya da SVG'yi Favicon Oluştur aracına yükleyin; araç çok boyutlu ICO, apple-touch-icon, Android ikonları, manifest ve hazır head kodunu tek ZIP'te verir. Dosyaları site köküne kopyalayıp kodu <head> içine yapıştırmanız yeterlidir.

Favicon nedir?

"Favorites icon" kısaltması. 1999'da Internet Explorer 5, sık kullanılanlara eklenen sitelerin yanında 16×16 piksellik favicon.ico dosyasını göstermeye başladı. Bugün aynı simge tarayıcı sekmesi, geçmiş, yer imi çubuğu, iOS ve Android ana ekranı, Windows başlat menüsü, Safari sabitlenmiş sekmeler ve Google arama sonuçlarında kullanılıyor. Her yüzey farklı boyut ve biçim bekliyor.

Hangi boyutlar gerekir?

Google, arama sonuçlarında göstermek için 48 pikselin katı (48, 96, 144) bir ikon ve kare oran ister; ikonun robots.txt ile engellenmemiş olması ve ana sayfadan link verilmiş olması gerekir.

SVG mi, PNG mi, ICO mu?

• SVG: Her boyutta keskin, dosya 1–2 KB, prefers-color-scheme ile karanlık modda renk değiştirebilir. Safari'nin eski sürümleri ve bazı mobil tarayıcılar desteklemez; tek başına yetmez.
• PNG: Evrensel, şeffaflık destekler. Her boyut ayrı dosya gerektirir.
• ICO: Tek dosyada birden fazla boyut taşır. Windows ve eski tarayıcılar için hâlâ şarttır. Modern ICO dosyaları içlerinde PNG verisi taşıyabilir; bu sayede 48 piksellik girdi bile birkaç KB kalır.

Doğru cevap "üçü birden"dir: SVG modern sekmeler için, ICO geriye dönük uyumluluk için, PNG'ler mobil ana ekranlar için.

Paketi üretmek

Kaynak olarak en az 512×512, tercihen 1024×1024 piksel kare bir logo ya da bir SVG kullanın. Küçük boyutlarda okunur kalması için logoyu sadeleştirin: 16 pikselde yazı okunmaz, tek bir harf ya da sembol kullanın.

1. Logonun arka planı karışıksa önce Toplu Arka Plan Kaldır ile şeffaf PNG elde edin; yöntem seçimi arka plan kaldırma rehberinde anlatılıyor.
2. Favicon Oluştur aracına yükleyin. Araç 16/32/48 çoklu boyutlu ICO'yu, 180 piksel apple-touch-icon'u (zorunlu dolgu rengiyle), 192 ve 512 piksel Android ikonlarını, iç boşluklu maskable sürümü, site.webmanifest dosyasını ve hazır head kodunu tek ZIP'te verir.
3. Köşe yuvarlama ve arka plan rengini önizlemede ayarlayın. iOS ikonu kendisi yuvarlatır; Android maskable ikonda güvenli alan merkezdeki %80'lik dairedir.
4. ZIP'i açın, dosyaları sitenizin köküne kopyalayın, head kodunu <head> içine yapıştırın.

Logonuzu sosyal medya profilleri için farklı ölçülerde de üretmeniz gerekiyorsa Toplu Resim Boyutlandır aynı kaynaktan 400, 800 ve 1080 piksel kare çıktıları tek seferde verir; platformların güncel ölçüleri sosyal medya görsel boyutları listesinde, yuvarlak profil görseli hazırlama ise profil fotoğrafı rehberinde var. WebP ya da JPG sürümler için Toplu Resim Dönüştür kullanılabilir.

HTML'e ekleme

Dosyalar sitenin kökündeyse şu blok yeterlidir:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

site.webmanifest içinde 192 ve 512 piksellik ikonlar purpose: "any" ve purpose: "maskable" olarak ayrı ayrı listelenir. Android, ana ekrana ekleme sırasında bu dosyayı okur.

Sık yapılan hatalar

• Yalnızca favicon.ico koymak. iPhone ana ekranında bulanık bir ekran görüntüsü, Android'de harfli yer tutucu görürsünüz.
• Apple touch icon'u şeffaf bırakmak. iOS şeffaf alanları siyaha boyar; her zaman dolgu rengi verin.
• Detaylı logoyu küçültmek. 16 pikselde beş renkli, yazılı bir logo gri bir lekeye dönüşür. Favicon için ayrı, sade bir işaret tasarlayın.
• Önbelleği unutmak. Tarayıcılar favicon'u günlerce saklar. Değiştirdiğinizde dosya adına sürüm ekleyin ya da ?v=2 parametresi kullanın.
• Manifest'i yanlış yola koymak. site.webmanifest 404 dönüyorsa Android ikon göstermez; tarayıcı konsolunda kontrol edin.

İpuçları

Karanlık modda görünürlük için SVG içinde @media (prefers-color-scheme: dark) kuralıyla renk değiştirin; PNG'lerde ise ince beyaz bir kenarlık koyu sekme çubuklarında ikonu kaybolmaktan kurtarır. Google'ın arama sonuçlarında ikonu güncellemesi birkaç gün sürebilir; Search Console'dan ana sayfayı yeniden taratmak süreci hızlandırır. Logonun kaynağı HEIC ya da başka bir formattaysa önce HEIC Nedir? iPhone Fotoğraflarını JPG'ye Çevirmenin 5 Yolu rehberindeki adımlarla PNG'ye dönüştürün. Tüm üretim tarayıcınızda yapılır; logonuz hiçbir sunucuya yüklenmez.

Sık sorulan sorular

Favicon boyutu kaç piksel olmalı?

Tek bir boyut yetmez. ICO dosyasında 16, 32 ve 48 piksel; apple-touch-icon için 180; Android için 192 ve 512 piksel gerekir. Google arama sonuçları için ikon 48'in katı ve kare olmalıdır. Kaynağınız 512 veya 1024 piksel kare olursa tüm boyutlar bundan kayıpsız üretilir.

PNG'den ICO nasıl yapılır?

Kare PNG'yi Favicon Oluştur aracına yükleyin; araç 16, 32 ve 48 piksel katmanlarını tek favicon.ico dosyasında birleştirir ve diğer boyutlarla birlikte ZIP olarak verir. Dosya uzantısını elle .ico yapmak işe yaramaz; ICO ayrı bir kapsayıcı biçimdir.

Favicon neden görünmüyor ya da güncellenmiyor?

En sık neden önbellektir: tarayıcılar favicon'u günlerce saklar. Dosya adına sürüm ekleyin (favicon-v2.ico) ya da ?v=2 parametresi kullanın ve gizli pencerede deneyin. Diğer nedenler yanlış yol, 404 dönen manifest ve robots.txt ile engellenmiş ikon dosyasıdır.

Google arama sonuçlarında favicon nasıl çıkar?

Google, ana sayfada <link rel="icon"> ile tanımlı, kare oranlı, 48 pikselin katı bir ikon ister ve dosyanın taranabilir olması gerekir. Dosyayı ekledikten sonra Search Console'dan ana sayfayı yeniden taratın; güncelleme birkaç gün sürebilir.

Favicon SVG olabilir mi?

Evet, modern Chrome, Firefox ve Edge SVG favicon'u destekler ve dosya her boyutta keskin kalır. Ancak Safari'nin eski sürümleri ve bazı mobil tarayıcılar desteklemediği için SVG'yi tek başına değil, ICO ve PNG sürümleriyle birlikte kullanın.

WordPress'te favicon nasıl eklenir?

Görünüm → Özelleştir → Site Kimliği → Site Simgesi alanına en az 512 piksel kare bir PNG yükleyin; WordPress gerekli boyutları kendisi üretir. Apple ve Android ikonlarını daha ince kontrol etmek istiyorsanız ZIP'teki dosyaları temanın kök dizinine koyup head kodunu header.php içine ekleyebilirsiniz.