Ikona Apple Touch dla witryn internetowych

85

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?

html  mobile  apple-touch-icon 
— J82
źródło

Odpowiedzi:

90

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:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

A także dla iOS8 :

  • 180x180

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.

— philippe_b
źródło
2
Czy wszystkie pliki w każdym <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 ...
— RayOnAir
1
Od iOS8 jest też nowa rozdzielczość 180x180. Naprawdę nie musisz też tworzyć linków do ikon z HTML - chyba że chcesz mieć określone ikony tylko dla jednej konkretnej strony. Apple ma najnowszą listę rozmiarów, które lubią: developer.apple.com/library/ios/documentation/UserExperience/… . Poszukaj w tabeli wpisu „Ikona klipu internetowego”.
— qingu
1
Dodanie tak dużej ilości danych w nagłówku każdej strony wydaje mi się niepotrzebne - jeśli ikona nie jest duża w wersji 180x180 (moja ma zwykle od 2kb do 5kb) to wystarczy mieć <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.
— iquito
1
@iquito Zgadza się, możesz całkowicie użyć tylko jednej deklaracji. Jako założyciel RealFaviconGenerator pracuję nad tym uniwersalnym rozwiązaniem. Jest możliwy haczyk, chociaż iOS robi dobrą robotę: iOS używa algorytmu podobnego do Mitchella do zmniejszania ikon. W zależności od konkretnego projektu może to nie być to, czego chcesz. Zaktualizuję swoją odpowiedź, gdy będę mieć więcej opinii na ten temat.
— philippe_b
2
Nawiasem mówiąc, RealFaviconGenerator jest naprawdę świetny, jedyne, co pomyślałem, że mogłoby być lepsze, to wiele linków w nagłówku, które nie są bezwzględnie konieczne - zarówno podczas generowania nowych faviconów, jak i sprawdzania, jak działa strona internetowa. Być może jako dalsze ulepszenie strona internetowa mogłaby pokazać różne możliwości - które części są ściśle korzystne (i co robią / więcej wyjaśnień), a które części można pominąć i są zwykle automatycznie wykrywane przez przeglądarkę (o ile wiem iOS szuka również określonych rozmiarów w katalogu głównym, jeśli strona nie zawiera żadnych informacji apple-touch-icon).
— iquito
70

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.

— Charles Cooke
źródło
Dlaczego prekomponowany oznacza bez połysku? Nie potrafię zdefiniować wstępnie skomponowanego żartu z „bez połysku”. I nie, nie jestem sarkastyczny, naprawdę chcę wiedzieć.
— boatcoder
@ Mark0978 czytam je oznaczać: „to już opanowany, czyli«iOS stylu»(przez Ciebie), więc nie będzie bałagan iOS z nim (z wyjątkiem zaokrąglić narożniki)”
— Michael Haren
5
To jest nieaktualne od iOS 7.
— bjb568
Czy można mieć tylko jeden obraz i pozwolić Apple na automatyczną zmianę jego rozmiaru na końcu?
— Aaron Franke
12

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

— Tim Iles
źródło
3
(Właśnie zauważyłem, że jedna z pozostałych odpowiedzi pochodzi od autora realfavicongenerator.net - proszę, zagłosuj za jego odpowiedź zamiast mojej!)
— Tim Iles,
3
Wesprzyj tego programistę, ponieważ ta strona jest idealna
— whiteshooz
Tim + @whiteshooz: Dziękuję za wsparcie! (tak, właśnie zauważyłem wasze komentarze)
— philippe_b
7

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.

— Pedro Ferrari
źródło
6

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

Aby 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

cześć, czy wiesz, skąd mogę pobrać te obrazy png ikon?
— BKSpurgeon
2

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
— Tomáš Zato - Przywróć Monikę
źródło
2

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">
— Pinal
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.