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

134

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?

Złupić
źródło
Aby uzyskać najlepszą odpowiedź, zajrzyj na stronę Apple: Apple Developer
Ruub
1
Znalazłem to narzędzie do tworzenia ikon ze wszystkimi obsługiwanymi rozmiarami i znacznikami do umieszczenia na Twojej stronie. iconifier.net
agarcian

Odpowiedzi:

145

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/

felipep
źródło
30
Chciałbym, żeby po prostu wsparli SVG i skończyli z tym gównem. Dziękuję jednak za odpowiedź!
Steven Vachon
2
uwielbiam aktualizacje ... sprawia, że ​​ta odpowiedź jest bardzo trafna!
Chris Allinson
1
Warto zauważyć, że popularne i przetestowane w boju repozytorium HTML5 Boilerplate zaleca używanie tylko jednej ikony catch-all <link rel="apple-touch-icon" href="icon.png"> github.com/h5bp/html5-boilerplate/blob/master/dist/ ...
jackocnr
Również nowoczesne podejście do obsługi urządzeń z Androidem polega na użyciu pliku manifestu i określeniu w nim swoich ikon (y): developers.google.com/web/fundamentals/app-install-banners - takie podejście jest również używane przez Boilerplate HTML5 repo: github.com/h5bp/html5-boilerplate/blob/master/dist/…
jackocnr
Przetestowałem to. Na iPhonie Xs ikony wydają się być rozmyte obok ikony Github. : /
kaiserkiwi
117

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. ;)

Darren
źródło
8
Dokumentacja pomocnicza firmy Apple: developer.apple.com/library/safari/#documentation/…
Jim Geurts
6
Jednak atrybut rozmiarów nie jest prawidłowym kodem HTML!
8
Starsze urządzenia z systemem iOS nie rozumieją sizesatrybutu, więc użyj ostatniej wartości. Dlatego <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />powinien być ostatni. Ponadto, jak mówi pezillionaire, możesz teraz dodać nową ikonę o rozdzielczości 144x144 dla iPada Retina.
appmattus
5
Od ios7 zalecane rozmiary uległy zmianie: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (siatkówka)
Cody Django
4
@Cody i podejście, które obecnie przyjmuje HTML5Boilerplate, polega na użyciu tylko ikony 152x152 i wywołaniu jej apple-touch-icon-precomposed.png, a także pozwoleniu innym iDevices na zmianę rozmiaru w razie potrzeby.
Blazemonger
94

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" />
pezillionaire
źródło
Najbardziej podoba mi się ta metoda.
Caleb Jares
Ta metoda ma w sobie piękną prostotę.
PaulSkinner,
1
Robimy więc tylko 2 obrazy i pozwalamy urządzeniu na dwukrotne skalowanie w dół. Uroczy.
superluminium
9
Od ios7 zalecane rozmiary uległy zmianie: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (siatkówka)
Cody Django
4
@Cody i podejście, które obecnie przyjmuje HTML5Boilerplate, polega na użyciu tylko ikony 152x152 i wywołaniu jej apple-touch-icon-precomposed.png, a także pozwoleniu innym iDevices na zmianę rozmiaru w razie potrzeby.
Blazemonger
34

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

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

abe
źródło
1
To. Lub 144x144 (oczekiwana rozdzielczość iPada Retina). Wszystkie wyglądają dobrze, pomniejszone do mniejszych rozmiarów iPhone'a / iPada, jednocześnie planując nieco z wyprzedzeniem na przyszłość.
DOOManiac
6
Od października 2013, teraz jest 152x152 i wydaje się, że nie zmienia się dla różnych urządzeń (w każdym razie nie między moim laptopem a iPhone'em4)
Wick
17

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.

serraosays
źródło
16

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

baw się dobrze :)!

ta grafika pochodzi z tego artykułu :)

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:

Informacje o urządzeniach z iOS 8 i połową 2014 r

MrHaze
źródło
6

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
Jan M
źródło
Tak, ale to pytanie dotyczy nowych (większych) ikon dla iPhone'a 4 i iPada.
cherouvim
Chociaż nie jest konieczne określanie niczego w nagłówku, nadal jest to dobra praktyka. Jeśli np. Przegapisz wersję 144x144 dla iPada Retina i nie ma ikony bez wymiaru pikselowego, Mobile Safari powróci do wyświetlania tylko podglądu witryny, chociaż przydałoby się nieoptymalna, ale wciąż lepsza, mniejsza wersja.
Rafael Bugajewski
To bardzo zły pomysł, aby nie określać w nagłówku, ponieważ inne platformy również będą ich używać (Android, ChromeOS, Blackberry, ...)
Remi Grumeau
5

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

kennytm
źródło
1
Rozdzielczość iPhone'a 4 jest najwyraźniej dwukrotnie większa niż iPhone'a 3, więc 114x114 prawdopodobnie byłby dobrym wyborem dla rozmiaru ikony.
JAB
@JAB: Do ikony dodano obramowania, więc rzeczywisty rozmiar ikony na iPhonie ≤3GS to 59x60. Jeśli tak jest w przypadku 114x114, może być trochę nie tak.
kennytm
Czy obramowania na iPhonie 4+ nie są skalowane o tę samą wielkość pod względem rozdzielczości (aby pod względem rozmiaru wyglądały na tę samą szerokość)?
JAB
@JAB: Powinno. Nie sprawdziłem.
kennytm
Dzięki za wszystkie pomysły / rady. Jeśli stworzę 3 wersje, jak ustawić kierowanie na każde urządzenie o odpowiednim rozmiarze? Chyba że czegoś mi brakuje, a PNG to format kontenera, w którym mogę umieścić różne rozmiary?
Harry
2

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

Ethan
źródło
1

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.

Chris Drackett
źródło
0

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)
Prashant Aggarwal
źródło