Jakie są prawidłowe wymiary w pikselach dla ikony apple touch?

Nie jestem pewien, jaki powinien być prawidłowy rozmiar.

Wiele witryn powtarza, że ikona apple-touch powinna mieć rozmiar 57x57 pikseli, ale jako źródło podaje uszkodzony link.

Komentarze Hanselman i playgroundblues sugerują różne rozmiary, w tym 163x163 i 60x60.

Własne Apple apple.com icon to 129x129!

Zobacz moje podobne pytanie: Jak dać moim stronom internetowym ikonę dla iPhone ' a?

Author: Community, 2008-08-05

11 answers

Wydaje się, że wytyczne Apple od 3 sierpnia 2010 zawierają teraz obrazy" wysokiej rozdzielczości "(dla iPhone 'a 4) w" wymaganych " rozmiarach ikon.

Wygląda na to, że musimy teraz dostarczyć obraz 57x57 i 114x114, a także obraz tytułowy 640x960.

Zobacz Custom icon and Image Creation Guidelines (wymagany Javascript), który jest częścią całego dokumentu:

 40
Author: OtomoBill,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-02 08:47:00

Z Google cache Apple Developer Connection-Web Apps Dev Center-projektowanie Treści ...

Tworzenie ikony zakładki klipów internetowych

IPhone i iPod touch pozwalają użytkownikowi na zapisz zakładkę Web Clip na swojej stronie na ekranie głównym.

Aby określić ikonę zakładki dla wszystkich strony strony www, umieść obraz PNG o nazwie " apple-touch-icon.png " na katalog główny twojego serwera www - podobne do " favicon.ico " dla witryna ikony.

Aby nadpisać ikonę zakładki Witryny na konkretnej strony internetowej, Wstaw element podobny do w obrębie element strony.

Wymiary ikon zakładek powinny wynosić 57x57 pikseli. Jeśli ikona jest inny rozmiar będzie skalowany i przycięte do dopasowania.

Safari automatycznie złoży ikona ze standardowym " szklistym" nakładka, dzięki czemu wygląda jak wbudowany aplikacja iPhone lub iPod.

 5
Author: Zack Peterson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-15 19:46:33

Zależy od tego, ile szczegółów chcesz, aby miał, musi mieć proporcje 1: 1 (zasadniczo - musi być kwadratowy)

Ja bym wybrał własne 129 * 129

 3
Author: saniul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-04 21:36:58

Nie mogę przytoczyć źródła dla tych rozmiarów, ponieważ oficjalne odniesienie jest pod kluczem ADC.

Jednak wiele witryn spoza NDA ma samouczki na temat tworzenia ikon. Na przykład tutaj:

 2
Author: NilObject,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-02 07:50:15

[[0]}jako część Podręcznika Safari Web Content Guide, Apple ma publicznie dostępną stronę o nazwie " określającą ikonę strony internetowej dla Web Clip" (wymagany Javascript), która obejmuje wszystkie rozdzielczości i ich implementację.

 2
Author: Craig,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-02 07:54:06

Oficjalny rozmiar to 57x57. Polecam użycie dokładnego rozmiaru po prostu ze względu na fakt, że zajmuje mniej pamięci po załadowaniu (chyba że Apple buforuje skalowaną reprezentację). Mając to na uwadze, Rex ma rację że każdy rozmiar kwadratu będzie działał

 1
Author: NilObject,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:36

Specyfikacja Apple określa nowe rozmiary dla iOS7:

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

Natomiast stare rozmiary dla iOS6 i prior to:

  • 57x57
  • 72x72
  • 114x114
  • 144x144

Nawiasem mówiąc, prekomponowane ikony są przestarzałe.

W konsekwencji, aby obsługiwać nowe urządzenia (z systemem iOS7) i starsze (iOS6 i wcześniejsze), te 8 obrazów musi być obecne i Kod ogólny jest:

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

Dodatkowo, należy utworzyć zdjęcie 152x152 o nazwie apple-touch-icon.png.

Możesz chcieć wiedzieć, że ten generator faviconów może wygenerować wszystkie te zdjęcia na raz. Pełna wersja: jestem autorem tej strony.

 1
Author: philippe_b,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-15 22:04:48

Myślę, że nie ma "poprawnego rozmiaru". Ponieważ iPhone naprawdę działa z systemem OSX, system renderowania ikon jest dość solidny. Tak długo, jak dasz mu wysokiej jakości obraz z odpowiednim współczynnikiem proporcji i rozdzielczością co najmniej tak wysoką, jak rzeczywisty wynik będzie, system operacyjny będzie w dół bardzo czysto. Moja strona używa 158x158, a ikona wygląda idealnie w pikselach na ekranie iPhone ' a.

 0
Author: Rex M,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-04 21:22:50

Link NilObject doprowadził mnie do wielkiego posta na blogu Catchup na Icon w makentosh.com

... Oczywiście cała ta niekonsekwencja w końcu trzeba było sobie z tym poradzić., prawda? Dobrze 2.0 poradził sobie z tym w porządku Moda! W końcu 57x57 faktycznie oznaczało 57x57

...każdy piksel ... rendered doskonale.

 0
Author: Zack Peterson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-06 23:36:35

Nie musisz już martwić się o poprawny rozmiar. Jeśli posiadasz plik graficzny itune (tj. plik o rozmiarze 1024*1024) swojej ikony, to stworzyłem tę aplikację, która dostarczy Ci wszystkie ikony na podstawie informacji podanych tutaj . Pobierz aplikację stąd i postępuj zgodnie z instrukcjami w pliku readme, aby utworzyć wszystkie wymagane ikony dla aplikacji iOS.

 0
Author: rptwsthi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-20 20:43:21

Zaktualizowana lista Październik 2014, iOS8

Lista dla iPhone ' a i iPada z i bez siatkówki

<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">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

Aktualizacja iOS 2014 8:

Dla 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 zostały zmienione:
  • Dla iPhone Retina od 114 x 114 px do 120 x 120 px
  • Dla ipada Siatkówka od 144 x 144 px do 152 x 152 px

Inne rozdzielczości są wciąż takie same

  • 57 x 57 px
  • 76 x 76 px dla ipadów bez siatkówki
 0
Author: felipep,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-21 12:40:52