Tek bir resmi hem normal favicon hem de iPhone / iPad dostu favicon olarak kullanmak istiyorum.
Mümkün mü? İPad dostu 72x72 PNG, normal tarayıcı favicon'u olarak bağlanırsa ölçeklenir mi? Yoksa ayrı bir 16x16 veya 32x32 resim mi kullanmam gerekiyor?
Yanıtlar:
IE için Microsoft, favicon.ico dosyasında 16x16, 32x32 ve 48x48 paketlerini önerir .
İOS'ta, Apple belirli dosya adları ve çözünürlükleri önerir , iOS 8'i çalıştıran en son cihazlar için en az 180x180.
Android Chrome öncelikle bir bildirim kullanır ve ayrıca Apple dokunmatik simgesine dayanır.
Windows 8.0 IE 10 PNG resimleri ve arka plan rengini gerektirir ve Windows 8.1'de IE 11 ve 10 olarak adlandırılan özel bir XML dosyasında bildirilen birkaç PNG resimlerini kabulbrowserconfig.xml .
Mac OS için Safari X El Capitan, sabitlenmiş sekmeler için bir SVG simgesi sunar .
Diğer bazı platformlar, Google TV için 96x96 resim veya Opera Coast için 228x228 resim gibi çeşitli çözünürlüklerde PNG dosyaları arar .
Tam bir referans için bu favicon resimleri listesine bakın.
TLDR: Bu favicon oluşturucu tüm bu dosyaları bir kerede oluşturabilir. Jeneratör ayrıca bir WordPress eklentisi olarak da uygulanabilir . Tam açıklama: Bu sitenin yazarıyım.
Burada listelenen herhangi bir güncel bilgi görmüyorum, işte gidiyor:
Bu soruyu şimdi yanıtlamak için, simgenizin her yerde harika görünmesini istiyorsanız 2 favicons bunu yapmayacaktır. Aşağıdaki boyutlara bakın:
16 x 16 - Tarayıcılar için standart boyut
24 x 24 - Kullanıcı arayüzü için IE9 sabitlenmiş site boyutu
32 x 32 - IE yeni sayfa sekmesi, Windows 7+ görev çubuğu düğmesi, Safari Okuma Listesi kenar çubuğu
48 x 48 - Windows sitesi
57 x 57 - iPod touch , 3G
60 x 60'a kadar iPhone - iOS7
64 x 64'e kadar iPhone dokunuşu - Windows sitesi, HiDPI / Retina
70 x 70'te Safari Okuyucu Listesi kenar çubuğu - Win 8.1 Metro kutucuğu
72 x 72 - iOS6
76 x 76'ya kadar iPad dokunuşu - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone retina touch'ı iOS6
120 x 120'ye kadar - iPhone retina touch iOS7
128 x 128 - Chrome Web Mağazası uygulaması, Android
144 x 144 - Sabitlenmiş site için IE10 Metro döşemesi, iOS6'ya kadar iPad retina
150 x 150 - 8.1 8.1 Metro döşemesi
152 x 152 - iPad retina dokunmatik iOS7
196 x 196 - Android Chrome
310 x 150 - Win 8.1 geniş Metro karosu
310 x 310 - Win 8.1 Metro karosu
Tarayıcıların büyük simgeleri ölçeklendirip ölçeklemediğinden emin değilim, ancak W3C aşağıdakileri önerir 1 :
Seçtiğiniz görüntünün biçimi, 8 bit veya 24 bit renkler kullanılarak 16x16 piksel veya 32x32 piksel olmalıdır. Görüntünün formatı PNG (standart W3C), GIF veya ICO formatlarından biri olmalıdır.
1 w3c.org: Sitenize Favicon Ekleme (Geliştirilmekte olan taslak) .
[current year]sadece css ile yapabileceğiniz şeyler yeterince şaşırtıcı olduğunda neden cehennemde bazı saçma sınırlamalarla uğraşmak zorunda kaldığımı karıştı ve neredeyse cevabınızı kaçırdım. O zaman istediğim her şeyi kullanacağım ve bir şey desteklemiyorsa, standartlara göre onların sorunu.
Aslında, favicon'unuzun tüm tarayıcılarda düzgün çalışmasını sağlamak için doğru boyut ve formatlarda 10'dan fazla dosya eklemeniz gerekir.
Arkadaşım ve ben sadece bunun için bir Uygulama oluşturduk! faviconit.com'da bulabilirsiniz
Bunu yaptık, bu yüzden insanlar tüm bu görüntüleri ve doğru etiketleri elle oluşturmak zorunda değil, beni çok kızdırmak için kullanılan hepsini yarattı!
Sen olabilir aynı dosyada simgelerin birden çok boyut var. Düzenli .icoolarak 48, 32 ve 16 piksel olan favicons ( dosya) oluşturuyorum. İstediğiniz herhangi bir boyutta resim ekleyebilirsiniz. Soru şu ki, iPhone bir icodosya kullanacak mı?
icosaydamlığı da destekler, ancak PNG gibi bir alfa kanalı olup olmadığından emin değilim; muhtemelen daha çok açık olduğu veya kapalı olduğu GIF gibi.
.icodosyaya eklemek için GIMP'yi nasıl kullanabileceğinizi gösterir .
Favicon hakkındaki Wikipedia Makalesine göre , Internet Explorer yalnızca favicons için ICO biçimini desteklemektedir.
İki farklı ikonla yapışırdım.
Favicon'un 16x16 veya 32x32 olması gerekmez. 80x80 veya 100x100 olan bir favicon oluşturabilirsiniz, sadece her iki değerin aynı boyutta olduğundan emin olun ve açıkçası çok büyük veya çok küçük yapmayın, makul bir boyut seçin.
Korktuğum her çözüm için ayrı dosyalara ihtiyacınız olacak. Kampanya monitöründe, simgelerini her iOS cihazı için nasıl oluşturduklarını ve uyguladıklarını açıklayan gerçekten iyi bir makale var:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
Öğrendiğim gibi, bu çözümlerden hiç biri mükemmel değil. Bir favicon jeneratörü kullanmak gerçekten iyi bir çözümdür, ancak sayıları çok fazladır ve seçilmesi zordur. Web sitenizin PWA'nın etkin olmasını istiyorsanız, Google Devs tarafından belirtildiği gibi 512x512 bir simge de sağlamanız gerektiğini eklemek isterim :
192 piksel ve 512 piksel sürüm içeren simgeler
Bu ölçütleri uygulayan pek çok favicon jeneratörüyle tanışmadım ( firebase yapıyor , ancak yapamadığı çok şey var). Bu yüzden çözüm, diğer birçok çözümün bir karışımı olmalıdır.
Bilmiyorum, bugün 2020'nin başında hala bir 16x16, 32x32 sağlıyorsa. Örneğin, kullanıcılarınız hala bir nedenden dolayı IE kullanıyorsa (bu fotoğraflar bazı nedenlerden dolayı daha yeni bir tarayıcıya geçmeyen bazı özel şirketlerde gerçekleşir) gibi bazı bağlamlarda hala önemli olduğunu düşünüyorum.