2026'da hangi favicon boyutlarına ihtiyacınız var? İdeal set

2026'da ideal favicon seti şöyledir: 16, 32 ve 48 px görselleri içeren bir favicon.ico, bir 96x96 PNG (Google Arama için), isteğe bağlı bir SVG favicon, bir 180x180 apple-touch-icon.png ve web uygulaması manifestinde tanımlanan 192x192 ve 512x512 PNG dosyaları (ayrıca maskable bir 512). Windows karoları ve eski Apple boyutları yalnızca çok eski cihazları desteklemeniz gerekiyorsa lazımdır. Aşağıda bunun nedenini bir boyut tablosu, kullanıma hazır HTML ve kaçınmanız gereken yaygın hatalarla birlikte açıklıyoruz.

Favicon dünyası eskiden karmaşıktı: her tarayıcı ve işletim sistemi kendi boyutunu istiyordu ve bu da meşhur 20 satırlık <head> bloklarını ortaya çıkarıyordu. Bugün bunların çoğu miyadını doldurdu. Modern tarayıcılar tek bir iyi simgeyi ölçekler, iOS tek bir boyut ister, Android ise manifesti okur. Bu makale, gerçekten gerekli olanı yalnızca "olsa iyi olur" düzeyinde kalanlardan ayırıyor.

Kısa cevap: ideal favicon dosya seti

• Site kök dizininde favicon.ico (tek dosyada 16, 32, 48 px). Tarayıcılar, haber okuyucuları ve birçok araç hâlâ otomatik olarak /favicon.ico adresini ister.
• Her boyutta keskin görüntü ve karanlık mod desteği için favicon.svg (isteğe bağlı ama önerilir).
• Açık yedekler olarak PNG 16x16, 32x32 ve 96x96. 96 px sürüm, 48 px'in katı olmasını şart koşan Google Arama'ya yardımcı olur.
• 180x180 boyutunda, opak, saydamlıksız apple-touch-icon.png.
• manifest.json içinde 192x192 ve 512x512 PNG, ayrıca Android için maskable 512x512 simge.
• Mobilde tarayıcı arayüzünü renklendirmek için theme-color meta etiketi.
• browserconfig.xml ile Windows karoları (70, 150, 310 px), yalnızca eski Windows ve IE11 sabitlenmiş siteleri için.

Favicon boyutları tablosu: amaç, dosya adları ve öncelik

Bu tabloyu bir kontrol listesi olarak kullanın. "Gerekli", normal bir sitenin bu olmadan bozuk veya yarım görüneceği anlamına gelir; "Önerilir" belirgin bir kalite artışı demektir; "İsteğe bağlı" ise niş veya eski kullanım içindir.

favicon.ico: tek dosyada 16, 32 ve 48 px

ICO dosyası, birden fazla bitmap barındıran bir kapsayıcıdır. İyi bir favicon.ico, tarayıcının veya işletim sisteminin en yakın eşleşmeyi seçebilmesi için 16x16, 32x32 ve 48x48 görsellerini içerir. Dosyayı alan adınızın kök dizinine koyun (https://example.com/favicon.ico). HTML'iniz başka bir yeri gösterse bile birçok tarayıcı botu, RSS okuyucusu ve eski tarayıcı tam olarak bu URL'yi ister; bu dosyanın var olması günlüklerinizdeki 404 gürültüsünü önler.

Bir PNG'nin uzantısını sadece .ico olarak değiştirmeyin. Çoğu tarayıcı buna tolerans gösterir, ancak bazı araçlar reddeder ve çok çözünürlüklü yapının avantajını kaybedersiniz. Gerçek bir ICO dışa aktarın.

PNG favicon'lar: 16, 32 ve 96 px

Açık sizes değerine sahip PNG bağlantıları, tarayıcının ICO'yu ayrıştırmadan en uygun bitmap'i seçmesini sağlar. Pratikte 32x32 yüksek DPI sekmeleri karşılar ve 16x16 bugün neredeyse gereksizdir. 96x96 boyutunu eklemek değerlidir; çünkü Google Arama sonuçların yanında favicon gösterir ve boyutu 48 px'in katı olan (48x48, 96x96, 144x144 vb.) kare bir simge gerektirir. 96 px'lik bir dosya, Google mobil sonuçlar için küçülttüğünde 48 px'lik bir dosyadan daha keskin bir kaynak sağlar.

Tasarım ipucu: 16 px'te ince ayrıntılar kaybolur. Kalın, basit bir şekil, yüksek kontrast ve az metin ya da hiç metin kullanmayın. Simgenizi dışa aktarmadan önce MakeFav düzenleyicisinde ayarlayıp önizleyebilirsiniz.

SVG favicon ve karanlık mod

SVG favicon, her ekran yoğunluğunda keskin kalan tek bir küçük dosyadır. Chromium tabanlı tarayıcılar ve Firefox bunu destekler. Safari'nin desteği tarihsel olarak sınırlı olduğundan asla yalnızca SVG'ye güvenmeyin: ICO ve PNG yedeklerini tutun.

En büyük avantaj temalandırmadır. SVG CSS içerebildiği için simgeyi kullanıcının renk düzenine prefers-color-scheme ile uyarlayabilirsiniz:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Medya sorgusunun sekme çubuğunun kullandığı tarayıcı veya işletim sistemi temasını yansıttığını unutmayın. Kendi web sitenizdeki bir tema düğmesini takip etmez.

Bilinen bir tuhaflık: hem ICO hem SVG listelendiğinde Chrome ICO'yu seçebilir. ICO'yu sizes="32x32" ile tanımlayıp SVG'yi sonrasında listelemek, aşağıdaki kodda gösterildiği gibi Chrome'un SVG'yi tercih etmesini sağlar.

Apple touch icon: 180x180 ve eski boyutlar

Bir kullanıcı sitenizi iOS veya iPadOS ana ekranına eklediğinde Safari apple-touch-icon dosyasını kullanır. Bugün tek bir 180x180 px PNG yeterlidir: iOS bunu eski cihazlar ve iPad'ler için küçültür. Dosyaya apple-touch-icon.png adını verin ve kök dizine koyun; hiç link etiketi yoksa iOS varsayılan olarak bu dosyayı arar.

Apple simgesi için kurallar:

• Saydamlık yok. iOS saydam pikselleri siyahla doldurur; bu yüzden saydam bir logo çoğunlukla siyah bir lekeye dönüşür. Düz bir arka plan rengi ekleyin.
• Yuvarlatılmış köşe yok. iOS kendi yuvarlatma maskesini uygular. Tam bir kare verin.
• Köşeler kırpıldığı için önemli içeriği kenarlardan uzak tutun.

Eski boyutlara (57, 72, 76, 114, 120, 144, 152, 167) ne zaman ihtiyacınız olur? Yalnızca iOS 6 veya öncesini destekliyorsanız ya da iPad Pro (167 px) ve iPad (152 px) için cihaza özel piksel kontrolü istiyorsanız. 2026'da hemen hemen her site için tek başına 180x180 dosyası yeterlidir. Aşağıdaki maksimum uyumluluk kurulumu, bütünlük için birkaçını içerir.

Android ve PWA simgeleri: 192, 512 ve maskable

Android'deki Chrome ve PWA destekli diğer tarayıcılar simgeleri <link rel="icon"> yerine web uygulaması manifestinden okur. Yüklenebilirlik için en az bir 192x192 ve bir 512x512 PNG gerekir. 192 px simge ana ekranda ve uygulama başlatıcıda kullanılır; 512 px simge ise açılış ekranlarında ve yükleme pencerelerinde görünür.

Maskable simgeler ve güvenli alan

Android uyarlanabilir simgeleri, cihaza bağlı olarak daire, squircle veya başka bir şekle kırpılabilir. Maskable bir simge güvenle kırpılacak şekilde tasarlanır: önemli içerik güvenli alanın, yani görselin %80'i çapında ortalanmış bir dairenin (yarıçap, kenarın %40'ına eşittir) içinde kalmalıdır. 512x512'lik bir dosya için bu, logonuzu yaklaşık 410 px çaplı bir daire içinde tutmak ve maskeleme sonrasında boşluk görünmemesi için arka plan rengini dört kenara da uzatmak demektir.

Maskable simgeyi "purpose": "maskable" ile kendi girdisi olarak tanımlayın. Tek bir dosyada "any maskable" kullanmaktan kaçının: maskeleme için gereken boşluk, simge maskesiz gösterildiğinde fazla küçük görünür.

Örnek manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Dosyayı application/manifest+json (veya application/json) olarak sunun ve her sayfadan <link rel="manifest" href="/manifest.json"> ile bağlayın. Bazı projeler dosyaya site.webmanifest adını verir; önemli olan ad değil, bağlantıdır.

Windows karoları ve browserconfig.xml

Windows 8.1 ve 10, kullanıcıların bir siteyi Başlat menüsüne sabitlemesine izin verir; IE11 ve eski Edge karo görsellerini browserconfig.xml dosyasından okur. Olağan boyutlar 70x70 (küçük), 150x150 (orta), 310x150 (geniş) ve 310x310 (büyük) şeklindedir. Chromium tabanlı Edge bunun yerine manifesti ve normal favicon'ları kullanır; dolayısıyla bu eski bir özelliktir. Yalnızca hedef kitleniz hâlâ eski Windows kurulumlarını içeriyorsa, örneğin kurumsal ortamlarda, ekleyin.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: tarayıcı arayüzünü renklendirme

theme-color meta etiketi, mobil tarayıcılara (ve bazı masaüstü tarayıcılara) adres çubuğu veya başlık çubuğu için hangi rengi kullanacaklarını söyler. Bir favicon değildir, ancak aynı marka setine aittir. Açık ve karanlık mod için ayrı değerler verebilirsiniz:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Minimal modern kurulum ve maksimum uyumluluk

Minimal modern kurulum (çoğu site için önerilir)

Beş dosya gerçek dünya kullanımının %99'undan fazlasını karşılar: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) ve iki manifest simgesi (192 ve 512). Google Arama görünürlüğü sizin için önemliyse 96x96 PNG'yi, bir PWA yayınlıyorsanız da maskable bir simgeyi ekleyin.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Maksimum uyumluluk kurulumu

Geniş veya kurumsal bir kitleye hizmet veriyorsanız ya da olası her istemciyi kapsamak istiyorsanız bunu seçin. Açık PNG boyutlarını, eski Apple boyutlarını, Windows karolarını ve tema renklerini ekler.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

/ ile başlayan köke göreli yollara dikkat edin. Her sayfa derinliğinde çalışırlar; bu da bizi en yaygın hatalara getiriyor.

Yaygın favicon hataları ve çözümleri

1. Yanlış yollar

href="favicon.ico" gibi bir bağlantı geçerli URL'ye göre çözümlenir; dolayısıyla / adresinde çalışır ama /blog/post/ adresinde bozulur. Köke göreli (/favicon.ico) veya mutlak URL'ler kullanın. Ayrıca dosyaların gerçekten var olduğunu kontrol edin: her URL'yi doğrudan tarayıcıda açın ve bir 404 sayfasına veya oturum açma duvarına yönlendirme değil, HTTP 200 döndürdüğünden emin olun.

2. Eksik veya yanlış sizes özniteliği

sizes olmadan tarayıcılar simgeleri incelemek için indirmek zorunda kalır ve yanlış olanı seçebilir. PNG bağlantılarında her zaman sizes belirtin ve gerçek piksel boyutlarıyla eşleştiğinden emin olun. 32x32 olarak etiketlenmiş ama aslında 64x64 olan bir dosya tutarsız sonuçlara yol açar.

3. Agresif önbellekleme

Tarayıcılar favicon'ları uzun süre, çoğunlukla sayfa önbelleğinden bağımsız olarak önbelleğe alır. Marka yenilemesinden sonra eski simge günlerce görünmeye devam edebilir. Dosya adını değiştirin veya bir sürüm sorgu dizesi ekleyin (/favicon.ico?v=2) ve link etiketlerini güncelleyin. Sert yenileme çoğu zaman sekme simgesini yenilemez; simge URL'sini doğrudan açıp yeniden yüklemek genellikle yeniler.

4. Kare olmayan görseller

Favicon'lar kare olmalıdır. Dikdörtgen bir logo öngörülemez şekilde esner, kırpılır veya kenarlarına boşluk eklenir. Geniş bir yazı logosunu küçültmek yerine, bir baş harf veya sembol gibi özel bir kare işaret tasarlayın.

5. Siyaha dönüşen saydam Apple touch icon'lar

iOS saydamlığı siyahla doldurur. 180x180 simgeye opak bir arka plan verin ve köşeleri önceden yuvarlamayın.

6. Güvenli alanı olmayan maskable simgeler

Logo, maskable simgenin kenarlarına değerse Android onu keser. Logoyu merkezdeki %80'lik daire içinde tutun ve tüm tuvali arka plan rengiyle doldurun.

7. Simgeleri tarayıcı botlarına kapatmak

robots.txt favicon yolunuza izin vermiyorsa Google onu alamaz ve arama sonuçlarında genel bir dünya simgesi gösterir. Ayrıca Google'ın favicon'un sayfayla aynı ana makinede olmasını istediğini ve onu yalnızca ara sıra yenilediğini unutmayın; bu nedenle değişikliklerin görünmesi günler veya haftalar sürebilir.

8. Manifest bağlantısını veya purpose değerlerini unutmak

Bağlanmamış bir manifest ya da 192 ve 512 px simgeleri eksik bir manifest, Chrome'da yükleme isteminin görünmesini engeller. Tarayıcınızın geliştirici araçlarında Application sekmesinden doğrulayın.

Tüm seti tek tıkla oluşturun

Bir görsel düzenleyicide düzinelerce dosyayı elle oluşturmak, sonra ICO'ya dönüştürmek ve manifesti yazmak sıkıcıdır ve hataya açıktır. MakeFav, yukarıdaki tüm dosyaları tek bir görselden, metinden veya emojiden oluşturur: çok boyutlu favicon.ico, PNG'ler, SVG, Apple touch icon, 192/512 PNG'ler, maskable simge, Windows karoları, manifest.json ve browserconfig.xml ile birlikte yapıştırmaya hazır bir HTML kod parçacığı; hepsi tek bir ZIP indirmesinde. Arka planı, kenar boşluğunu ve şekli düzenleyicide ince ayarlayabilir, mevcut bir siteyi favicon denetleyicisiyle doğrulayabilir ve oluşturma işlemini geliştirici kaynakları üzerinden otomatikleştirebilirsiniz.

Dağıtım kontrol listesi

1. Tüm dosyaları sitenizin kök dizinine yükleyin.
2. HTML kod parçacığını her sayfanın (veya ortak şablonunuzun) <head> bölümüne yapıştırın.
3. Yolların köke göreli olduğundan ve HTTP 200 döndürdüğünden emin olun.
4. Açık ve karanlık modu, iOS ana ekran kurulumunu ve Android kurulumunu kontrol edin.
5. Eksik veya uyumsuz boyutları yakalamak için denetleyiciyi çalıştırın.
6. Eski bir simgeyi değiştirdiyseniz bir sürüm dizesiyle önbelleği aşın.

Sık sorulan sorular

2026'da hâlâ favicon.ico'ya ihtiyacım var mı?

Evet. Modern tarayıcılar PNG ve SVG kabul etse de birçok tarayıcı botu, haber okuyucusu, e-posta istemcisi ve eski tarayıcı hâlâ doğrudan /favicon.ico ister. 16, 32 ve 48 px görseller içeren çok boyutlu bir ICO, eksik simgeleri ve 404 hatalarını önleyen küçük bir dosyadır.

Google Arama için favicon boyutu ne olmalı?

Google, boyutu 48 px'in katı olan, en az 48x48 kare bir favicon ister. 96x96 PNG güvenli bir seçimdir ve SVG de desteklenir. Google ayrıca dosyanın taranabilir olmasını gerektirir; bu yüzden robots.txt'de engellemeyin. Güncellemelerin görünmesi günler veya haftalar sürebilir.

Apple touch icon için 180x180 yeterli mi?

Hemen hemen tüm siteler için evet. iOS ve iPadOS, 180x180 PNG'yi güncel her cihaz için küçültür. Eski boyutlar (57 ila 152 px) yalnızca çok eski iOS sürümleri için önemlidir. Simgenin siyaha dönüşmemesi için opak bir arka plan kullanmayı unutmayın.

Maskable simge nedir ve buna ihtiyacım var mı?

Maskable simge, Android'in uyarlanabilir simge şekilleri için tasarlanmış 512x512 bir PNG'dir. Önemli içeriği ortadaki %80 çaplı bir dairenin içinde yer alır ve arka plan tüm kareyi doldurur. Buna yalnızca yüklenebilir bir PWA sunuyorsanız ihtiyaç duyarsınız; ancak simgenin beyaz bir dairenin içinde durmak yerine yerel bir uygulama gibi görünmesini sağlar.

Favicon'umu değiştirdim, neden eskisi hâlâ görünüyor?

Tarayıcılar favicon'ları ayrı olarak ve uzun süre önbelleğe alır. Dosyayı yeniden adlandırın veya ?v=2 gibi bir sürüm sorgu dizesi ekleyin, link etiketlerini güncelleyin, ardından simge URL'sini doğrudan açıp yeniden yükleyin. Arama motorlarının kendi kopyalarını yenilemesi daha uzun sürebilir.