Nasıl kullanılır?
- Kaynağı seçin: "Resimden" ile logonuzu (PNG, JPG, SVG ya da WebP) kutuya bırakın; logonuz yoksa "Harf logosu" sekmesinde marka baş harflerinizi yazıp arka plan, yazı rengi ve köşe yuvarlamasını ayarlayın.
- Önizlemeye bakın: açık ve koyu temalı tarayıcı sekmesi ile telefon ana ekranı simülasyonu, simgenin 16 piksele indiğinde ve iOS'ta nasıl görüneceğini gösterir. Küçük boyutta okunmuyorsa daha sade bir logo ya da tek harf deneyin.
- Site adını, Apple Touch arka plan rengini ve tema rengini girin. Android için "maskable" sürümü işaretli bırakın; telefon simgeyi daire ya da yuvarlak kareyle kırptığında logonuzun kenarları kesilmez.
- "Simgeleri üret ve zip indir"e basın. Zip içinde
favicon.ico, PNG simgeler,apple-touch-icon.png, Android simgeleri,site.webmanifest,head-kodu.htmlve kısa bir OKUBENI dosyası bulunur. - Dosyaları sitenizin kök dizinine kopyalayın ve kutudaki HTML satırlarını her sayfanın
<head>bölümüne yapıştırın. WordPress kullanıyorsanız aşağıdaki bölümde iki farklı yol anlatılıyor.
Favicon nedir, hangi boyutlar gerekir?
Favicon, tarayıcı sekmesinde, yer imlerinde, geçmiş listesinde ve arama sonuçlarında sitenizin yanında görünen küçük simgedir. 2000'lerin başında yalnızca 16×16 piksellik bir favicon.ico yeterliydi; bugün aynı simgenin Windows görev çubuğunda, iPhone ana ekranında, Android "uygulama olarak yükle" özelliğinde ve Google arama sonuçlarında farklı boyutlarda gösterilmesi gerekiyor. Her platform kendi dosyasını ve kendi <link> etiketini bekler; eksik olanı rastgele bir büyütmeyle telafi eder, sonuç da genellikle bulanık ya da siyah zeminli bir simge olur. Bu araç, pratikte ihtiyaç duyulan tüm dosyaları tek seferde üretir:
| Dosya | Boyut | Nerede kullanılır |
|---|---|---|
favicon.ico | 16, 32, 48 px (tek dosyada üç görüntü) | Tüm tarayıcılar, Windows kısayolları, eski sistemler; kök dizinde bulunursa etiket olmadan da bulunur |
favicon-16x16.png, favicon-32x32.png | 16 ve 32 px | Sekme simgesi (normal ve Retina ekran); PNG, ICO'dan daha net sıkıştırılır |
favicon.svg | vektör | Chrome, Firefox, Edge ve Safari 12+; her çözünürlükte keskin, koyu tema için CSS destekler (yalnızca SVG yüklediyseniz üretilir) |
apple-touch-icon.png | 180×180 px | iPhone ve iPad'de "Ana Ekrana Ekle", Safari yer imleri; şeffaflık desteklenmez |
android-chrome-192x192.png | 192×192 px | Android ana ekran kısayolu ve PWA yükleme kartı |
android-chrome-512x512.png | 512×512 px | PWA açılış ekranı, Play Store benzeri listeler; Google arama sonuçlarında 48'in katı olduğu için tercih edilir |
android-chrome-maskable-*.png | 192 ve 512 px, logo %80 alanda | Android'in simgeyi daire/yuvarlak kare maskesiyle kırptığı cihazlar |
site.webmanifest | — | Android ve masaüstü Chrome/Edge'in simgeleri, uygulama adını ve tema rengini okuduğu dosya |
Google, arama sonuçlarında göstereceği favicon için en az 48×48 piksel ya da bunun katı (96, 144, 192…) bir boyut ister ve simgenin kök dizinde ya da <link rel="icon"> ile belirtilmiş olmasını bekler. ICO'nun içindeki 48 piksellik görüntü ve 192/512'lik PNG'ler bu şartı karşılar. sizes özniteliği, tarayıcının doğru dosyayı seçmesini sağlar; ürettiğimiz HTML kodu bu değerleri hazır içerir.
ICO dosyası nasıl üretiliyor?
ICO, aslında birden fazla görüntüyü sırayla barındıran basit bir kapsayıcıdır: başında kaç görüntü olduğunu söyleyen 6 baytlık bir dizin, ardından her görüntünün boyutunu ve dosyadaki konumunu tutan 16 baytlık girdiler, sonra da görüntü verileri gelir. Araç, 512 piksellik ana tuvali kademeli olarak yarıya indirerek 48, 32 ve 16 piksellik sürümleri üretir (tek adımda küçültmek ince çizgileri kırar), her birini PNG olarak sıkıştırır ve bu dizin yapısını baytı baytına kendisi yazar. Windows Vista'dan bu yana tüm Windows sürümleri ve bütün modern tarayıcılar PNG gömülü ICO'yu okur; dosya klasik BMP tabanlı ICO'dan çok daha küçük olur.
WordPress'te favicon (site simgesi) nasıl eklenir?
WordPress iki yol sunar. Kolay yol: Görünüm → Özelleştir → Site Kimliği → "Site simgesi" alanına ürettiğimiz android-chrome-512x512.png dosyasını yükleyin. WordPress bu tek dosyadan 32, 180, 192 ve 270 piksellik sürümleri kendisi türetir ve etiketleri ekler. Dezavantajı: ICO üretmez (eski Windows kısayolları için), SVG kullanmaz ve maskable sürüm oluşturmaz. Çoğu kurumsal site için yeterlidir.
Tam kontrol: Zip içindeki dosyaları FTP ya da hosting dosya yöneticisiyle sitenin kök dizinine (genellikle public_html) kopyalayın; sonra head-kodu.html içindeki satırları temanızın header.php dosyasında wp_head() çağrısından önce ya da "Insert Headers and Footers" türü bir eklentiyle <head> bölümüne ekleyin. Özelleştirici'deki site simgesini bu durumda boş bırakın; aksi hâlde iki ayrı simge tanımı çakışır. Değişiklikten sonra tarayıcı eski simgeyi günlerce önbellekte tutabilir; adres çubuğuna siteniz.com/favicon.ico yazıp yenileyerek ya da gizli pencerede açarak doğrulayın.
site.webmanifest ne işe yarar?
Web uygulama manifesti, Android'de Chrome'un ve masaüstünde Chrome/Edge'in sitenizi "uygulama olarak yükle" seçeneğiyle sunarken kullandığı JSON dosyasıdır. İçinde uygulama adı (name ve kısa short_name), simge listesi, durum çubuğu rengi (theme_color) ve açılış ekranı rengi (background_color) bulunur. Araç bu dosyayı girdiğiniz site adı ve renklerle üretir; purpose: "maskable" işaretli simgeler, Android'in uyarlanabilir simge maskesine uyan sürümlerdir. Sitenizi gerçek bir PWA'ya çevirmek istemeseniz bile manifest eklemek zararsızdır ve Android ana ekran kısayolunun doğru simge ve adla görünmesini sağlar.
İyi bir favicon için ipuçları
- Sadeleştirin. 16 pikselde yazı okunmaz, ince çizgiler kaybolur. Logonun yalnızca amblemini ya da baş harfini kullanın; "Harf logosu" seçeneği tam bu iş içindir.
- Kare çalışın. Yatay logo kareye sığdırılınca küçücük kalır. Kare olmayan resimleri araç ortalar, kalan alanı şeffaf bırakır; daha iyisi logoyu kare kırpıp yüklemektir.
- Kontrastı iki temada da kontrol edin. Koyu temalı tarayıcılarda koyu renkli simgeler kaybolur; önizlemedeki koyu sekme bunun için var. Gerekirse simgeye açık renk zemin verin.
- iOS için zemin ekleyin. Apple Touch simgesinde şeffaflık siyaha döner; araç bu yüzden seçtiğiniz arka plan rengini otomatik doldurur ve köşeleri iOS'un kendisi yuvarlar.
- SVG yükleyin. SVG kaynak, her boyutta keskin PNG üretir ve ayrıca
favicon.svgolarak pakete girer; bu dosya Retina ekranlarda en net görünen sürümdür.
Neden Bilişim Ajans aracı?
- Logonuz yüklenmez. Yayınlanmamış bir marka çalışmasını yabancı bir sunucuya göndermeden simge üretirsiniz; sayfa çevrimdışı da çalışır.
- Eksiksiz paket. ICO, PNG'ler, Apple Touch, Android, maskable, manifest ve HTML kodu; her birini ayrı araçta üretmeniz gerekmez.
- Gerçekçi önizleme. Açık/koyu sekme ve telefon ana ekranı simülasyonuyla yayından önce sonucu görürsünüz.
- Kaliteli küçültme. Kademeli yeniden örnekleme sayesinde 16 piksellik sürüm bile olabildiğince net kalır.
- Türkçe harf desteği. Harf logosunda Ç, Ğ, İ, Ö, Ş, Ü sorunsuz; font sayfayla birlikte gelir, dış kaynak çağrılmaz.
Sık sorulan sorular
Logom sunucunuza gidiyor mu?
Hayır. Resim tarayıcınızın içinde bir tuvale çizilir, tüm boyutlar ve ICO dosyası orada üretilir, zip de tarayıcıda paketlenir. Sayfa yüklendikten sonra ağ bağlantısını kesseniz bile araç çalışır; geliştirici araçlarının "Network" sekmesinden hiçbir yükleme isteği olmadığını görebilirsiniz.
Sadece favicon.ico yeterli değil mi?
Tarayıcı sekmesi için yeterlidir; ama iPhone'da "Ana Ekrana Ekle" yapan kullanıcı siyah zeminli bulanık bir kare görür, Android kısayolu ekran görüntüsünden türetilmiş bir simge alır ve Google arama sonuçlarında simgeniz çıkmayabilir. Paketteki diğer dosyalar bu durumları kapatır; hepsi birkaç kilobayttır.
Favicon'u değiştirdim ama hâlâ eskisi görünüyor?
Tarayıcılar favicon'u agresif şekilde önbellekler. Gizli pencerede açın, adres çubuğuna doğrudan siteniz.com/favicon.ico yazıp Ctrl+F5 ile yenileyin ya da HTML kodundaki dosya adlarına ?v=2 gibi bir sürüm eki koyun. WordPress'te önbellek eklentisi varsa onu da temizleyin.
Maskable simge nedir, gerekli mi?
Android cihaz üreticileri uygulama simgelerini daire, damla ya da yuvarlak kare şeklinde kırpar. Normal simgenin kenarındaki öğeler bu kırpmada kaybolur. Maskable sürümde logo ortadaki %80'lik güvenli alana küçültülür ve kalan alan arka plan rengiyle doldurulur; manifestte purpose: "maskable" ile ayrı listelenir. PWA ya da Android kısayolu önemliyse işaretli bırakın; değilse kapatabilirsiniz.
Hangi kaynak resim en iyi sonucu verir?
Kare, şeffaf arka planlı, en az 512×512 piksel PNG ya da SVG. JPG'de şeffaflık olmadığı için beyaz zemin de simgeye girer. 180 pikselden küçük kaynaklarda araç uyarı verir; sonuç yine üretilir ama büyük boyutlar bulanık olur.
Şeffaf arka plan korunuyor mu?
PNG ve ICO sürümlerinde evet. Apple Touch simgesi ile maskable sürümlerde şeffaflık, seçtiğiniz arka plan rengiyle doldurulur; iOS şeffaf alanı siyah gösterdiği için bu kasıtlıdır.
Harf logosunda Türkçe karakter kullanabilir miyim?
Evet. Metin, pakete dâhil DejaVu Sans Bold fontuyla çizilir; "Ş", "Ğ", "İ" gibi harfler doğru görünür. En fazla iki karakter alınır; daha uzun metin 16 pikselde okunmaz.
Üretilen dosyaları ticari sitede kullanabilir miyim?
Evet; çıktılar tamamen sizindir, herhangi bir lisans ya da atıf zorunluluğu yoktur. Kaynak logonun telif hakkı size ait olmalıdır; araç yalnızca sizin verdiğiniz görseli yeniden boyutlandırır.
İlgili araçlar
Logo, kurumsal kimlik ve web sitesi tasarımı için Bilişim Ajans ekibi yardımcı olur; favicon işin en küçük parçası.