Makale

PNG'den Favicon Oluşturma

Favicon, tarayıcıların sekmelerde, yer imlerinde ve geçmiş listelerinde gösterdiği küçük bir grafiktir. Doğru yapmak, yalnızca bir logoyu yeniden boyutlandırmaktan fazlasını gerektirir: .ico formatı birden fazla çözünürlüğü tek bir dosyada paketler, modern tarayıcılar PNG'yi tercih eder, mobil cihazların kendi apple-touch-icon'ları vardır ve web uygulaması manifestolarının kendi ikon seti gerekir. Bu makale her parçayı ele alır ve tek bir kaynak PNG'den tüm seti nasıl üreteceğinizi açıklar.

Yazan: Bastien Sulyan · Yayımlandı: 29 Haziran 2026

Favicon Nedir ve Tarayıcılar Onu Nerede Kullanır

Favicon kelimesi "favorite icon" (favori simge) kısaltmasıdır. Tarayıcılar onu ilk olarak Internet Explorer 5'te (1999) adres çubuğunda gösterdi, ardından yer imleri için benimsedi. Bugün tarayıcı sekmelerinde, yer imleri araç çubuğunda, gezinme geçmişinde, bazı tarayıcılarda yeni sekme sayfasında ve bir site sabitlendiğinde işletim sistemi görev çubuklarında görünür. Mobilde bir kullanıcı siteyi ana ekranına eklerse, cihaz standart favicon yerine apple-touch-icon adı verilen ilgili ancak farklı bir görüntü kullanır. Arama motorları bazen arayüzlerindeki sonuçların yanında favicon'ları gösterir. Grafik tasarım gereği küçüktür; bu da hızlı görsel tanımlama için etkili kılar ama iyi üretmesi de zorlaştırır: 16x16 pikselde ayrıntılı bir logo seçilmez bir leke haline gelir. Favicon dosyası on yıllar içinde çeşitli formatlardan geçmiştir; .ico en geniş uyumluluğunu korurken PNG artık çoğu tarayıcı için modern varsayılandır.

.ico Kapsayıcısı: Tek Dosyada Birden Fazla Çözünürlük

.ico formatı tek bir görüntü değil, bir kapsayıcıdır. Tek bir .ico dosyası, her biri dosyanın başındaki bir dizinde ayrı girdi olarak saklanan farklı çözünürlüklerde birden fazla bitmap görüntüsü içerebilir. En yaygın üç boyut 16x16, 32x32 ve 48x48 pikseldir. Windows, Gezgin'de veya görev çubuğunda bir favicon gösterdiğinde, görüntüleme bağlamıyla en iyi eşleşen girdiyi seçer. Eski Windows sürümleri yüksek yoğunluklu görev çubuğu yuvalar için 48x48 girdisi gerektiriyordu. Tarayıcılar sekmeler için favicon'ı 16x16 olarak talep eder, ancak daha yüksek yoğunluklu bir ekran algılanırsa daha büyük bir girdi kullanabilir. Üç boyutu tek bir .ico dosyasında paketlemek, tek bir HTTP isteğinin tüm kullanım durumlarını karşıladığı anlamına gelir. Bunları ayrı PNG'ler olarak dağıtmak da geçerlidir; ancak ek bağlantı etiketleri gerektirir ve HTTP istekleri ekler. Bir .ico dosyasındaki iç görüntüler standart BMP veya PNG verisidir; bu nedenle kapsayıcı her girdi başına yalnızca küçük bir başlık ek yükü ekler.

Küçük Boyutlar İçin Tasarım: Simgeyi Basitleştirin

16x16 pikselde toplam 256 pikseliniz var. Sözcükli imza veya ince ayrıntılar içeren tipik bir logotip, bu boyutta okunamaz hale gelir. Standart yaklaşım, basitleştirilmiş bir simge oluşturmaktır: ayrıntıya dayanmadan markayı temsil eden tek bir harf, soyut bir şekil veya bir ikon. Önceden tahmin edilmesi gereken birkaç özel sorun: ince çizgiler, özellikle retina olmayan ekranlarda küçük boyutlarda tamamen kaybolur. Harf çiftleri ve negatif alan ayrıntıları gri gürültüye karışır. Gradyanlar neredeyse görünmez hale gelir. Simge ile arka planı arasındaki yüksek kontrast, okunabilirliğin tek en büyük faktörüdür. Düz arka plan üzerindeki düz bir şekil, 16x16'da neredeyse her zaman ayrıntılı bir illüstrasyondan daha iyi okunur. 32x32 ve 48x48 boyutları daha toleranslıdır ve biraz daha fazla ayrıntıyı destekleyebilir; ancak 16x16 sürümü belirleyici kısıt olarak değerlendirilmelidir. Simge 16x16'da hala okunamıyorsa, tasarımın daha da basitleştirilmesi gerekir.

Modern Set: .ico, PNG İkonları, apple-touch-icon, Manifest ve HTML Bağlantı Etiketleri

Herkese açık bir site için eksiksiz favicon kurulumu şu anda beş şey gerektirir. Birincisi, sitenin kökünde bir favicon.ico (tarayıcılar yedek olarak bağlantı etiketi olmadan doğrudan /favicon.ico'yu ister). İkincisi, bir bağlantı etiketiyle bildirilen modern masaüstü tarayıcılar için 32x32 PNG: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Üçüncüsü, sekme boyutu için 16x16 PNG: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Dördüncüsü, iOS ana ekran yer imleri için 180x180 piksel apple-touch-icon: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Beşincisi, Android ve aşamalı web uygulamaları için 192x192 ve 512x512 PNG içeren bir web uygulama manifestosu (site.webmanifest). Şeffaflık PNG'de ve .ico içindeki PNG kodlu girdilerde desteklenir; ancak apple-touch-icon'ın opak bir arka plana sahip olması gerekir çünkü iOS alfa kanalını göz ardı eder ve şeffaf alanları siyahla doldurur.

Yerel Olarak Yapma: favicon-generator Görselinizi Cihazınızda Tutar

Bu sitedeki favicon-generator, bir PNG alır ve eksiksiz seti üretir: 16x16, 32x32 ve 48x48 girdileriyle paketlenmiş çok çözünürlüklü favicon.ico, doğrudan bağlantı etiketi kullanımı için ayrı PNG boyutları ve 180x180 apple-touch-icon. Bunların hepsi Canvas API ve JavaScript .ico kodlayıcısı kullanılarak tarayıcınızda gerçekleşir. Kaynak görseliniz hiçbir yere yüklenmez; cihazınızda kalır. Bu durum, kaynak dosyanın bir şirket logosu veya nereye gideceğini kontrol etmeden önce makinenizi terk etmemesi gereken herhangi bir varlık olması durumunda önemlidir. Oluşturulan her dosya, alışılagelmiş dosya adlarıyla kendi indirmesi olarak sunulur. Bunları sitenizin köküne kopyalar ve HTML başlığınıza karşılık gelen bağlantı etiketlerini eklersiniz. Kaynak logonuzun ince ayrıntıları 16x16 renderda hayatta kalmazsa, oluşturucuya bırakmadan önce kırpabilir veya basitleştirebilir ya da özellikle favicon için hazırlanmış farklı bir kaynak görsel sağlayabilirsiniz.

Bu makaledeki araçlar

Sıkça sorulan sorular

PNG bağlantı etiketleri bildirirsem hala favicon.ico'ya ihtiyacım var mı?

Evet, iki nedenden dolayı. Birincisi, HTML'nizi okumayan tarayıcılar (web tarayıcıları, RSS okuyucuları, bazı eski mobil tarayıcılar) etki alanının kökünde doğrudan /favicon.ico arar. Bu dosya yoksa her sayfa yüklemesinde bir 404 isteği oluşturur; bu da sunucu günlüklerinize gürültü ve küçük gereksiz bir gidiş-dönüş ekler. İkincisi, Internet Explorer'ın eski sürümleri yalnızca .ico formatını tanır ve PNG bağlantı etiketlerini görmezden gelir. İkisini birden sağlamak tüm durumları kapsar.

Favicon olarak SVG kullanabilir miyim?

Chrome ve Firefox, `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` aracılığıyla SVG favicon'ları destekler. Safari, SVG favicon'ları desteklememektedir. SVG favicon'lar çözünürlükten bağımsız olduğundan, birden fazla boyut varyantına ihtiyaç duymadan retina ekranlar dahil her ekran yoğunluğunda net görünür. Pratik öneri, onu destekleyen tarayıcılar için SVG bağlantı etiketini bildirmek ve eksiksiz kapsama için .ico yedeğini yine de dahil etmektir. SVG favicon'lar ayrıca açık ve koyu sürüm arasında otomatik geçiş yapmak için `prefers-color-scheme` medya sorgusu içerebilir.

En iyi sonucu almak için hangi görüntüden başlamalıyım?

Şeffaf arka planlı 512x512 veya daha büyük bir kare PNG en fazla esnekliği sağlar. Büyük başlayıp küçültmek, küçük bir görüntüden başlamaktan daha fazla ayrıntı korur. Ana logonuz sözcükli imza içeriyorsa, kaynak çözünürlüğünden bağımsız olarak 16x16'da metin okunamayacağından yalnızca simge veya işareti gösteren ayrı basitleştirilmiş bir sürüm hazırlamayı düşünün. Simge ile arka planı arasındaki yüksek kontrast, küçük boyutların açıkça okunup okunmayacağının en güvenilir göstergesidir.