Logodan Favicon Oluşturma (Tüm Boyutlar Açıklandı)

Logodan favicon oluşturmak için kare bir logoyla (SVG veya 512x512 veya daha büyük bir PNG) başlayın. İçinde ideal olarak 16, 32 ve 48px sürümleri bulunan bir favicon.ico dışa aktarın, ardından 180x180 Apple simgesi ve manifest için 192/512 PNG dosyalarını ekleyip bunları HTML'inizde bağlayın. Bu on iki değil, beş dosyadır (ICO, SVG, Apple simgesi ve iki manifest PNG). Her birini nasıl yapacağınız ve nereye yerleştireceğiniz aşağıdadır.

Kısa cevap: ihtiyacınız olan favicon dosyaları

Modern minimal set bir ICO, bir SVG, bir Apple dokunmatik simgesi ve iki manifest PNG'sinden oluşur. Çok boyutlu bir ICO'nuz varsa, ayrı 16/32/48 PNG dosyaları ve Microsoft kare resimleri gereksizdir.

Çoğu oluşturucu size on iki dosyadan oluşan bir ZIP sunar; bunların çoğunu tarayıcılar istemez. 512x512'lik bir ana dosya yeterlidir, bu yüzden asla daha büyüğüne ihtiyaç duymazsınız.

Favicon boyutları açıklandı: her biri ne işe yarar

favicon.ico (16, 32, 48)

ICO, birden fazla bitmap'i tek bir dosyada tutan bir kap yapısıdır. Yaygın kalite paketi 16, 32 ve 48px'dir; yalnızca büyük Windows simgeleriyle ilgileniyorsanız 256 ekleyin.

Hâlâ sahip olmak değer. İndeksleyiciler, besleme okuyucuları ve bağlantı önizleme botları varsayılan olarak site kökünden /favicon.ico'yu çeker. Chromium farklı davranır: yayınlanan bir istek testinde, sayfa hiçbir simge bildirmediğinde yalnızca /favicon.ico'yu çekti. SVG bildirildiğinde yalnızca SVG'yi istedi ve bağımsız PNG bağlantıları yerine ICO'yu tercih etti.

Bağımsız 32x32 PNG'sini atlayın. Bazı kılavuzlar bunu listeler, ancak bu test ICO mevcutken kullanılmadığını gösterdi. Test yalnızca Chromium'u kapsadı, bu nedenle Firefox ve Safari davranışı test edilmedi.

favicon.svg

SVG faviconlar Chrome 80+, Firefox 41+ ve Edge'de çalışır. Safari desteği daha yeni ve parçalıdır; iOS'taki Safari'de SVG faviconlar çalışmaz. SVG'yi bir tamamlayıcı olarak düşünün, ICO'nun yerine geçecek şekilde değil.

apple-touch-icon (180x180)

180x180, Retina iPhone boyutudur (3x ölçeklendirmede 60pt). Tek bir 180px dosya yeterlidir: iOS bunu iPad de dahil olmak üzere diğer cihazlar için ölçeklendirir.

Manifest simgeleri (192 ve 512)

Android Chrome ve kurulu web uygulamaları simgeleri web uygulaması manifestinden okur. 192px dosya başlatıcı simgesidir ve 512px dosya yükleme/açılış simgesidir.

Google Arama'nın ihtiyacı olanlar

Google simgeyi ana sayfanızdan okur. ICO, PNG ve SVG dahil olmak üzere geçerli herhangi bir favicon formatı çalışır. Kare olması ve en az 8x8px olması gerekir. Google 48x48'ten büyük, 48'in katları halinde ve her etki alanı adı (hostname) için tek simge olmasını önerir. Simge uygun değilse Google genel bir küre simgesi gösterir.

Dışa aktarmadan önce logonuzu hazırlayın

Kare, büyük ve şeffaf

En iyi kaynak bir SVG'dir. Aksi halde 512x512 veya daha büyük kare bir PNG kullanın. Sadece küçültün: 1024px'den 16px'e gitmek kenar detaylarını korur, 32px'den 16px'e gitmek korumaz ve büyütme sadece bulanıklık yaratır.

Logonuz kare değilse, Tool Cloud'un görüntü kırpma ve yeniden boyutlandırma araçlarını kullanarak önce kırpın veya dolgulayın.

PNG'yi şeffaf ve sRGB renk uzayında tutun. Düzleştirme yapmayın veya "belki lazım olur" diye arka plan eklemeyin.

Favicon bir JPG olabilir mi? Evet, ancak PNG veya SVG daha temizdir. JPG'nin şeffaflığı yoktur, bu nedenle JPG'den ICO'ya dönüşüm dolu bir kare verir ve sıkıştırma artefaktları çok küçük boyutlarda belirir.

16 piksel için sadeleştirin

Sloganlı tam bir logo, tarayıcı sekmesinde bulanıklaşıp seçilemez hale gelir. İşe yarayanlar:

• Güçlü kontrastlı tek bir kalın işaret
• İki veya üç düz renk
• En fazla bir veya iki kalın karakter, marka adı (wordmark) yok

Gerçek boyutta test edin. Yarım saniyede tanıyamıyorsanız daha da sadeleştirin.

İpucu: en iyi ICO için iki görüntü kullanın

Maksimum kalite için 16 ve 32 boyutlarında sadeleştirilmiş tasarımı, 48 ve 256 için ise daha detaylı tasarımı kullanın. İki ICO oluşturun, ardından sadeleştirilmiş olanı favicon.ico olarak ve detaylı olanı Windows kısayolları için kullanın. Bu isteğe bağlıdır ve çoğu site için tek, iyi sadeleştirilmiş bir logo yeterlidir.

Logonuzu ICO'ya ve paketin geri kalanına dönüştürün

Seçenek 1: favicon paketi oluşturun

Tool Cloud'un Favicon Oluşturucusu adresini açın, kare logonuzu yükleyin ve standart favicon boyutlarının ZIP dosyasını indirin. Yukarıdaki tabloyla eşleşen dosyaları kullanın ve eksik olanları (SVG veya 192/512 PNG'ler gibi) ayrı olarak oluşturun. HTML'inizde referans vermeyeceğiniz dosyaları yok sayın.

Seçenek 2: logoyu tek bir ICO'ya dönüştürün

Yalnızca favicon.ico istiyorsanız Görüntüden ICO'ya dönüştürücü adresini kullanın. Logonuzu yükleyin ve dönüştürün, ardından sonucu favicon.ico olarak yeniden adlandırın. ICO'nun hangi boyutları içerdiğini kontrol edin; 16 veya 32px sürümü yoksa bunun yerine yukarıdaki oluşturucuyu kullanın.

180, 192 ve 512 PNG'leri oluşturma

Kare ana dosyanızı 180x180, 192x192 ve 512x512 olarak yeniden boyutlandırın ve bunlara apple-touch-icon.png, icon-192.png ve icon-512.png adlarını verin.

Apple simgesi için, logo ortalanmış ve dolgulanmış opak bir arka plan kullanın. iOS şeffaflığa uymaz ve köşeleri kendisi yuvarlar, bu yüzden önceden yuvarlamayın. iOS'un doldurmasına güvenmek yerine her zaman kendi düz arka planınızı sağlayın.

Her dosyanın HTML'deki yeri

HTML parçası

Tüm dosyaları site kökünüze yükleyin, ardından bunu <head> bölümüne ekleyin. sizes öznitelikleri Chrome'un simgeleri nasıl seçtiğine dair bir yazıdaki önerileri izler:

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

Birkaç not:

• rel="icon" kullanın. rel="shortcut icon" eski bir standarttır; "shortcut" kayıtsızdır ve gereksizdir.
• Tarayıcılar türüne göre seçim yapar, konuma göre değil; bu nedenle sıralama kritik değildir. type="image/svg+xml" özniteliği sayesinde SVG'yi desteklemeyen tarayıcılar bunu atlayıp ICO dosyasını kullanabilir.
• ICO dosyasına somut bir boyut verin ve SVG için sizes="any" belirtin. ICO dosyasına any eklemek Chrome'un onu SVG yerine tercih etmesini sağlayabilir.

Web uygulaması manifestosu

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Chrome'un yükleme kriterleri hem 192 piksellik hem de 512 piksellik simgeleri gerektirir. Tek bir dosyada "purpose": "any maskable" kullanmaktan kaçının. Maskelenebilir bir simge için, görseli merkezî güvenli alana (512x512 tuvalde yaklaşık 409x409) yerleştirilmiş ayrı bir dosya oluşturun.

WordPress, Squarespace, Shopify ve Wix'e favicon ekleyin

Platformlar menü isimlerini değiştirebilir, bu yüzden kontrol panelinizde ne yazdığına bakın.

• WordPress: Görünüm, Özelleştir, Site Kimliği, Site Simgesi. 512x512 piksellik bir PNG yükleyin.
• Squarespace: Tasarım, Tarayıcı Simgesi. 300x300 piksellik kare bir PNG işe yarar (ICO da kabul edilir).
• Shopify: Tema Ayarları, Favicon. Kare 512x512 piksellik bir PNG yükleyin.
• Wix: Ayarlar, Site ayarları, Favicon (bu, premium bir plan gerektirebilir).

Neden faviconunuz bulanık görünüyor veya güncellenmiyor

Bulanık veya dolu kare simgeler

Bulanıklık genellikle küçük bir raster görselin büyütülmesinden veya 16 pikselde aşırı detaylı bir logodan kaynaklanır. Bunu bir SVG ve ICO içinde 32 piksel veya daha büyük boyutlar kullanarak düzeltin; 16x16 piksellik bir simgeyi asla büyütmeyin. Logonuzun arkasında düz bir kare olması, kaynağın şeffaflığa sahip olmadığını (genellikle JPG olduğunu) gösterir.

Eski simgenin hâlâ görünmesi

Tarayıcılar faviconları günler veya haftalar boyunca önbellekte tutar. Sırasıyla şunları deneyin:

1. Sayfayı zorla yenileyin.
2. /favicon.ico adresini doğrudan açın ve orada yenileyin.
3. Bir sorgu dizesi ekleyin, örneğin /favicon.ico?v=2.
4. Gizli pencerede kontrol edin.
5. Dosyanın HTTP 200 döndüğünü doğrulayın ve CDN önbelleğinizi temizleyin.

iOS ana ekran simgeleri kısayol başına önbelleğe alınır; bu nedenle mevcut kısayollar değişmez ve kullanıcıların siteyi yeniden eklemesi gerekir. Marka yenileme durumunda yeni bir dosya adı kullanın.

Google Arama'da görünmemesi

Güncellemeler günler veya haftalar sürer ve simge URL'sini değiştirmek bunları geciktirebilir. Ana sayfanızda simgenin rel="icon" ile referans gösterildiğinden ve yukarıdaki boyut kurallarına uyduğundan emin olun. Belgelenmiş kesin bir KB sınırı yoktur; Google'ın kuralları boyutlarla ilgilidir.

Pratikte

512 piksel veya daha büyük kare bir ana görselden başlayın ve sekme boyutu için basitleştirin. Dosyaları yükleyin, ardından HTML parçacığını ve manifestoyu sitenize yapıştırın ve manifesto bağlantısının orada olduğundan emin olun. Son olarak, sonucu 16 pikselde inceleyin: işaret net değilse, tekrar basitleştirin.

Sıkça sorulan sorular

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

Evet. Tarayıcılar, besleme okuyucuları ve bağlantı önizleme botları, HTML etiketlerinize bakılmaksızın site kökünden /favicon.ico isteğinde bulunur; bu nedenle düşük maliyetli bir sigorta niteliğindedir. 16, 32 ve 48px'i tek bir dosyada birleştirin.

Favicon bir JPG olabilir mi?

Teknik olarak evet, ancak PNG veya SVG çok daha temiz bir sonuç verir. JPG'nin şeffaflığı yoktur ve sıkıştırma artefaktları bulunur; ayrıca fotoğraflar 16x16 piksel için fazla detay içerir.

Google Arama için favicon boyutu ne olmalı?

Google en az 8x8px kare bir görüntü ister ve 48x48px'ten büyük olmasını önerir. SVG burada desteklenmez, bu nedenle ana sayfanızda rel=icon ile bildirilen bir ICO veya PNG dosyası bulundurun.

Ayrı 16x16, 32x32 ve 48x48 PNG dosyalarına ihtiyacım var mı?

Genellikle hayır. Çok boyutlu bir ICO bu boyutları kapsar ve Chromium'da yapılan istek testi, ICO mevcut olduğunda bağımsız PNG'lerin kullanılmadığını gösterdi. Firefox ve Safari test edilmedi.

Neden yeni faviconum görünmüyor?

Tarayıcılar faviconları günler veya haftalar boyunca agresif şekilde önbelleğe alır. Zor yenileme yapın, /favicon.ico'yu doğrudan açın, ?v=2 sorgu dizesini ekleyin veya gizli pencerede kontrol edin.