Favicon ve web manifest

Bir görsel girer, bütün takım çıkar: gerçek, çok boyutlu bir ICO; Apple'ın istediği gibi düzleştirilmiş Apple touch simgesi; manifest PNG'leri; web manifestin kendisi; ve yapıştırılacak HTML bloğu. Ayrıca Android'in maskable kırpmasını ısırmadan önce gösterir — çoğu simgenin kenarlarını sessizce kaybettiği yer orasıdır.

Bir görseli buraya sürükleyin ya da tıklayıp seçin
En iyisi kare, en az 512 piksel. Saydam bir PNG en temiz sonucu verir.
Ana ekranda simgenin altına sığan kadarı.
Saydamlığa izin verilmeyen yerde onu doldurur ve maskable simgeye kenar payı verir.
DosyaBoyutNeyin kullandığı
 

    


    

    

      
.ico neden hâlâ önemli

      
Tek bir PNG çoğu tarayıcıya yeter ve yalnızca bir sekme simgesine ihtiyacınız olsaydı orada durabilirdiniz. ICO yerini hak eder, çünkü birkaç çözünürlüğü tek dosyada tutar ve doğrusunu işletim sistemi seçer: sekme 16'yı kullanır, sabitlenmiş bir kısayol ya da masaüstü bağlantısı 32 veya 48'i kullanır ve her biri, büyük bir görselden anında sıkıştırılmak yerine o boyut için yapılmış bir bit eşlemden çizilir. Burada üretilen dosya, küçük bir başlığı olan bir PNG kabıdır ve bu yüzyılda çıkmış her tarayıcının okuduğu şey de budur.

      
maskable güvenli alanı

      
Android simgenizi kare göstereceğine söz vermez. Başlatıcıya göre onu daireye, squircle'a ya da köşeleri yuvarlatılmış bir kareye kırpabilir; size verilen tek garanti iç dairedir — genişliğin yüzde sekseni, ortalanmış. Kenarlara kadar giden görsel, tam olarak kenarlarını kaybeden görseldir. Çözüm, manifest simgelerini o güvenli alanın içine doğru yastıklamaktır; buradaki önizleme de kırpmayı çizer, böylece onu bir kullanıcıdan önce siz görürsünüz.

      
Apple touch simgesinde neden saydamlık yok

      
iOS ana ekran simgesini kendi yuvarlatılmış biçiminin üzerine bindirir ve alfa kanalına umduğunuz gibi saygı göstermez; saydam bölgeler siyah çıkar. Bu yüzden yalnızca o dosya, kodlanmadan önce arka plan renginizin üzerine düzleştirilir; manifest PNG'leri ise alfasını korur, orada doğru işlenir.

      
Dosyalarla ne yapmalı

      
Onları bir varlık klasörüne değil, sitenin köküne koyun: tarayıcılar ve tarayıcı botları favicon yolunu tahmin eder ve bazıları siz bağlasanız da bağlamasanız da onu ister. Ardından HTML bloğunu sayfanızın head bölümüne yapıştırın. Manifest yolu, dosyayı gerçekte nereye koyduğunuzla eşleşmesi gereken tek satırdır.


      
SSS

      

        
PNG'lerim varken yine de favicon.ico gerekir mi?
Kuralı harfiyen alırsak hayır. Pratikte evet: bir sürü tarayıcı botu, akış okuyucusu ve eski araç favicon'u yol üzerinden ister ve işaretlemenize hiç bakmaz. Birkaç kilobayta mal olur.

        
Simgem 16 pikselde bulanık görünüyor. Ne yapabilirim?
Burada düzeltilecek bir şey yok, çünkü yer yetmiyor. O boyutta bir işaretin enine yaklaşık on okunur pikseli olur; harflerden oluşan bir logo her zaman lapaya döner. Kaynak olarak sadeleştirilmiş bir sürüm verin — tek biçim, tek harf — tam kilitlenmiş logoyu da başka her yer için saklayın.

        
maskable kenar payını kapatmalı mıyım?
Yalnızca görseliniz zaten kendi cömert kenar payının içinde duruyorsa. Kareyi dolduruyorsa açık bırakın, yoksa Android içine kadar kırpar.

        
Görselim bir yere yükleniyor mu?
Hayır. Her boyut bu sayfadaki bir tuvale çizilir ve arşiv bellekte oluşturulur. Hiçbir şey gönderilmez.

      

      
GO AI ekibi tarafından yapıldı. Uygulama simgesi oluşturucu · Toplu boyutlandırıcı · Tüm ücretsiz araçlar