Do tej pory dodawałem wiersz ikony Apple Touch w mojej głowie w ten sposób:
<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">
Jednak w sekcji pytań i odpowiedzi „Jakie są prawidłowe wymiary w pikselach dla ikony Apple Touch?” W przyjętej odpowiedzi stwierdzono, że zgodnie z wytycznymi Apple potrzebne są teraz trzy obrazy.
Jak więc zabrać się do wstawiania ich do sekcji head kodu?
Minimalistyczne rozwiązanie - zalecane
Powszechną praktyką jest tworzenie pojedynczej ikony 180 x 180, która jest najwyższą oczekiwaną rozdzielczością, i pozwalanie urządzeniom iOS na skalowanie jej w miarę potrzeb. Deklaruje się:
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
Wyczerpujące rozwiązanie - Nie poleca
Specyfikacje Apple określają nowe rozmiary dla iOS7:
Ponadto wstępnie skomponowane ikony są przestarzałe.
W konsekwencji, aby obsługiwać zarówno nowe urządzenia (z systemem iOS7), jak i starsze (iOS6 i wcześniejsze), ogólny kod to:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Ponadto należy utworzyć obraz 180x180 o nazwie apple-touch-icon.png .
Zwróć uwagę, że iOS szuka adresu URL /apple-touch-icon-76x76.png, jeśli nie znajduje interesujących rzeczy w kodzie HTML (trochę tak, jak robi to z IE /favicon.ico). Dlatego ważne jest, aby zachować nazwy plików, jeśli są powyżej. Należy również wziąć pod uwagę, że Android / Chrome również używa tych zdjęć .
Możesz chcieć wiedzieć, że ten generator favicon może tworzyć wszystkie te obrazy naraz. Pełne ujawnienie: jestem autorem tej strony.
<link>tagu są pobierane, jeśli nie ma ich w pamięci podręcznej klienta? Niezależnie od tego, gdzie żądana jest strona (telefon, tablet, komputer, system Windows, Android ...)? Jestem trochę zaniepokojony implikacjami dotyczącymi wydajności ...<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />. Nawet jeśli utworzysz obrazy o różnych rozmiarach, o ile wiem, możesz po prostu usunąć wszystkie linki Apple-Touch-icon, a iOS będzie szukał samych plików, zaczynając od preferowanego rozmiaru (np. Apple-touch-icon-180x180. png) i używając apple-touch-icon.png, jeśli nie znaleziono innych plików.apple-touch-icon).Proszę bardzo, mam nadzieję, że to pomoże.
Jeśli chcesz, aby Apple zrobił dla Ciebie estetyczny kawałek (dodaj połysk), umieść to w
<head>tagach:<link rel="apple-touch-icon" href="apple-touch-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" /> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />Jeśli chcesz wstępnie skomponować obraz, aby Apple wyświetlał go bez połysku, zrób to:
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />Pod warunkiem, że dołączysz więcej niż jeden, urządzenie iOS będzie szukać odpowiedniego rozmiaru i automatycznie wykorzystywać ten obraz. Jak widać z nazw obrazów w przykładzie, iPad z wyświetlaczem Retina potrzebuje ikony o wymiarach 144x144px, iPhone 4 / 4S / 5 potrzebuje ikony o wymiarach 114x114px, oryginalny iPad (i iPad 2 jako rozdzielczość ekranu nie jest inna) wymaga ikony o wymiarach 72x72px, a oryginalny iPhone nie potrzebuje specyfikacji rozmiaru, ale dla odniesienia ma on 57x57px.
źródło
Ponieważ kilka z tych odpowiedzi jest już nieaktualnych, zalecam skorzystanie z http://realfavicongenerator.net/ do generowania wszystkich obrazów i znaczników - za każdym razem przekazuję kilka euro w nadziei, że pozwoli im to zachować na bieżąco, co jest aktualnie ważne na iOS, Android i Windows, więc nie muszę.
źródło
Od 2018 roku witryna Apple Developers zaleca następujące rozwiązania dla urządzeń z systemem iOS:
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"> <link rel="apple-touch-startup-image" href="/launch.png"> <meta name="apple-mobile-web-app-title" content="AppTitle">Tytuł aplikacji zastąpi tytuł Twojej witryny. Zwykle byś tego chciał. Obraz startowy pojawia się podczas uruchamiania aplikacji.
źródło
Określanie ikony strony internetowej dla klipu internetowego
Możesz chcieć, aby użytkownicy mogli dodawać Twoją aplikację internetową lub łącze do strony internetowej na ekranie głównym. Te łącza, reprezentowane przez ikonę, nazywane są wycinkami internetowymi. Wykonaj te proste czynności, aby określić ikonę reprezentującą Twoją aplikację internetową lub stronę internetową w systemie iOS.
Aby określić ikonę dla całej witryny (każdej strony w serwisie), umieść plik ikony w formacie PNG w głównym folderze dokumentów o nazwie apple-touch-icon.png
Aby określić ikonę dla pojedynczej strony internetowej lub zastąpić ikonę witryny internetowej ikoną specyficzną dla strony internetowej, dodaj element link do strony internetowej, jak w:
<link rel="apple-touch-icon" href="/custom_icon.png">W powyższym przykładzie zamień custom_icon.png na nazwę pliku ikony. Aby określić wiele ikon dla różnych rozdzielczości urządzeń - na przykład obsługiwać zarówno urządzenia iPhone, jak i iPad - dodaj atrybut rozmiaru do każdego elementu łącza w następujący sposób:
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">Używana jest ikona, która jest najbardziej odpowiednim rozmiarem dla urządzenia. Jeśli nie ustawiono atrybutu rozmiarów, domyślny rozmiar elementu to 60 x 60. Jeśli nie ma ikony odpowiadającej rozmiarowi zalecanemu dla urządzenia, używana jest najmniejsza ikona większa niż zalecana. Jeśli nie ma ikon większych niż zalecany rozmiar, używana jest największa ikona.
Jeśli nie określono żadnych ikon za pomocą elementu link, w katalogu głównym witryny sieci Web są wyszukiwane ikony z przedrostkiem apple-touch-icon .... Na przykład, jeśli odpowiedni rozmiar ikony dla urządzenia to 60 x 60, system wyszukuje nazwy plików w następującej kolejności:
apple-touch-icon-76x76.png apple-touch-icon.pngAby uzyskać informacje o metrykach ikon strony internetowej, zobacz Rozmiary ikon i obrazów.
Uwaga : Safari na iOS 7 nie dodaje efektów do ikon. Starsze wersje Safari nie będą dodawać efektów do plików ikon o nazwie z przyrostkiem -precomposed.png. Aby uzyskać szczegółowe informacje, zobacz Pierwsze kroki: identyfikowanie aplikacji w iTunes Connect.
Źródło: specyfikacja ikony dotykowej Apple
źródło
Muszę przyznać, że nigdy nie czytałem żadnych specyfikacji Apple, ale zgodnie z logami na mojej stronie, te obrazy są wymagane w katalogu głównym:
apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-120x120.png apple-touch-icon-152x152.png apple-touch-icon-72x72-precomposed.png apple-touch-icon-76x76-precomposed.png apple-touch-icon-120x120-precomposed.png apple-touch-icon-152x152-precomposed.pngźródło
Z mojego żądania ściągnięcia na https://github.com/h5bp/mobile-boilerplate (z ikonami iPhone'a 6):
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 --> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png"> <!-- iPad 3+ (with @2× display) iOS ≥ 7 --> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png"> <!-- iPad (with @2× display) iOS ≤ 6 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png"> <!-- iPhone (with @2× and @3 display) iOS ≥ 7 --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png"> <!-- iPhone (with @2× display) iOS ≤ 6 --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png"> <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 --> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png"> <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png"> <!-- Android Stock Browser and non-Retina iPhone and iPod Touch --> <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png"> <!-- Fallback for everything else --> <link rel="shortcut icon" href="img/touch/apple-touch-icon.png"> <!-- Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions). If it’s not defined on that size it will take 128×128. --> <link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png"> <link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png"> <!-- Tile icon for Win8 (144x144 + tile color) --> <meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png"> <meta name="msapplication-TileColor" content="#222222">źródło
Możesz użyć omg-img do wygenerowania wszystkich rozmiarów i kolorów popularnych ikon. Na przykład:
<link rel="apple-touch-icon" sizes="152x152" href="https://img.icons8.com/color/152x152/anonymous-mask.png">Ten tag zwraca następny obraz dla urządzeń z iOS:
źródło