Favicon Oluşturucu

Görselinizden 16x16, 32x32, 48x48 boyutlarını içeren bir favicon.ico ve 180x180/512x512 PNG ikonlar oluşturun.

Ne zaman kullanmalısın?

Bir web sitesi için tarayıcı sekmesinde görünecek küçük simgeyi (favicon) tek bir görselden farklı boyutlarda üretmen gerektiğinde kullan.

Ne zaman kullanmamalısın?

Kaynak görsel çok karmaşık veya ince detaylı ise, 16x16 piksel gibi çok küçük boyutlarda detaylar kaybolur; favicon için basit, sade bir simge tasarımı daha iyi sonuç verir.

Adım adım kullanım

Logo/görsel alanından kaynak görselini seç. Kare ve en az 512x512 piksel bir görsel en temiz sonucu verir.
Favicon oluştur ve indir butonuna bas.
İndirilen üç dosyayı bul: favicon.ico, apple-touch-icon.png ve favicon-512.png.
favicon.ico dosyasını sitenin kök dizinine yükle, PNG dosyalarını da sitenin head bölümünde ilgili bağlantı etiketleriyle çağır.

Örnek

Kendi el yapımı sabun markan için bir site kurdun ve logonda marka adı ile küçük bir yaprak çizimi var. Tüm logoyu yüklersen 16x16 boyutunda yazı okunmaz hale gelir. Bunun yerine sadece yaprağı içeren kare bir görsel hazırlayıp yüklersen tarayıcı sekmesinde tanınabilir bir simge elde edersin. apple-touch-icon.png, iPhone kullanıcıları siteyi ana ekrana eklediğinde görünen ikondur. 512 piksellik PNG ise sitene bir web uygulaması manifesti eklersen orada kullanılır. Dosyaları yükledikten sonra siteyi hem masaüstü tarayıcıda hem de telefonda açıp sekmede ve ana ekran kısayolunda ikonun nasıl göründüğüne bakmak, gözden kaçan bir kırpma ya da renk sorununu erkenden yakalamanı sağlar.

Favicon nedir, hangi boyutlar gerekir?

Favicon, tarayıcı sekmesinde, yer imlerinde ve arama sonuçlarında sitenizi temsil eden küçük simgedir. Modern tarayıcılar PNG ya da SVG biçimini destekler; farklı cihazlar için 16×16, 32×32, 180×180 (Apple dokunma simgesi) ve 192×192 gibi boyutlar kullanılır. Küçük boyutta okunabilmesi için simge sade olmalıdır.

Favicon için ipuçları

Karmaşık logo yerine tek harf ya da basit bir şekil kullanın; 16 pikselde ayrıntı kaybolur.
Kare bir kaynak görselden başlayın.
Simgeyi head bölümüne link etiketiyle ekleyin ve dosyayı sitenizin kök dizinine koyun.
Değişiklikten sonra tarayıcı eski simgeyi önbellekte tutabilir; sayfayı sert yenileyin.

Dikkat edilmesi gerekenler

Şeffaf arka planlı bir ikon, koyu temalı tarayıcı sekmelerinde kaybolabilir. Simgen koyu renkliyse etrafında açık bir kenar ya da dolu bir arka plan düşün.
Yeni favicon'u yükledikten sonra eskisini görmeye devam edebilirsin, çünkü tarayıcılar bu dosyayı uzun süre önbellekte tutar. Gizli pencerede açmak gerçek durumu gösterir.
Google arama sonuçlarında da sitenin ikonu görünür. Arama motorunun yeni ikonu fark etmesi zaman alabilir.
Kaynak görselde ince çizgiler varsa küçük boyutlarda kaybolur. Kalın hatlı ve yüksek kontrastlı bir tasarım daha iyi okunur.

Sık sorulan sorular

Görselim sunucuya gönderiliyor mu?

Hayır, işlem tamamen tarayıcınızda (Canvas API ile) yapılır, görseliniz cihazınızdan çıkmaz.

Kalite kaybı olur mu?

Format dönüşümlerinde ve sıkıştırmada bir miktar kalite kaybı olması normaldir; JPG gibi kayıplı formatlarda bu daha belirgindir.

Hangi formatlar destekleniyor?

JPG, PNG ve WebP formatları desteklenir.