Jaki powinien być rozmiar apple-touch-icon.png dla iPada i iPhone'a?

Czy obsługiwane są ikony dotykowe Apple większe niż 60x60, a jeśli tak, jakich wymiarów należy użyć w przypadku iPada i iPhone'a?

Zaktualizowana lista grudzień 2019, iOS13 Jedna ikona dla iOS 180x180 px i jedna dla Androida 192x192 px (zadeklarowana w site.webmanifest).

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

#### site.webmanifest
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "display": "standalone"
}

Lista wycofana z października 2017 r., IOS11

Lista dla iPhone'a i iPada z siatkówką i bez

<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

Aktualizacja październik 2017 iOS 11: sprawdzono iOS 11, wprowadzono iPhone X i iPhone 8

Aktualizacja listopad 2016 iOS 10: Wprowadzono nową wersję iOS iPhone 7 i iPhone 7plus, mają tę samą rozdzielczość wyświetlania, dpi itp. Co iPhone 6s i iPhone 7plus, do tej pory nie znaleziono żadnych zmian w odniesieniu do aktualizacji 2015

Zaktualizuj Androida z połowy 2016 r .: Dodaj urządzenia z Androidem do listy, ponieważ linki Apple-touch są oznaczone jako przestarzałe przez Google i nie będą nigdy obsługiwane na ich urządzeniach

<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

Aktualizacja 2015 iOS 9: dla iOS 9 i iPad pro

<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">

Nowe iPhone'y (6s i 6s Plus) mają takie same rozmiary jak iPhone (6 i 6 Plus), nowy iPad pro wykorzystuje obraz o rozmiarze 167x167 pikseli, pozostałe rozdzielczości są nadal takie same.

Aktualizacja 2014 iOS 8:

Na iOS 8 i iPhone 6 plus

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

Iphone 6 używa tego samego obrazu 120 x 120 px, co iPhone 4 i 5, reszta jest taka sama jak w iOS 7

Aktualizacja 2013 iOS7:

W przypadku iOS 7 zalecane rozdzielczości uległy zmianie:

• dla iPhone Retina od 114 x 114 px do 120 x 120 px
• dla iPada Retina od 144 x 144 px do 152 x 152 px

Inne rozdzielczości są nadal takie same

• Domyślnie 57 x 57 pikseli
• 76 x 76 pikseli dla iPadów bez siatkówki

Źródło: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Użyj tych rozmiarów 57x57, 72x72, 114x114, 144x144, a następnie zrób to w nagłówku dokumentu:

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

Będzie to dobrze wyglądać na wszystkich urządzeniach Apple. ;)

W przypadku iPada (3. generacji) dostępne są teraz cztery rozmiary ikon: 57x57, 72x72, 114x114, 144x144.

Ponieważ ikony siatkówki są dokładnie dwa razy większe od standardowych ikon, tak naprawdę potrzebujemy tylko 2 ikon : 114 x 114 i 144 x 144. Ustawiając ikonę rozmiaru siatkówki na odpowiednią ikonę standardową, iOS odpowiednio je skaluje.

<!-- Standard iPhone --> 
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone --> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad --> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad --> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

Ikona na stronie Apple ma 152x152 piksele.
http://www.apple.com/apple-touch-icon.png

Mam nadzieję, że to odpowiada na twoje pytanie.

TL; DR: użyj jednej ikony PNG o wymiarach 180 x 180 pikseli @ 150 ppi, a następnie połącz ją w następujący sposób:

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

Szczegóły dotyczące podejścia

Począwszy od 2020-04, kanoniczna odpowiedź firmy Apple znajduje odzwierciedlenie w ich dokumentacji dotyczącej systemu iOS .

Oficjalnie specyfikacja mówi:

• iPhone 180 pikseli × 180 pikseli (60 pikseli × 60 pikseli przy 3x)
• iPhone 120 pikseli × 120 pikseli (60 punktów × 60 pikseli przy 2x)
• iPad Pro 167 pikseli × 167 pikseli (83,5 pkt. × 83,5 pkt. przy 2x)
• iPad, iPad mini 152px × 152px (76pkt × 76px @ 2x)

W rzeczywistości te różnice w wielkości są niewielkie, więc oszczędność wydajności będzie miała znaczenie tylko w witrynach o bardzo dużym ruchu.

W przypadku witryn o mniejszym natężeniu ruchu zazwyczaj używam jednej ikony PNG o wymiarach 180 x 180 pikseli przy 150 ppi i uzyskuję bardzo dobre wyniki na wszystkich urządzeniach, nawet tych w rozmiarze plus.

I zostały tworzeniu i projektowaniu iOS na chwilę i to jest najlepszy projekt iOS arkusz oszukiwać tam!

baw się dobrze :)!

Aktualizacja: w przypadku iOS 8+ i nowych urządzeń (iPhone 6, 6 Plus, iPad Air) zobacz ten zaktualizowany link .

Aktualizacja meta: Iphone 6s / 6s Plus mają te same rozdzielczości, co odpowiednio iPhone 6/6 Plus

To jest zdjęcie z nowej wersji artykułu:

Odpowiednia dokumentacja w witrynie Apple, określanie ikony strony internetowej dla klipu internetowego .

Nie ma potrzeby umieszczania czegokolwiek w nagłówku dokumentu. 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 lub apple-touch-icon-prekomponowanym .

Na przykład, jeśli odpowiedni rozmiar ikony dla urządzenia to 57 x 57, system wyszukuje nazwy plików w następującej kolejności:

• apple-touch-icon-57x57-precomposed.png
• apple-touch-icon-57x57.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

Tak. Jeśli rozmiar się nie zgadza, system przeskaluje go . Ale lepiej jest zrobić 2 wersje ikon.

• iPad - 72x72.
• iPhone (≥4) - 114x114.
• iPhone ≤3GS - 57x57 - jeśli to możliwe.

Możesz rozróżnić iPada i iPhone'a według agenta użytkownika na serwerze. Jeśli nie chcesz pisać skryptu na serwerze, możesz również zmienić ikonę za pomocą Javascript przez

<link ref="apple-touch-icon" href="iPhone_version.png" />
...

if (... iPad test ...) {
  $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}

Działa to, ponieważ ikona jest odpytywana tylko po dodaniu klipu internetowego.

(Nie ma jeszcze publicznego sposobu na odróżnienie iPhone'a ≥4 od iPhone'a ≤3GS w Javascript).

Tak, obsługiwane są formaty większe niż 60x60. Dla uproszczenia utwórz ikony w tych 4 rozmiarach:

1) 60x60  <= default
2) 76x76
3) 120x120
4) 152x152

Teraz lepiej jest dodać je jako linki w kodzie HTML jako:

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

Możesz nie zadeklarować 4 powyższych linków, ale zadeklaruj tylko jeden link, w takim przypadku podaj najwyższy rozmiar, 152x152a nawet większy, powiedzmy 196x196. Zawsze zmniejszy rozmiar w celu ponownego użycia. Upewnij się, że wspomniałeś o size.

Możesz także nie zadeklarować ani jednego linku. Apple wspomina, że ​​w tym scenariuszu najpierw wyszuka katalog główny serwera pod kątem rozmiaru bezpośrednio wyższego niż żądany (format nazewnictwa:) apple-touch-icon-<size>.png, a jeśli nie zostanie znaleziony, będzie następnie szukał pliku default file: apple-touch-icon.png. Zalecane jest zdefiniowanie łączy, ponieważ zminimalizuje to przeglądarkę wysyłającą zapytania do serwera.

Niezbędne ikony:

- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors

W wersjach starszych niż iOS 7, jeśli nie chcesz, aby dodawał efekty do twoich ikon, po prostu dodaj przyrostek -precomposed.pngdo nazwy pliku. (iOS 7 nie dodaje efektów nawet bez niego).

Myślę, że to pytanie dotyczy ikon internetowych. Próbowałem podać ikonę o rozmiarze 512x512, a na symulatorze iPhone'a 4 wygląda świetnie (w podglądzie), jednak po dodaniu do ekranu głównego jest źle pikselizowana.

Z drugiej strony, jeśli używasz większej ikony na iPadzie (nadal z moim testem 512x512), wydaje się, że wychodzi ona w lepszej jakości na iPadzie. Mam nadzieję, że renderowanie iPhone'a 4 jest błędem.

Otworzyłem błąd dotyczący tego na radarze.

EDYTOWAĆ:

Obecnie używam ikony 114x114 w nadziei, że będzie dobrze wyglądać na iPhonie 4, gdy zostanie wydany. Jeśli iPhone 4 nadal ma błąd, gdy się pojawi, mam zamiar zoptymalizować ikonę dla iPada (ostry i bez zmiany rozmiaru przy 72x72), a następnie pozwolę jej skalować w dół dla starych iPhone'ów.

W przypadku iPhone'a i iPoda touch utwórz ikony, które będą mierzyć:

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

W przypadku iPada utwórz ikonę określającą:

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)