Tüm araçlar

Resim → Icon

favicon ve PWA ikonları üret

.zip içinde:

  • favicon-16.png16×16
  • favicon-32.png32×32
  • favicon-48.png48×48
  • apple-touch-icon.png180×180
  • icon-192.png192×192
  • icon-512.png512×512
  • manifest.jsonPWA
  • head-snippet.html<head>

Nasıl çalışır

Resim → Icon — favicon ve PWA ikonları üret. Tüm işlemler tarayıcında yapılır — yükleme yok, üyelik yok, e-posta gerek yok. Sonsuza dek ücretsiz.

Son güncelleme:

Resim → Icon hakkında

Resim → İkon, tek bir kaynak PNG'yi tam favicon ve PWA ikon setine dönüştürür; manifest.json ve <head>'e yapıştırabileceğin HTML snippet'i de paketin içinde gelir. Manuel ImageMagick adımlarını atlamak isteyenler için tek tıkla favicon oluşturma ve PWA ikon üretici aracıdır.

Logonu yükle; tool'u ortalayarak kareye crop'lar, gerekli her boyutu (16, 32, 48, 180, 192, 512) üretir, her şeyi manifest ile birlikte zip'ler ve <head>'in için copy-paste HTML snippet verir.

Üretim tarayıcında olur, henüz yayınlanmamış brand asset'lerin makineden çıkmaz. Çıktı doğrudan projenin public/ klasörüne commit'leyebileceğin temiz bir .zip'tir.

Resim → Icon nasıl kullanılır

  1. Yükleme alanına kare bir PNG sürükle — kare ve şeffaf arka planlı görseller en iyi sonucu verir.
  2. Logonun kesilmediğinden emin olmak için ortadan crop'lanmış önizlemeyi gözden geçir; kare olmayan kaynaklar otomatik crop'lanır.
  3. Generate icon set & download .zip'e tıkla ve her boyut render edilirken bekle.
  4. Arşivi projenin public/ (veya static/) klasörüne çıkart.
  5. Pakete dahil HTML head snippet'ini <head>'e yapıştır ve manifest.json'u ilgili <link> tag'inden referansla.
  6. Yeni favicon ve PWA install ikonunun göründüğünü doğrulamak için private window'da hard-refresh yap.

Yaygın kullanım senaryoları

  • Logosu PNG olarak elinde olan ama 8 farklı boyut export'lamak için vakti olmayan yeni site bootstrap'lemek.
  • Mevcut bir uygulamaya PWA desteği eklemek — 192 ve 512 px ikonlar manifest gereksinimlerini direkt karşılar.
  • Rebrand sonrası favicon'u tasarım ekibinden re-export istemeden tazelemek.
  • 180 px'lik Apple touch ikon üretip iOS ana ekran kısayollarının net görünmesini sağlamak.
  • Tek bir kaynak dosyadan birden çok ortam (staging, production) için tutarlı ikon setleri üretmek.

İpuçları ve dikkat edilmesi gerekenler

  • Yüksek çözünürlüklü kaynaktan başla (en az 512×512); küçültülen boyutlar net kalsın.
  • Şeffaf arka plan kullan — opak arka plan iOS yuvarlak köşe maskesinin içinde tuhaf görünür.
  • Faviconu incognito pencerede sitenizi ziyaret ederek test edin; tarayıcılar favicon'u agresif cache'ler.
  • Logo çok ince çizgilere sahipse 16×16'da yok olabilir — küçük boyutlar için sadeleştirilmiş bir mark tasarla.

Sıkça sorulan sorular

Üretilen sette hangi boyutlar var?

16, 32, 48 (favicon), 180 (Apple touch icon), 192 ve 512 (PWA). Ayrıca projene yapıştırabileceğin manifest.json ve HTML head snippet.

Kaynağım kare değilse?

Otomatik olarak ortadan kareye crop ediyoruz. En iyi sonuç için ana içerik ortalanmış kare resim ver.

Kaynak için en iyi format hangisi?

Şeffaf arka planlı PNG. SVG için önce SVG → PNG aracını kullan.

2026'da hâlâ ayrı bir .ico dosyasına ihtiyacım var mı?

Modern tarayıcılar <link rel="icon" type="image/png"> ile referans verilen PNG faviconları sorunsuz kullanır. Eski /favicon.ico yalnızca çok eski IE sürümlerini desteklemen gerekiyorsa lazım. Yine de pek çok ekip güvenlik için tutmaya devam ediyor.

PWA ikonum şeffaf yerine neden beyaz arka planla görünüyor?

Bazı platformlar (özellikle iOS) şeffaflığı beyaza flatten eder. İkonu solid bir backdrop varsayarak tasarla veya manifest'inde maskable ikon varyantı sağla — doğru safe zone ile.

SVG'den ikon üretebilir miyim?

Önce SVG → PNG aracımızla SVG'yi yüksek çözünürlüklü PNG'ye çevir (1024 px genişlik dene), sonra o PNG'yi Resim → İkon'a ver. PNG üzerinden gitmek her boyutun aynı şekilde rasterize olmasını sağlar.

İlgili araçlar