Wikipedia Favicon sayfasını okuyordum. Favicon için HTML 5 spec söz:

Geçerli HTML5 şartname önerir belirterek boyutunu birden fazla boyut öznitelikleri kullanarak simgeleri="simge" boyut="simge boyutları uzay-ayrılmış listesi" etiketi içinde. rel [source] Birden fazla simge biçimleri, Microsoft gibi konteyner biçimleri de dahil olmak üzere .ıco ve Macintosh .dosyaları, yanı sıra Ölçeklenebilir Vektör Grafik türü şeklinde simgenin içerik türü de dahil olmak üzere tarafından sağlanabilir icns="içerik türü dosya" etiketi içinde.

Anılan madde bu örnek gösteriyorlar bakarak:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg xml">

Benim sorum herhangi bir tarayıcı HTML 5 yöntem destek değil mi?

Not: Apple HTML5 yöntemi üzerinde apple-touch-icon meta tag yöntemi kullandığını biliyorum.

Wikipedia makale iddia:

Google Chrome web tarayıcısı ancak, seçmek en yakın eşleşen boyutu bu sağlanan HTML başlıklarını oluşturmak 128×128 piksel uygulama simgeleri Kullanıcının seçtiği uygulama kısayolları Oluştur... "Araçlar" menüsü.

Nasıl Internet Explorer () 9 için v11 ve Firefox bu ele? Ve madde Chrome HTML Simgelerini nasıl işleyeceğini doğru mu? (Kaynak Krom bu teyit için atıf yok.)

Arama gerçekten HTML 5 Favicon (güvenilir) herhangi bir bilgi Wikipedia Makale dışında bulmak mümkün değildi.

Cevapları vermiştir (bu yazı sırasında) kullanarak olacak ne bir cevap linkler ve özetlemek düşündüm sadece cevapları link.

Oluşturmak için çalışan Tarayıcı site simgeleri (dokunmatik simgeler dahil) arası dikkate alınması gereken birkaç şey vardır.

İlk (tabii ki) Internet Explorer. IE sürüm 11'e kadar PNG simgelerini desteklemiyor. İlk hat simgelerini IE 9 ve altında koşullu bir yorum:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

Simge kullanır karşılamak için 32 x 32 piksel oluşturun. IE için rel="shortcut icon" 14 ** kelime ihtiyacı standart olmayan simge tanımak için dikkat edin. Ayrıca biz Chrome ve Safari varsa, başka seçenekler olmasına rağmen ise .ico dosyası kullanır, istediğimiz de değil, çünkü YANİ koşullu bir yorum .ico favicon sarın.

Yukarıdaki IE 9 kapsar. IE 11 10 değil YANİ PNG simgelerini, ancak kabul eder. Ayrıca IE 10 şartlı yorumlar okumuyor YANİ 10 favicon göstermez böylece. IE 11 ve Edge mevcut yaygın kullanımı 10 YANİ anlamıyorum, bu tarayıcı yok sayıyorum.

Tarayıcılar geri kalanı için bir favicon alıntı için standart bir yol kullanacağız:

<link rel="icon" href="path/to/favicon.png">

Bu simge boyutu 196x196 piksel bu simgeyi kullanan tüm cihazları kapsayacak şekilde olmalıdır.

Mobil cihazlarda dokunmatik simgeleri kapak için Apple dokunmatik simgesi alıntı özel şekilde kullanacağız:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

rel="apple-touch-icon-precomposed" kullanarak iOS sık yansıtıcı parlaklık geçerli değildir. İOS Parlatıcı uygulamak için kullanın. rel="apple-touch-icon". Bu simge o anki boyutunu en son iPhone ve ipad'ler için Apple tarafından tavsiye olarak 180x180 piksel büyüklüğünde olmalıdır. Okudum da rel="apple-touch-icon-precomposed" Blackberry kullanacak.

Bir not olarak: Android Devletler için Krom:

Apple-touch-* kaldırılan ve kısa bir süre için sadece destek verilecek. (Krom m31 için beta olarak yazılmış).

Özel bir IE 11 için 8.1 Fayans

Windows üzerinde IE 11 8.1 bir şekilde siteniz için tutturulmuş fayans oluşturmak için sunuyor.

Microsoft, aşağıdaki boyut: birkaç kiremit oluşturma önerir

Küçük: 128 x 128

Orta: 270 x 270

Geniş: 558 x 270

Büyük: 558 x 558

Bu renk bir arka plan bir sonraki tanımlayacağız gibi saydam görüntüler olmalıdır.

Bu görüntüleri oluşturulduktan sonra xml dosyası browserconfig.xml denilen aşağıdaki kodu oluşturmanız gerekir:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Sitenizin kök dizininde bu xml dosyası olarak kaydedin. Bir site sabitlenmiş YANİ bu dosyayı arayacaktır. Eğer farklı bir şey yoksa dosya var xml ad vermek isterseniz farklı bir konuma head bu meta etiketi ekleyin:

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

11 özel fayans IE ve XML kullanma hakkında ek bilgi için visit Microsoft's website dosya.

Hepsini bir araya getirirsek:

Yukarıdaki kod parçaları biraraya getirmek gibi görünecektir:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1  180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11  and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Canlı Çini Windows Telefon

Eğer bir kullanıcı bir Windows Telefonu kullanıyor eğer kendi telefonun başlangıç ekranına bir pın web sitesi. Bunu yaptıklarında ne yazık ki, bu telefon, bir favicon (MS özel kodu yukarıda başvurulan bile) bir ekran görüntüler. Bir" Windows için web sitesi için Telefonu Kullanıcılarının aşağıdaki kodu kullanmanız gerekir: . "Canlı Karo yapmak

Here are detailed instructions from Microsoft ama burada bir özet

Adım 1

Boyutu 768x768 piksel web siteniz için bir kare görüntü, yüksek çözünürlüklü ekranlar için destek elde oluşturun.

Adım 2

Bu görüntü gizli bir kaplama ekleyin. İşte Microsoft'tan örnek kod:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
  <img src="customtile.png" width="320" height="320" />
  <div style='margin-top: 40px'>
     Add text/graphic asking user to pin to start using the menu...
  </div>
</div>

Adım 3

Daha sonra thew aşağıdaki satırı bağlantı başlatmak için bir pin eklemek için:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

Microsoft, windows phone algılamak ve sadece diğer kullanıcılar için işe yaramaz beri bu kullanıcılar için bu bağlantıyı göster önerir.

Adım 4

Bir sonraki kaplaması görünürlüğünü bazı JS ekleyin

<script>
function ToggleTileOverlay() {
 var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

Boyutlarına dikkat edin

Her tarayıcı gerekli resmi ölçeklendirme gibi bir boyutu kullanıyorum. Eğer daha düşük bir bant genişliğine sahip olanlar için gerekirse daha fazla HTML birden çok boyutu belirtmek için ekleyebilirim ama zaten PNG ağır TinyPNG kullanarak dosyaları ve bu benim amaçlar için gereksiz buluyorum sıkıştırarak yapıyorum. Ayrıca, philippe_b'35* s *Chrome ve Firefox tarayıcı simgeleri tüm boyutları yüklenmesine neden olan hatalar var. göre Büyük bir simge kullanarak çok daha iyi olabilir, çünkü daha küçük olanlar.

Daha Fazla Okuma

Daha fazla ayrıntı isteyenler aşağıdaki bağlantıları görmek için:

• Wikipedia Article on Favicons
• The Icon Handbook
• Jonathan T. Neal Understand the Favicon
• Mathias rel="shortcut icon" considered harmful Bynens
• Mathias Everything you always wanted to know about touch icons Bynens