Favicon Oluşturucu

favicons.zip içinde neler var

Bir görsel yükleyin; oluşturucu, güncel bir sitenin ihtiyaç duyduğu tüm dosyaları tarayıcınızda üretir:

Dosya	Boyut	Kullanan
favicon.ico	Tek dosyada 16, 32 ve 48 px	Sekmeler, yer imleri, Windows ve /favicon.ico isteyen her araç
favicon-16x16.png	16×16	Standart ekranlarda sekmeler
favicon-32x32.png	32×32	Yüksek yoğunluklu ekranlarda sekmeler, kısayollar
favicon-48x48.png	48×48	Google arama sonuçları, masaüstü kısayolları
apple-touch-icon.png	180×180	iPhone ve iPad'de "Ana Ekrana Ekle"
android-chrome-192x192.png	192×192	Android ana ekranı
android-chrome-512x512.png	512×512	Uygulama olarak yüklenen siteler (PWA) ve açılış ekranı
site.webmanifest	—	Android/Chrome'a iki büyük simgenin yerini söyler
README-favicon.html	—	Yapıştırılacak HTML etiketleri

Hangi kaynak görsel en iyi sonucu verir

• Kare, sade ve belirgin. 16 px'te toplam 256 pikseliniz var. Sloganıyla birlikte tam bir logo lekeye dönüşür; tek bir harf veya sembol okunur kalır. Birçok marka favicon için sadeleştirilmiş bir işaret kullanır.
• En az 512×512. En büyük simge 512 px olduğundan, daha küçük bir kaynak büyütülür ve bulanık görünür. SVG logo idealdir; küçültülmeden önce yüksek çözünürlükte işlenir.
• Şeffaf PNG veya SVG. Şeffaflık .ico dosyasında ve küçük PNG'lerde korunur, böylece simge açık ve koyu tarayıcı temalarında iyi durur.
• Kare değil mi? Görsel kırpılmadan karenin içine sığdırılır, kenarlarda şeffaf boşluk kalır. Kareyi doldurmak isterseniz önce kırpın ya da daire kırpma ile yuvarlak bir sürüm yapın.

Apple touch simgesinin arka planı

iOS, ana ekran simgelerinde şeffaflığa izin vermez; şeffaf alanlar siyaha döner. Bu yüzden 180×180'lik apple-touch-icon.png her zaman düz bir arka plan alır. Varsayılanı beyazdır; yükleme alanının yanındaki renk kutusuyla marka renginizi seçebilirsiniz (renk seçici bunu logonuzdan okuyabilir). Diğer boyutlar şeffaf kalır.

Dosyalar nereye konur

1. ZIP'i açın ve tüm dosyaları sitenizin kök dizinine yükleyin; böylece https://siteniz.com/favicon.ico adresi simgeyi açar.
2. README-favicon.html içindeki etiketleri her sayfanın <head> bölümüne (veya temanızın üst bilgi şablonuna) yapıştırın:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

3. Siteniz bir alt klasördeyse yolları buna göre değiştirin.

WordPress'te Görünüm → Özelleştir → Site kimliği → Site simgesi bunu tek bir 512×512 görselle halleder; android-chrome-512x512.png dosyasını kullanın. Shopify, Wix ve Squarespace'te de benzer bir "favicon" alanı vardır.

Pakete dahil site.webmanifest yalnızca simgeleri listeler. Ziyaretçilerin sitenizi uygulama olarak yükleyebilmesini istiyorsanız name, short_name, theme_color, background_color ve "display": "standalone" ekleyin.

"Favicon'u değiştirdim ama hâlâ eskisi görünüyor"

Favicon'lar bir sitedeki neredeyse her şeyden daha inatçı biçimde önbelleğe alınır.

• https://siteniz.com/favicon.ico adresini doğrudan açın ve zorla yenileyin (Ctrl + F5, Mac'te Cmd + Shift + R).
• Bağlantılara bir sürüm ekleyin, örneğin href="/favicon.ico?v=2"; tarayıcı bunu yeni dosya olarak görür.
• Kullanıyorsanız CDN'nizin veya önbellek eklentinizin önbelleğini temizleyin.
• Yer imleri ve ana ekran kısayolları yeniden oluşturulana kadar eski simgeyi tutar.
• Google, simgeyi arama sonuçlarında ancak ana sayfanızı yeniden taradıktan sonra günceller; bu günler, hatta haftalar sürebilir. Google, kenarı 48 px'in katı olan kare bir simge ister; 48×48 PNG ve .ico bunu karşılar.

İlgili araçlar

• Simgeye dönüştürmeden önce fotoğrafın arka planını kaldırın: Arka plan kaldırma.
• Logonuz WebP mi? Programınız açmıyorsa PNG'ye çevirin.
• Mağaza veya profil için sade bir 512×512 görsel mi lazım? 512×512'ye boyutlandır.