HTML 5 Favicon - wsparcie?

Czytałem stronę Favicon na Wikipedii. Wspominają o specyfikacji HTML 5 dla Favicon:

Obecna specyfikacja HTML5 zaleca określanie ikon rozmiarów w wielu rozmiarach za pomocą atrybutów rel = "icon "izes =" lista rozdzielonych spacjami wymiarów ikon "w tagu. [ źródło ] Wiele formatów ikon, w tym formaty kontenerów, takie jak pliki Microsoft .ico i Macintosh .icns, a także Scalable Vector Graphics, można zapewnić, włączając typ zawartości ikony w postaci type = "file content-type" w etykietka.

Patrząc na cytowany artykuł (W3), pokazują następujący przykład:

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

Moje pytanie brzmi: czy jakieś przeglądarki obsługują metodę HTML 5?

Uwaga: wiem, że Apple używa apple-touch-iconmetody metatagu zamiast metody HTML5.

Artykuł na Wikipedii twierdzi:

Jednak przeglądarka internetowa Google Chrome wybierze najbliższy pasujący rozmiar z podanych w nagłówkach HTML, aby utworzyć ikony aplikacji o wymiarach 128 × 128 pikseli, gdy użytkownik wybierze opcję Utwórz skróty do aplikacji… z menu „Narzędzia”.

Jak radzą sobie z tym Internet Explorer (od wersji 9 do 11) i Firefox? I czy artykuł jest poprawny w tym, jak Chrome obsługuje ikony HTML Favicons? (Nie ma cytowanego źródła dla Chrome, które to potwierdza).

Podczas wyszukiwania nie byłem w stanie znaleźć żadnych (wiarygodnych) informacji na temat HTML 5 Favicon poza artykułem z Wikipedii.

Odpowiedzi udzielone (w czasie tego postu) są tylko odpowiedziami na linki, więc pomyślałem, że podsumuję linki w odpowiedzi i to, czego będę używać.

Podczas tworzenia ulubionych ikon w różnych przeglądarkach (w tym ikon dotykowych) należy wziąć pod uwagę kilka kwestii.

Pierwszym (oczywiście) jest Internet Explorer. IE nie obsługuje ikon ulubionych w formacie PNG aż do wersji 11. Tak więc nasza pierwsza linia to warunkowy komentarz do ikon ulubionych w IE 9 i poniżej:

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

Aby pokryć zastosowania ikony, utwórz ją w rozmiarze 32x32 piksele. Zwróć uwagę, że rel="shortcut icon"IE rozpoznaje ikonę, potrzebuje słowa, shortcutktóre nie jest standardowe. Również zawijamy .icofavicon w komentarz warunkowy IE, ponieważ Chrome i Safari będą używać rozszerzenia.ico pliku, jeśli jest obecny, pomimo innych dostępnych opcji, a nie to, co byśmy chcieli.

Powyższe obejmuje IE do IE 9. IE 11 akceptuje ikony ulubionych w formacie PNG, jednak IE 10 nie. Również IE 10 nie czyta komentarzy warunkowych, więc IE 10 nie pokaże ikony ulubionych. Przy dostępnym IE 11 i Edge nie widzę IE 10 w powszechnym użyciu, więc ignoruję tę przeglądarkę.

W przypadku pozostałych przeglądarek będziemy używać standardowego sposobu cytowania favicon:

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

Ta ikona powinna mieć rozmiar 196x196 pikseli, aby zakryć wszystkie urządzenia, które mogą jej używać.

Aby objąć ikony dotykowe na urządzeniach mobilnych, wykorzystamy zastrzeżony sposób Apple do zacytowania ikony dotykowej:

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

Użycie rel="apple-touch-icon-precomposed"nie spowoduje zastosowania odblaskowego połysku po dodaniu do zakładek w systemie iOS. Aby mieć iOS, zastosuj połysk rel="apple-touch-icon". Ta ikona powinna mieć rozmiar 180 x 180 pikseli, ponieważ jest to aktualny rozmiar zalecany przez firmę Apple dla najnowszych iPhone'ów i iPadów. Przeczytałem, że Blackberry też będzie używać rel="apple-touch-icon-precomposed".

Uwaga: Chrome na Androida stwierdza:

Apple-touch- * są przestarzałe i będą obsługiwane tylko przez krótki czas. (Napisane od wersji beta dla m31 Chrome).

Niestandardowe kafelki dla IE 11+ w systemie Windows 8.1+

Przeglądarka IE 11+ w systemie Windows 8.1+ oferuje sposób tworzenia przypiętych kafelków dla Twojej witryny.

Firma Microsoft zaleca utworzenie kilku kafelków w następującym rozmiarze:

Mały: 128 x 128

Średni: 270 x 270

Szeroki: 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.xmlz 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 swojej witryny. Kiedy witryna jest przypięta, IE będzie szukać tego pliku. Jeśli chcesz nazwać plik xml inaczej lub umieścić go w innej lokalizacji, dodaj ten metatag do head:

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

Aby uzyskać dodatkowe informacje na temat niestandardowych kafelków przeglądarki IE 11+ i korzystania z pliku XML, odwiedź witrynę internetową firmy Microsoft .

Kładąc wszystko razem:

Podsumowując, 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 telefonu Windows Phone, może przypiąć witrynę internetową do ekranu startowego swojego telefonu. Niestety, kiedy to robią, wyświetla zrzut ekranu twojego telefonu, a nie favicon (nawet nie ma określonego kodu MS, o którym mowa powyżej). Aby utworzyć „Live Tile” dla użytkowników Windows Phone dla swojej witryny internetowej, należy użyć następującego kodu:

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

Krok 1

Utwórz kwadratowy obraz dla swojej witryny, aby obsługiwać ekrany o wysokiej rozdzielczości, utwó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

Następnie możesz dodać następujący wiersz, aby dodać kod PIN do łącza początkowego:

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

Firma Microsoft zaleca wykrycie telefonu z systemem Windows i wyświetlenie tego łącza tylko tym użytkownikom, ponieważ nie będzie działać dla innych użytkowników.

Krok 4

Następnie dodaj trochę 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 temat rozmiarów

Używam jednego rozmiaru, ponieważ każda przeglądarka będzie w razie potrzeby zmniejszać obraz. Mógłbym dodać więcej HTML, aby określić wiele rozmiarów, jeśli jest to pożądane dla tych o niższej przepustowości, ale już intensywnie kompresuję pliki PNG przy użyciu TinyPNG i uważam to za niepotrzebne do moich celów. Ponadto, zgodnie z philippe_b „s odpowiedź Chrome i Firefox mają błędy, które powodują przeglądarkę, aby załadować wszystkie rozmiary ikon. Z tego powodu użycie jednej dużej ikony może być lepsze niż wielu mniejszych.

Dalsze czytanie

Dla tych, którzy chcieliby uzyskać więcej informacji, zobacz poniższe linki:

• Artykuł Wikipedii na temat Favicon
• Podręcznik ikon
• Zrozum Favicon Jonathana T. Neala
• rel = "ikona skrótu" uznana przez Mathiasa Bynensa za szkodliwą
• Wszystko, co zawsze chciałeś wiedzieć o ikonach dotykowych autorstwa Mathiasa Bynensa

Nie, nie wszystkie przeglądarki obsługują sizesatrybut:

• Safari: Tak, wybiera obraz, który najlepiej pasuje .
• Opera: Tak, wybiera obraz, który najlepiej pasuje .
• IE11: Nie wiem. Najwyraźniej przedstawia większy obraz, jaki znajdzie , który jest nieco prymitywny, ale w porządku.
• Chrome: nie, zobacz błędy 112941 i 324820 . W rzeczywistości Chrome ma tendencję do ładowania wszystkich zadeklarowanych ikon, a nie tylko najlepszej / pierwszej / ostatniej.
• Firefox: Nie, zobacz błąd 751712 . Podobnie jak Chrome, Firefox ma tendencję do ładowania wszystkich zadeklarowanych ikon.

Zwróć uwagę, że niektóre platformy definiują określone rozmiary:

• Android Chrome oczekuje ikony 192x192 , ale faworyzuje ikony zadeklarowane w programie, manifest.jsonjeśli jest obecna. Ponadto Chrome używa ikony Apple Touch do zakładek .
• Coast by Opera oczekuje ikony 228x228 .
• Google TV oczekuje ikony 96x96 .