<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS --><linkrel="apple-touch-icon"sizes="57x57"href="touch-icon-iphone.png"><!-- iPad and iPad mini @1x --><linkrel="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 --><linkrel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"><!-- iPad and iPad mini @2x --><linkrel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"><!-- iPad Pro --><linkrel="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 --><linkrel="apple-touch-icon"sizes="180x180"href="touch-icon-iphone-6-plus.png"><!-- Android Devices High Resolution --><linkrel="icon"sizes="192x192"href="icon-hd.png"><!-- Android Devices Normal Resolution --><linkrel="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 --><linkrel="icon"sizes="192x192"href="icon-hd.png"><!-- Android Devices High Resolution --><linkrel="icon"sizes="128x128"href="icon.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.
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/ ...
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.
@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 --><linkrel="apple-touch-icon"sizes="57x57"href="touch-icon-iphone-114.png"/><!-- Retina iPhone --><linkrel="apple-touch-icon"sizes="114x114"href="touch-icon-iphone-114.png"/><!-- Standard iPad --><linkrel="apple-touch-icon"sizes="72x72"href="touch-icon-ipad-144.png"/><!-- Retina iPad --><linkrel="apple-touch-icon"sizes="144x144"href="touch-icon-ipad-144.png"/>
@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.
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:
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.
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:
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, ...)
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<=default2)76x763)120x1204)152x152
Teraz lepiej jest dodać je jako linki w kodzie HTML jako:
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
-use24-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.
Odpowiedzi:
Zaktualizowana lista grudzień 2019, iOS13 Jedna ikona dla iOS 180x180 px i jedna dla Androida 192x192 px (zadeklarowana w site.webmanifest).
Lista wycofana z października 2017 r., IOS11
Lista dla iPhone'a i iPada z siatkówką i bez
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
Aktualizacja 2015 iOS 9: dla iOS 9 i iPad pro
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
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:
Inne rozdzielczości są nadal takie same
Źródło: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
źródło
<link rel="apple-touch-icon" href="icon.png">
github.com/h5bp/html5-boilerplate/blob/master/dist/ ...Użyj tych rozmiarów 57x57, 72x72, 114x114, 144x144, a następnie zrób to w nagłówku dokumentu:
Będzie to dobrze wyglądać na wszystkich urządzeniach Apple. ;)
źródło
sizes
atrybutu, 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.apple-touch-icon-precomposed.png
, a także pozwoleniu innym iDevices na zmianę rozmiaru w razie potrzeby.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.
źródło
apple-touch-icon-precomposed.png
, a także pozwoleniu innym iDevices na zmianę rozmiaru w razie potrzeby.Ikona na stronie Apple ma 152x152 piksele.
http://www.apple.com/apple-touch-icon.png
Mam nadzieję, że to odpowiada na twoje pytanie.
źródło
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:
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:
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.
źródło
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:
źródło
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:
źródło
Tak. Jeśli rozmiar się nie zgadza, system przeskaluje go . Ale lepiej jest zrobić 2 wersje ikon.
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
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).
źródło
Tak, obsługiwane są formaty większe niż 60x60. Dla uproszczenia utwórz ikony w tych 4 rozmiarach:
Teraz lepiej jest dodać je jako linki w kodzie HTML jako:
Możesz nie zadeklarować 4 powyższych linków, ale zadeklaruj tylko jeden link, w takim przypadku podaj najwyższy rozmiar,
152x152
a nawet większy, powiedzmy196x196
. Zawsze zmniejszy rozmiar w celu ponownego użycia. Upewnij się, że wspomniałeś osize
.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ł plikudefault file:
apple-touch-icon.png
. Zalecane jest zdefiniowanie łączy, ponieważ zminimalizuje to przeglądarkę wysyłającą zapytania do serwera.Niezbędne ikony:
W wersjach starszych niż iOS 7, jeśli nie chcesz, aby dodawał efekty do twoich ikon, po prostu dodaj przyrostek
-precomposed.png
do nazwy pliku. (iOS 7 nie dodaje efektów nawet bez niego).źródło
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.
źródło
W przypadku iPhone'a i iPoda touch utwórz ikony, które będą mierzyć:
W przypadku iPada utwórz ikonę określającą:
źródło