Web Siteniz İçin Nasıl Favicon Oluşturulur

“Favicon yap” tek bir dosya gibi görünür ve 1999'da öyleydi: site kökünde 16×16'lık bir favicon.ico. 2026'da eksiksiz bir favicon küçük bir dosya kümesidir — eski ve kök geri dönüş istekleri için bir ICO, iOS ana ekranları için bir PNG, web uygulaması manifesti için iki PNG ve isteğe bağlı olarak her boyutu ve karanlık modu tek başına hallettiği bir SVG. İyi haber: küme küçüktür, head kodu dört satırdır ve her şey tek bir kaynak görselden türer.

2026'da gerçekten önemli olan boyutlar hangileri

Favicon tavsiye sayfaları, artık var olmayan tarayıcılar için boyutlar içeren 30 satırlık kontrol listelerini sever. Mevcut platformların gerçekten yüklediği küme:

• 16×16 ve 32×32, favicon.ico içinde — tarayıcı sekmeleri, yer imleri çubuğu, geçmiş. Çoğu sekme 16 pikseli render eder; 32 piksel yüksek DPI ekranları ve Windows görev çubuğu sabitlemelerini kapsar. İkisini de tek bir ICO'ya paketlemek geleneksel ve en güvenli teslimat şeklidir.
• 180×180 PNG, apple-touch-icon — birisi sitenizi ana ekranına eklediğinde iOS'un kullandığı ve Safari'nin favorilerde ve paylaşım sayfalarında gösterdiği şeydir. iOS burada ICO'yu ve SVG'yi yok sayar; bu bir PNG olmak zorundadır.
• 192×192 ve 512×512 PNG, manifestte — bir link etiketinde değil, manifest.webmanifest içinde tanımlanır. Android ve masaüstü Chrome, ana ekran ikonları için 192 pikseli kullanır ve kurulum açılış ekranı için 512 piksel gerektirir; her ikisi de bir sitenin kurulabilir sayılması için tabandır.

Hepsi bu kadar. 57, 76, 114 ve 152 gibi boyutlar, hepsi 180 piksellik ikonu sorunsuz küçülten emekliye ayrılmış iOS nesillerine aittir. Bunları göndermek uyumluluk değil, ek istek ekler.

ICO'ya karşı PNG: ikisi de neden hâlâ var

ICO bir konteyner formattır: tek bir .ico dosyası farklı boyutlarda birçok görseli tutar ve tarayıcı en iyi eşleşmeyi seçer. Bu, tarihle birlikte, hayatta kalmasının sebebidir. Bir sayfa hiç ikon tanımlamadığında, tarayıcılar kendi inisiyatifleriyle site kökünden /favicon.ico isteğinde bulunur — WHATWG HTML standardı bu geri dönüşü belgeler — ve tarayıcı olmayan birçok istemci (besleme okuyucular, bağlantı önizleyiciler, tarayıcılar) HTML'inizi hiç ayrıştırmadan bu tam yolu ister. Kök seviyesinde bir ICO, sıfır kodla çalışan tek ikondur.

Tek bir açık boyutun tanımlandığı her yerde PNG kazanır: daha iyi sıkıştırır, her araç onu dışa aktarır ve hem apple-touch-icon hem manifest ikonları PNG gerektirir. Dolayısıyla “ICO mu PNG mi?” sorusunun yanıtı: kökte bir ICO, gerisi için PNG. (PNG'nin ne zaman doğru raster format olduğuna daha geniş bir bakış için PNG mi JPG mi WebP mi rehberine bakın.)

SVG favicon: tek dosya, hemen her boyut

Chromium tabanlı tarayıcılar ve Firefox <link rel="icon" href="/icon.svg" type="image/svg+xml">'ı kabul eder. Bir SVG favicon çözünürlükten bağımsızdır, genellikle çok boyutlu bir ICO'dan daha küçüktür ve — eşsiz biçimde — bir prefers-color-scheme medya sorgusu taşıyan bir <style> bloğu içerebilir; böylece ikon, koyu sekme çubuklarına karşı kendi rengini değiştirir. Hiçbir raster format bunu yapamaz.

Sorun Safari'dir: SVG favicon desteği geç geldi ve düzensiz, iOS ise dokunma ikonları için SVG'yi hiçbir zaman kullanmaz. Yani SVG bir ikame değil, bir iyileştirmedir — önce onu tanımlayın ve ICO'yu geri dönüş olarak tutun. SVG'yi anlayan tarayıcılar onu alır; diğerleri geriye düşer. Logonuz zaten bir SVG olarak varsa, ideal favicon kaynağına da sahipsiniz demektir: bir raster dışa aktarımı ölçeklemek yerine bir SVG'den PNG'ye dönüştürücüyle yukarıdaki tam boyutlarda keskin PNG'ler üretin.

Tek görselden kümeyi nasıl üretirsiniz

512×512 veya daha büyük kare bir kaynaktan ya da bir SVG'den başlayın. Küçük uç için tasarlayın: bir favicon, ince çizgilerin, gradyanların ve yazı amblemlerinin çamura dönüştüğü 16 pikselde değerlendirilir. Güçlü bir siluet, yüksek kontrast, minimum detay. Ardından kaynağı her hedef boyuta küçültün — PNG olarak 180, 192, 512, ICO'ya paketlenmiş olarak 16 ve 32. Kenarların keskin kalması için her boyut, başka bir küçük boyuttan değil büyük orijinalden yeniden örneklenmelidir; bu, aynı prensip kalite kaybı olmadan görsel yeniden boyutlandırma rehberinde de ele alınmıştır.

Elle yapmak da işe yarar — herhangi bir düzgün görsel düzenleyici PNG'leri dışa aktarır ve ImageMagick ICO'yu oluşturur (magick icon-512.png -define icon:auto-resize=32,16 favicon.ico) — ama bir oluşturucu var olmasının nedeni, beş dışa aktarımı ve bir konteyner formatını bir kez, hatta logo her değiştiğinde doğru yapmanın sıkıcı olmasıdır.

Her şeyi kapsayan minimum head kodu

Dört tanım, artı hiçbirine ihtiyaç duymayan bir dosya:

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

Manifest dosyası daha sonra 192 ve 512 PNG'leri kendi icons dizisinde listeler. SVG'yi atlarsanız ilk satırı, PWA desteğini atlarsanız son satırı çıkarın. ICO satırındaki sizes="32x32", bazı Chromium sürümlerinin SVG yerine ICO'yu tercih etmesini önleyen pratik bir ipucudur. Ve kod ne olursa olsun, HTML'inizi hiç okumayan her şey için favicon.ico'yu fiziksel olarak sitenin kökünde tutun.

Karanlık mod

Tarayıcı sekme çubukları açık ve koyu renklerde gelir ve neredeyse siyah bir logo koyu bir temada kaybolur. İki strateji: SVG favicon'u alan tarayıcılarda renkleri otomatik değiştiren yukarıdaki SVG medya sorgusu numarası; ya da — her formatı kapsayacak biçimde — savunmacı tasarım yapmak, ambleme kontrastlı bir dış çizgi, dolu bir arka plan şekli veya her iki temada da okunan orta tonlu bir palet vermek. Çoğu büyük site ikincisini yapar, çünkü ICO ve PNG her hâlükârda birçok istemciye sunulacaktır.

Yaygın hatalar

• 16 piksellik bir kaynağı büyütmek. Klasik hata: biri eski bir favicon.ico bulur, manifest için 512 piksele büyütür ve bulanık bir kurulum ikonu gönderir. Üretim yalnızca aşağı doğru çalışır — her zaman en büyük orijinalden.
• Eksik apple-touch-icon. Olmadan, iOS ana ekran ikonu olarak sayfanızın minik bir ekran görüntüsünü render eder. Masaüstü testi bunu hiç ortaya çıkarmadığı için en sık unutulan dosyadır.
• Kökte favicon.ico yok. Link etiketleri tarayıcıları kapsar, ama botlardan ve eski istemcilerden gelen sessiz /favicon.ico istekleri 404 verir — günlüklerde gürültülü ve besleme okuyucularda ikonsuz.
• Açık bir sekme çubuğu varsayan şeffaf ikonlar. Göndermeden önce 16 piksellik render'ı koyu bir temada test edin.
• Önbellek kırma unutulur. Tarayıcılar favicon'ları agresif biçimde önbelleğe alır. Bir yeniden tasarımdan sonra dosya adını değiştirin ya da bir sorgu dizesi ekleyin, yoksa haftalarca eski ikona bakarsınız.

Kısa özet: 512 piksellik tek bir kaynak görsel; kökte bir ICO'ya 16/32, 180 piksellik bir apple-touch-icon ve 192/512 manifest PNG'leri üretin; isteğe bağlı olarak keskinlik ve karanlık mod için önce bir SVG kullanın; dört satır head kodu. Yirmi dakika, bir kez — ve her sekme, yer imi, ana ekran ve kurulum istemi gri bir küre yerine sizin amblemi gösterir.