Verilen cevaplar (bu yazı sırasında) bağlantı sadece cevaplar bu yüzden bir cevap ve ne kullanacağım bağlantıları özetlemek düşündüm.
Çapraz Tarayıcı Favicons (dokunmatik simgeler dahil) oluşturmak için çalışırken dikkate alınması gereken birkaç şey vardır.
Birincisi (tabii ki) Internet Explorer. IE, 11 sürümüne kadar PNG favicons'u desteklemez. Bu nedenle ilk satırımız IE 9 ve altındaki favicons için koşullu bir yorumdur:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
Simgenin kullanımlarını kapsamak için 32x32 pikselde oluşturun. rel="shortcut icon"IE için shortcutstandart olmayan kelimeye ihtiyaç duyduğu simgeyi tanımak için dikkat edin . Ayrıca, .icofavicon'u bir IE koşullu yorumunda sararız çünkü Chrome ve Safari .ico, mevcut diğer seçeneklere rağmen, istediğimizi değil , dosyayı kullanır .
Yukarıdaki IE 9 kadar IE kapsar. IE 11 PNG favicons kabul, ancak IE 10 kabul etmez. Ayrıca IE 10 koşullu yorumları okumaz, böylece IE 10 bir favicon göstermez. IE 11 ve Edge kullanılabilir olduğunda, IE 10'u yaygın kullanımda görmüyorum, bu yüzden bu tarayıcıyı yok sayıyorum.
Tarayıcıların geri kalanı için bir favicon'u belirtmek için standart yolu kullanacağız:
<link rel="icon" href="path/to/favicon.png">
Bu simgeyi kullanabilen tüm cihazları kapsayacak şekilde, bu simge 196x196 piksel boyutunda olmalıdır.
Mobil cihazlardaki dokunmatik simgeleri kapsamak için Apple'ın bir dokunmatik simgeye atıfta bulunmak için özel yolunu kullanacağız:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Kullanmak rel="apple-touch-icon-precomposed", iOS'ta yer işareti konduğunda yansıtıcı parlaklığı uygulamaz. İOS'un parlaklık kullanımını uygulaması için rel="apple-touch-icon". Bu simge, en son iPhone'lar ve iPad'ler için Apple tarafından önerilen geçerli boyut olduğu için 180x180 piksel boyutunda olmalıdır. Blackberry'nin de kullanacağını okudum rel="apple-touch-icon-precomposed".
Not olarak: Android için Chrome şunları belirtir:
Apple-touch- * kullanımdan kaldırılmıştır ve yalnızca kısa bir süre için desteklenecektir. (Chrome m31 için beta olarak yazılmıştır).
Windows 8.1 ve sonraki sürümlerinde IE 11+ için Özel Karolar
Windows 8.1 ve sonraki sürümlerinde IE 11+, siteniz için sabitlenmiş karolar oluşturmanın bir yolunu sunar.
Microsoft, aşağıdaki boyutta birkaç kutucuk oluşturmanızı önerir:
Küçük: 128 x 128
Orta: 270 x 270
Geniş: 558 x 270
Büyük: 558 x 558
Daha sonra bir renk arka planı tanımlayacağımız için bunlar şeffaf görüntüler olmalıdır.
Bu görüntüler oluşturulduktan browserconfig.xmlsonra aşağıdaki kodla adlandırılan bir xml dosyası 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>
Bu xml dosyasını sitenizin kök dizinine kaydedin. Bir site sabitlendiğinde IE bu dosyayı arayacaktır. Xml dosyasına farklı bir ad vermek veya farklı bir konumda olmasını istiyorsanız bu meta etiketi şuraya ekleyin head:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
IE 11+ özel döşemeleri ve XML dosyasını kullanma hakkında ek bilgi için Microsoft'un web sitesini ziyaret edin .
Hepsini bir araya koy:
Hepsini bir araya getirmek için yukarıdaki kod şöyle 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">
Windows Phone Canlı Fayanslar
Bir kullanıcı bir Windows Phone kullanıyorsa, bir web sitesini telefonunun başlangıç ekranına sabitleyebilir. Ne yazık ki, bunu yaptıkları zaman bir favicon değil, telefonunuzun ekran görüntüsünü görüntüler (yukarıda belirtilen MS'ye özgü kod bile değil). Web siteniz için Windows Phone Kullanıcıları için bir "Canlı Döşeme" yapmak için aşağıdaki kodu kullanmanız gerekir:
İşte Microsoft'un ayrıntılı talimatları, ancak burada bir özet:
Aşama 1
Yüksek çözünürlüklü ekranları desteklemek için 768x768 piksel boyutunda web siteniz için kare bir resim oluşturun.
Adım 2
Bu görüntünün gizli bir katmanını 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>
Aşama 3
Ardından, başlangıç bağlantısına bir iğne eklemek için aşağıdaki satırı ekleyebilirsiniz:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft, Windows telefonunu algılamanızı ve diğer kullanıcılarla çalışmadığından yalnızca bu bağlantıyı göstermenizi önerir.
4. Adım
Sonra yer paylaşımı görünürlüğünü değiştirmek için bazı JS'ler eklersiniz
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
Boyutlar Hakkında Not
Her tarayıcı görüntüyü gerektiği gibi ölçeklendireceği için bir boyut kullanıyorum. Daha düşük bant genişliğine sahip olanlar için istenirse birden fazla boyut belirtmek için daha fazla HTML ekleyebilirim ama zaten TinyPNG kullanarak PNG dosyalarını yoğun bir şekilde sıkıştırıyorum ve bunu amacım için gereksiz buluyorum. Ayrıca, uygun philippe_b 'ın cevabını Chrome ve Firefox simgeleri tüm boyutları yüklemek için tarayıcı neden böcek var. Bu nedenle, büyük bir simge kullanmak birden çok küçük simgeden daha iyi olabilir.
Daha fazla okuma
Daha fazla ayrıntı isteyenler için aşağıdaki bağlantılara bakın: