Favicon Lab: Favicon ve uygulama ikonu oluşturucu
YeniTek görselden tam favicon ve uygulama ikonu seti üretin; manifest ve HTML bloğu yapıştırmaya hazır gelir.
Görselinizi buraya bırakın
PNG, JPG, WebP veya sabit boyutlu SVG. 512 px ve üzeri kare bir kaynak en iyi sonucu verir.
Web app manifest
Şeffaf olamayan Apple touch ikonu, maskable ikon ve Windows kutucuğunun arkasında kullanılır.
Modern bir sitenin istediği bütün ikonlar
Tarayıcılar, iOS, Android ve Windows farklı boyut ve biçim ister. Tek yükleme hepsini ve bunları birbirine bağlayan kodu üretir.
Gerçek favicon.ico
16, 32 ve 48 px görüntü taşıyan çok çözünürlüklü ICO; tarayıcınızda derlenir, uzantısı değiştirilmiş bir PNG değildir.
Apple touch ikonu
Opak arka plan üzerinde 180 px ikon; çünkü iOS şeffaflığı siyah olarak gösterir.
Android ve maskable
192 ve 512 px ikonlar ile maskable sürüm; Android markanızı kırpmadan her cihaz biçimine uydurur.
Web app manifest
Uygulama adı, tema rengi, arka plan rengi ve ikon kayıtları hazır gelen site.webmanifest.
Yapıştırmaya hazır HTML
Tüm setin link ve meta etiketleri, tarayıcıların beklediği sırada.
Gerçek boyut kontrolü
16 px sürümü yayına almadan 16 px olarak görün; logolardaki ince detay genelde burada kaybolur.
Favicon hakkında sorular
favicon.ico hâlâ gerekli mi?
Evet, bulundurun. Tarayıcılar hiçbir link etiketi göstermese bile site kökünden /favicon.ico ister ve bazı okuyucular ile botlar yalnızca o dosyayı arar. Modern tarayıcılar PNG kayıtlarını tercih eder.
Favicon Lab ücretsiz mi, çevrimdışı çalışır mı?
Evet. Favicon Lab ücretsizdir; hesap, kayıt veya kullanım sınırı yoktur. Tamamen tarayıcınızda çalıştığı için sayfayı bir kez internete bağlıyken açtıktan sonra bağlantı olmadan da çalışmaya devam eder.
En iyi kaynak görsel hangisi?
512 px ve üzeri, şeffaf arka planlı, sade bir işaret taşıyan kare görsel. 512 px'te okunan detay 16 px'te genelde kaybolur; logonuzun basitleştirilmiş bir sürümünü düşünün.
Apple touch ikonu neden şeffaf değil?
iOS şeffaf alanları siyah üzerine yerleştirir ve sonuç bozuk görünür. Bu Lab o ikonları seçtiğiniz arka plan rengiyle doldurur; ana ekranda markanızla uyumlu görünür.
Maskable ikon nedir?
Android uygulama ikonlarını cihaza özel biçimlere kırpar: daire, squircle veya yuvarlatılmış kare. Maskable ikon, işaretin çevresinde boşluk bırakır; böylece bu biçimlerin hiçbirinde önemli bir kısım kesilmez.
Dosyalar nereye konur?
Sitenizin genel kök dizinine, index.html'in yanına; böylece /favicon.ico ve /site.webmanifest adresleri çözülür. Ardından HTML bloğunu sayfalarınızın head bölümüne yapıştırın.
Favicon'um değişmedi, neden?
Favicon'lar hem tarayıcı hem de açık sekmeler tarafından sıkı önbelleğe alınır. Sayfayı zorla yenileyin veya yeni dosyanın sunulduğunu doğrulamak için ikon adresini doğrudan açın.
Sonraki adım
Bu Lab’dan hemen sonra en çok kullanılan Lab’lar.