Favicon Generator Online — PNG'den ICO'ya Tüm Boyutlarda
Bir PNG, JPG veya SVG bırakın — kullanıma hazır bir favicon.ico, tüm PNG boyutları, apple-touch ikonu, web manifesti ve HTML snippet'i alın. Her şey tarayıcınızda çalışıyor, yükleme yok.
PNG, JPG, SVG, WebP
Dosyanızı buraya sürükleyip bırakın veya seçmek için tıklayın
Favicon jeneratörü hakkında
Modern bir favicon tek bir dosya değil — bir set: eski tarayıcılar ve Windows kısayolları için ICO, modern Chrome/Firefox için farklı boyutlarda PNG, iOS ana ekranı için bir apple touch simgesi ve PWA için bir web manifesti. Bu araç, tüm paketi tek bir resimden tek bir tıklamayla oluşturur.
Dönüşüm istemci tarafında çalışır: Canvas, kaynağınızı gerekli her boyutta render eder, sonra PNG baytlarını ICO konteynerine koyarız (Windows Vista'dan beri desteklenen PNG-in-ICO, her tarayıcıda çalışır). Dosyanız asla yüklenmez.
Ortaya çıkan ZIP, favicon.ico, PNGs 16/32/96/192/512, apple-touch-icon (180×180), site.webmanifest ve yapıştırmaya hazır bağlantı etiketleriyle birlikte bir HTML parçası içerir. Dosyaları site kök noktasına bırakın ve snippet'i kafaya yapıştırın.
Favicon jeneratörüne ne zaman ihtiyacınız olacak
Yeni bir site başlatmak
Logonu yükleyin — Chrome, Safari, Firefox, Edge ve mobil tarayıcılarda doğru çalışan hazır bir paket edinin. Photoshop yok, Apple'ın teknik özelliklerini ezberlemeye gerek yok.
Masaüstü uygulaması veya kısayolu
Windows kısayolu, EXE kaynağı veya eski Internet Explorer için favicon.ico mi gerekiyor? Sadece ICO'yu indirin — çok çözünürlüklü 16/32/48 tek bir dosyada.
PWA / iOS Ana Ekrana Ekle
Siteniz 'Ana Ekrana Ekle' desteğini destekliyorsa, apple-touch-icon (180×180) ve PNG 192/512 içeren bir web manifestosu gerekir. Jeneratör onları otomatik olarak inşa eder.
Eski bir simgenin değiştirilmesi
Eski favicon bulanık, retina veya koyu mod desteği yok mu? Temiz bir SVG'den doğru modern boyut setiyle yeniden oluşturulabilir.
SSS
Hangi formatları yükleyebilirim?
PNG, JPG, JPEG, WebP, GIF ve SVG. Kare PNG veya SVG'den en iyi sonuçlar: keskinliği kaybetmeden ölçeklenirler. Kaynağınız dikdörtgen ise, bir uyum modu seçin (örtü / içerme / germe).
Uyum modları arasındaki fark nedir?
Kapak — kenarları kırparak resim kareye girer (ortalanmış elema olan logolar için iyidir). Contain — tüm görüntüye uyar, kenarları arka planla doldurur (karmaşık logolar için iyidir). Esneme — oranları bozur (nadiren gerekir).
İçinde ne favicon.ico?
ICO bir konteynerdir. İçinde üç boyutta PNG görüntüleri yer alıyor: 16×16, 32×32 ve 48×48. Tarayıcı, bağlama uygun olanı seçer. Bu, Windows Vista'dan (2007) beri desteklenen 'PNG-in-ICO' formatıdır ve her modern tarayıcıda desteklenmektedir.
Neden bu kadar çok PNG dosyası?
Her boyutun bir amacı vardır: 16/32 — tarayıcı sekmesi; 96 — Chrome yeni sekme; 180 — iOS Ana Ekranı (apple-touch-icon); 192 — Android Chrome; 512 — PWA sıçraması. Tarayıcılar, bağlantı etiketindeki boyutlar özelliği üzerinden doğru olanı seçer.
site.webmanifest nedir?
İkon listesi ve PWA parametreleriyle bir JSON dosyası. Android / Chromium'da 'Ana Ekrana Ekle' için simge ve başlık doğru görünmesi için gereklidir. Eğer PWA kurmıyorsanız, dosya zararsızdır.
Transparent açıkken neden apple-touch-icon arka planla birlikte geliyor?
iOS, varsayılan olarak şeffaf PNG'lere siyah bir arka plan ekliyor. Bu kötü görünüyor, bu yüzden seçilmiş renkle dolduruyoruz (varsayılan olarak beyaz). Diğer tüm PNG'ler ve ICO, kabul ettiyseniz şeffaf kalır.
Dosyaları nereye koyacağım?
Site kök noktası: example.com/favicon.ico, example.com/favicon-32x32.png ve benzeri. Sonra HTML parçasını her sayfanın başına yapıştırın — en iyi şekilde paylaşılan bir düzen ile yapılabilir. Tarayıcı, bir sonraki sayfa yüklendiğinde favicon bulur.