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, shortcut
które nie jest standardowe. Również zawijamy .ico
favicon 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.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 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: