Ich bin mir nicht sicher, wie groß die richtige Größe sein soll.
Viele Websites scheinen zu wiederholen, dass das Apple-Touch-Symbol 57 x 57 Pixel groß sein sollte, geben jedoch einen defekten Link als Quelle an.
Die Kommentare von Hanselman und Playgroundblues deuten auf unterschiedliche Größen hin, darunter 163x163 und 60x60.
Apples eigenes apple.com-Symbol ist 129x129!
Siehe meine verwandte Frage: Wie gebe ich meinen Websites ein Symbol für das iPhone?
Antworten:
Es scheint, dass die Apple-Richtlinien ab dem 3. August 2010 die "hochauflösenden" Bilder (für iPhone 4) in ihren "erforderlichen" Symbolgrößen enthalten.
Sieht so aus, als müssten wir jetzt sowohl ein 57x57- als auch ein 114x114-Bild sowie ein 640x960-Titelbild bereitstellen.
Siehe Richtlinien für die Erstellung benutzerdefinierter Symbole und Bilder (Javascript erforderlich), die Teil eines gesamten Dokuments sind:
<!-- STARTUP IMAGES -->Abschnitt)
Aus dem Google-Cache von Apple Developer Connection - Web Apps Dev Center - Entwerfen von Inhalten ...
Erstellen Sie ein Webclip-Lesezeichensymbol
Mit iPhone und iPod touch kann ein Benutzer ein Webclip-Lesezeichen auf seiner Website auf seinem Startbildschirm speichern.
Um ein Lesezeichensymbol für alle Seiten einer Website anzugeben, platzieren Sie ein PNG-Bild mit dem Namen "apple-touch-icon.png" im Stammverzeichnis Ihres Webservers - ähnlich wie bei "favicon.ico" für Websitesymbole.
Um das Lesezeichen-Symbol der Website auf einer bestimmten Webseite zu überschreiben, fügen Sie ein <link> -Element ähnlich dem <link rel = "apple-touch-icon" href = "/ customIcon.png" /> in das <head> -Element der Seite ein .
Die Abmessungen der Lesezeichensymbole sollten 57 x 57 Pixel betragen. Wenn das Symbol eine andere Größe hat, wird es skaliert und passend zugeschnitten.
Safari setzt das Symbol automatisch mit dem Standard-Overlay "Glas" zusammen, sodass es wie eine integrierte iPhone- oder iPod-Anwendung aussieht.
Ich kann keine Quelle für diese Größen angeben, da die offizielle Referenz unter Verschluss von ADC steht.
Viele der Nicht-NDA-Sites enthalten jedoch Tutorials zum Erstellen der Symbole. Zum Beispiel hier:
Als Teil des Safari Web Content Guide verfügt Apple über eine öffentlich zugängliche Seite mit dem Namen " Angeben eines Webseiten-Symbols für Webclips " (Javascript erforderlich), die alle Auflösungen und deren Implementierung abdeckt.
Die offizielle Größe ist 57x57. Ich würde empfehlen, die exakte Größe zu verwenden, nur weil beim Laden weniger Speicher benötigt wird (es sei denn, Apple speichert die skalierte Darstellung zwischen). Trotzdem hat Rex Recht, dass jede quadratische Größe funktioniert
Apple-Spezifikationen geben neue Größen für iOS7 an:
Während alte Größen für iOS6 und früher sind:
Übrigens sind vorkompositionierte Symbole veraltet.
Folglich müssen diese 8 Bilder vorhanden sein, um neue Geräte (mit iOS7) und ältere (iOS6 und frühere) zu unterstützen, und der generische Code lautet:
<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">
Außerdem sollten Sie ein 152x152-Bild mit dem Namen erstellenapple-touch-icon.png .
Vielleicht möchten Sie wissen, dass dieser Favicon-Generator alle diese Bilder gleichzeitig erzeugen kann. Vollständige Offenlegung: Ich bin der Autor dieser Website.
Ich glaube nicht, dass es eine "richtige Größe" gibt. Da auf dem iPhone wirklich OSX ausgeführt wird, ist das Symbol-Rendering-System ziemlich robust. Solange Sie ein qualitativ hochwertiges Bild mit dem richtigen Seitenverhältnis und einer Auflösung liefern, die mindestens so hoch ist wie die tatsächliche Ausgabe, wird das Betriebssystem sehr sauber verkleinert. Meine Website verwendet eine Größe von 158 x 158 und das Symbol sieht auf dem iPhone-Bildschirm pixelgenau aus.
Der Link von NilObject führte mich zu dem großartigen Blog-Beitrag Catchup on your Icon auf makentosh.com
... Natürlich musste all diese Inkonsistenz irgendwann behoben werden, oder? Nun, 2.0 hat sich gut damit befasst! Schließlich bedeutete 57x57 tatsächlich 57x57.
... jedes Pixel ... perfekt gerendert.
Sie müssen sich nicht mehr um die richtige Größe kümmern. Wenn Sie eine iTunes-Grafikdatei (dh eine Datei mit einer Größe von 1024 * 1024) Ihres Symbols haben, habe ich diese Anwendung erstellt, die Ihnen alle Symbole basierend auf den hier bereitgestellten Informationen zur Verfügung stellt . Laden Sie die Anwendung von hier herunter und befolgen Sie die Anweisungen in der Readme-Datei, um alle erforderlichen Symbole für die iOS-Anwendung zu erstellen.
Aktualisierte Liste Oktober 2014, iOS8
Liste für iPhone und iPad mit und ohne Netzhaut
<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">
Update 2014 iOS 8:
Für iOS 8 und Iphone 6 plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
Das iPhone 6 verwendet dasselbe 120 x 120 Pixel große Bild wie das iPhone 4 und 5, der Rest ist das gleiche wie für iOS 7
Update 2013 iOS7:
Für iOS 7 wurden die empfohlenen Auflösungen geändert:
Die andere Auflösung ist immer noch die gleiche