HTML 5 Favicon-wsparcie?

Odpowiedzi udzielone (w czasie tego postu) to tylko odpowiedzi na linki, więc pomyślałem, że streszczę linki w odpowiedzi i to, co będę używał.

Podczas tworzenia Faviconów między przeglądarkami (w tym ikon dotykowych) należy wziąć pod uwagę kilka rzeczy.

Pierwszym (oczywiście) jest Internet Explorer. IE nie obsługuje PNG favicons do wersji 11. Tak więc nasza pierwsza linijka jest komentarzem warunkowym dla faviconów w IE 9 i poniżej:

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

Na pokrycie użycie ikony tworzy ją w rozdzielczości 32x32 pikseli. Zwróć uwagę na rel="shortcut icon" aby IE rozpoznał ikonę, potrzebuje słowa shortcut, które nie jest standardowe. Również zawijamy .ico favicon w komentarz warunkowy IE, ponieważ Chrome i Safari będą używać pliku .ico, jeśli jest obecny, pomimo innych dostępnych opcji, nie to, co chcielibyśmy.

Powyższe dotyczy IE do IE 9. IE 11 akceptuje PNG favicons, jednak IE 10 nie. Również IE 10 nie czyta komentarzy warunkowych więc IE 10 nie pokaże favicon. Z IE 11 i Edge dostępne nie widzę IE 10 w powszechnym użyciu, więc ignoruję tę przeglądarkę.

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

Ta ikona powinna mieć rozmiar 196x196 pikseli, aby objąć wszystkie urządzenia, które mogą korzystać z tej ikony.

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

Użycie rel="apple-touch-icon-precomposed" nie spowoduje nałożenia odblaskowego połysku po dodaniu zakładek na iOS. Aby iOS zastosował shine, użyj rel="apple-touch-icon". Ta ikona powinna mieć rozmiar 180x180 pikseli, ponieważ jest to bieżący rozmiar zalecany przez Apple dla najnowszych iphone ' ów i iPadów. Czytałem, że Blackberry będzie również używać rel="apple-touch-icon-precomposed".

Jako Uwaga: Chrome dla Androida stwierdza:

[18]}apple-touch - * są przestarzałe i będą obsługiwane tylko przez krótki czas. (Napisane od wersji beta Dla M31 z Chrome).

Niestandardowe płytki dla IE 11 + na Windows 8.1+

IE 11 + w systemie Windows 8.1 + oferuje sposób tworzenia przypiętych płytek dla Twojej witryny.

Microsoft zaleca utworzenie kilku płytek o następującym rozmiarze:

Mały: 128 x 128

Medium: 270 x 270

Szerokość: 558 x 270

Duży: 558 x 558

Powinny to być przezroczyste obrazy, ponieważ następnie zdefiniujemy kolor tła.

Po utworzeniu tych obrazów należy utworzyć plik xml o nazwie browserconfig.xml z następującym kodem:

<?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>

Zapisz ten plik xml w katalogu głównym witryny. Gdy strona jest przypięta, IE będzie szukał tego pliku. Jeśli chcesz nazwać plik xml czymś innym lub mieć go w innej lokalizacji, Dodaj ten meta tag do head:

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

Aby uzyskać dodatkowe informacje na temat niestandardowych płytek IE 11+ i używając pliku XML odwiedź stronę internetową Microsoftu .

Składając wszystko razem:

Aby poskładać to wszystko do kupy powyższy kod wyglądałby tak:

<!-- 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 Live Tiles

Jeśli użytkownik korzysta z Windows Phone, może przypiąć stronę do ekranu startowego swojego telefonu. Niestety, gdy to zrobią, wyświetli zrzut ekranu telefonu, a nie favicon (nawet kod specyficzny dla MS, o którym mowa powyżej). Aby utworzyć "Live Tile" dla użytkowników Windows Phone na swojej stronie internetowej, należy użyć następującego kodu: [19]}

Oto szczegółowe instrukcje od Microsoft ale oto streszczenie:

Krok 1

Stwórz kwadratowy obraz dla swojej strony internetowej, aby obsługiwać ekrany hi-res stwórz go w rozmiarze 768x768 pikseli.

Krok 2

Dodaj ukrytą nakładkę tego obrazu. Oto przykładowy kod firmy Microsoft:

<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>

Krok 3

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

Microsoft zaleca wykrywanie windows phone i Pokaż tylko ten link do tych użytkowników, ponieważ nie będzie działać dla innych użytkowników.

Krok 4

Następnie dodajesz js, aby przełączyć widoczność nakładki

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

Uwaga na rozmiary

Używam jednego rozmiaru, ponieważ każda przeglądarka będzie skalować obraz w dół, jeśli to konieczne. Mógłbym dodać więcej HTML, aby określić wiele rozmiarów w razie potrzeby dla tych z niższą przepustowością, ale już kompresuję pliki PNG mocno za pomocą TinyPNG i znalazłem to niepotrzebne dla moich celów. Ponadto, zgodnie z philippe_b 's odpowiedź Chrome i Firefox mają błędy, które powodują, że przeglądarka ładuje wszystkie rozmiary ikon. Używanie jednej dużej ikony może być lepsze niż wielu mniejszych z tego powodu.

Czytaj Dalej

Dla tych, którzy chcieliby uzyskać więcej szczegółów, zobacz linki poniżej:

• artykuł na Favicons
• Ikona Podręcznik
• [[142]}zrozumieć Favicon Jonathan T. Neal
• rel="ikona skrótu" uznana za szkodliwą by Mathias Bynens
• Wszystko, co zawsze chciałeś wiedzieć o ikonach dotykowych, Mathias Bynens, Mathias Bynens, Mathias Bynens, Mathias Bynens, Mathias Bynens, Mathias Bynens, Mathias Bynens, Mathias Bynens]}