Yükleme yok, %100 yerel, hesap yok

Favicon Oluşturucu

Logonuzu veya simgenizi yükleyin ve tüm standart favicon boyutlarını PNG olarak indirin. Apple Touch Icon ve PWA simgelerini içerir. Hiçbir şey cihazınızı terk etmez.

Favicon oluşturucu nasıl çalışır

Favicon Oluşturucu, sağladığınız herhangi bir görüntüyü Canvas drawImage API'sini kullanarak standart favicon boyutlarına yeniden boyutlandırır: 16x16, 32x32, 48x48, 180x180 (Apple dokunma ikonu), 192x192 (Android Chrome) ve 512x512 (PWA manifest). Altı boyutun tamamı, 16x16, 32x32 ve 48x48 görüntülerini tek bir eski dosyada birleştiren çok boyutlu bir favicon.ico ile birlikte tarayıcınızda oluşturulur. Kaynak görüntünüz cihazınızdan asla çıkmaz.

Eksiksiz bir favicon seti, tarayıcı sekmesi ikonları, yer imleri, ana ekran kısayolları ve PWA açılış ekranlarının tüm yelpazesini kapsar. Yüksek çözünürlüklü kaynak görüntü kullanmak (en az 512x512 piksel), küçültme algoritmasına en fazla ayrıntıyı çalışmak için verir. Her oluşturulan dosyaya başvurmak için ihtiyacınız olan HTML bağlantı etiketleri, doğrudan sayfanızın baş öğesine kopyalayabileceğiniz bir parçacıkta gösterilir.

Yazan: Bastien Sulyan

Favicon oluşturucu nasıl kullanılır, adım adım

  1. Kaynak görüntünüzü yükleme alanına sürükleyin. En iyi sonuç için 512 piksel veya daha büyük kare görüntü kullanın.
  2. Altı oluşturulan boyutu sonuçlar panelinde önizleyin.
  3. Altı PNG dosyasını ve favicon.ico dosyasını sonuçlar panelinden indirin.
  4. Tüm boyutlar için bağlantı etiketlerini gösteren HTML parçacığını kopyalayın.
  5. PNG dosyalarını sitenizin köküne yerleştirin ve bağlantı etiketlerini sayfa başınıza yapıştırın.

Yaygın kullanım örnekleri

  • Bir geliştirici, tasarım aracı aboneliği olmadan marka logosundan tüm favicon boyutlarının oluşturulmasına ihtiyaç duyarak yeni bir web sitesi kuruyor.
  • Bir PWA yazarı, ana ekrana yükleme için web uygulaması manifestinde gerekli olan 192x192 ve 512x512 ikonları oluşturuyor.
  • Bir blog yazarı, site kimliğini yenileyerek varsayılan favicon'u logosundan oluşturulmuş özel bir ikonla değiştiriyor.
  • Bir serbest çalışan, çevrimdışı tasarım yazılımı yüklemek için beklemeden bir müşteri projesi için favicon setinin tamamını hızla üretiyor.

Sık sorulan sorular

Kaynak olarak hangi görüntü formatlarını kullanabilirim?

Tarayıcının çözebileceği herhangi bir format giriş olarak çalışır: JPEG, PNG, WebP, GIF ve SVG. SVG kaynakları için tarayıcı, vektörü yeniden boyutlandırmadan önce Canvas'a rasterize eder, bu nedenle çıktı PNG'leri kaynaktan bağımsız olarak raster görüntülerdir.

Tarayıcı sekmesinde favicon neden bulanık görünüyor?

16x16 ve 32x32 boyutları çok küçüktür. Kaynak görüntü ince ayrıntılar veya ince çizgiler içeriyorsa bunlar küçültme işleminden geçemez. Temiz şekilli basit, kalın bir tasarım, karmaşık bir illüstrasyondan çok daha iyi sonuç verir.

Araç ICO dosyaları oluşturuyor mu?

Evet. Araç, altı PNG dosyasının yanı sıra 16x16, 32x32 ve 48x48 görüntülerini tek bir dosyada birleştiren bir favicon.ico de oluşturur; bu, eski Windows tarayıcılarının ve bazı tarayıcı robotlarının hâlâ site kökünde aradığı formattır. Modern tarayıcılar PNG bağlantılarıyla da çalıştığı için ikisini birden yayımlamanın bir maliyeti yoktur ve her istemci kendi tercihini seçebilir.

Kaynak görüntü sunucuda işleniyor mu?

Hayır. Her boyutu üreten Canvas drawImage çağrıları tarayıcı sekmenizdeki içinde çalışır. Kaynak görüntü yerel diskinizden okunur ve altı PNG çıktısı bellekte oluşturularak indirme olarak sunulur. Hiçbir dosya verisi sunucudan geçmez.

Apple dokunma ikonu için hangi boyutu kullanmalıyım?

iOS ve iPadOS, apple-touch-icon bağlantı etiketiyle başvurulan 180x180 piksel PNG kullanır. Bu boyut, bir kullanıcı Apple cihazındaki ana ekrana sitenizi eklediğinde kullanılır. Araç bu dosyayı diğer boyutlarla birlikte oluşturur.

Kaynak olarak dikdörtgen görüntü kullanabilir miyim?

Evet, ancak çıktı kare canvas'a sığması için mektup kutulu veya sütun kutulu olacak. En iyi sonuç için kare görüntüyle başlayın veya aracı kullanmadan önce kaynak görüntünüzü kareye kırpın.

İlgili araçlar

Her şeyi yerel tutun, tamamlayıcı araçları keşfedin.

Tüm görsel araçları