Bisher habe ich die Zeile für das Apple Touch-Symbol folgendermaßen in meinen Kopf eingefügt:
<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">
In den Fragen und Antworten "Was sind die richtigen Pixelabmessungen für ein Apple-Touch-Symbol?" In der akzeptierten Antwort heißt es, dass jetzt drei Bilder gemäß den Richtlinien von Apple benötigt werden.
Wie würde man diese in den Kopfbereich des Codes einfügen?
Minimalistische Lösung - Empfohlen
Es ist üblich, ein einzelnes 180 x 180-Symbol zu erstellen, das die höchste erwartete Auflösung darstellt, und es von den iOS-Geräten nach Bedarf verkleinern zu lassen. Es wird deklariert mit:
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
Vollständige Lösung - Nicht empfohlen
Apple-Spezifikationen geben neue Größen für iOS7 an:
Außerdem sind vorkomponierte Symbole veraltet.
Um sowohl neue Geräte (mit iOS7) als auch ältere (iOS6 und frühere) zu unterstützen, lautet der generische Code daher:
<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">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Außerdem sollten Sie ein 180x180-Bild mit dem Namen apple-touch-icon.png erstellen .
Beachten Sie, dass iOS nach URLs sucht /apple-touch-icon-76x76.png, wenn es im HTML-Code keine interessanten Inhalte findet (ein bisschen wie das, was der IE damit macht /favicon.ico). Daher ist es wichtig, die Dateinamen so zu belassen, wie sie oben stehen. Es ist auch wichtig zu berücksichtigen, dass Android / Chrome diese Bilder ebenfalls verwendet .
Vielleicht möchten Sie wissen, dass dieser Favicon-Generator alle diese Bilder gleichzeitig erstellen kann. Vollständige Offenlegung: Ich bin der Autor dieser Website.
<link>Tag heruntergeladen, wenn sie sich nicht im Cache des Clients befinden? Unabhängig davon, wo die Seite angefordert wird (Telefon, Tablet, PC, Windows, Android ...)? Ich bin ein bisschen besorgt über die Auswirkungen auf die Leistung ...<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />es aus, nur zu haben . Und selbst wenn Sie Bilder unterschiedlicher Größe erstellen, können Sie, soweit ich das beurteilen kann, einfach alle Apple-Touch-Icon-Links entfernen, und iOS sucht nach den Dateien selbst, beginnend mit der bevorzugten Größe (wie Apple-Touch-Icon-180x180). png) und verwenden Sie apple-touch-icon.png, wenn keine anderen Dateien gefunden werden.apple-touch-icon).Ich hoffe, das hilft.
Wenn Sie möchten, dass Apple das Ästhetische für Sie erledigt (fügen Sie den Glanz hinzu), fügen Sie diese in die
<head>Tags ein:<link rel="apple-touch-icon" href="apple-touch-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" /> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />Wenn Sie das Bild vorab zusammenstellen möchten , damit Apple es ohne Glanz anzeigt, gehen Sie folgendermaßen vor:
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />Wenn Sie mehr als ein Bild angeben, sucht das iOS-Gerät nach der richtigen Größe und verwendet dieses Bild automatisch. Wie Sie den Namen der Bilder im Beispiel entnehmen können, benötigt das iPad mit Retina-Display ein Symbol von 144 x 144 Pixel, das iPhone 4 / 4S / 5 ein Symbol von 114 x 114 Pixel, das ursprüngliche iPad (und das iPad 2) Bildschirmauflösung ist nicht anders) benötigt ein Symbol von 72x72px, und das ursprüngliche iPhone benötigt keine Größenangabe, aber als Referenz ist es 57x57px.
quelle
Da einige dieser Antworten bereits veraltet sind, empfehle ich, http://realfavicongenerator.net/ zu verwenden, um alle Bilder und Markups zu generieren. Ich spende jedes Mal ein paar Euro, wenn ich sie verwende, in der Hoffnung, dass sie sie behalten können Ich bin auf dem neuesten Stand, was derzeit unter iOS, Android und Windows gültig ist, also muss ich nicht.
quelle
Ab 2018 empfiehlt die Apple Developers Website Folgendes für iOS-Geräte:
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"> <link rel="apple-touch-startup-image" href="/launch.png"> <meta name="apple-mobile-web-app-title" content="AppTitle">Der App-Titel ersetzt Ihren Website-Titel. Normalerweise möchten Sie das. Das Startbild wird angezeigt, während die App gestartet wird.
quelle
Angeben eines Webseiten-Symbols für den Webclip
Möglicherweise möchten Sie, dass Benutzer Ihre Webanwendung oder Ihren Webseitenlink zum Startbildschirm hinzufügen können. Diese durch ein Symbol dargestellten Links werden als Webclips bezeichnet. Befolgen Sie diese einfachen Schritte, um ein Symbol für Ihre Webanwendung oder Webseite unter iOS anzugeben.
Um ein Symbol für die gesamte Website (jede Seite der Website) anzugeben, platzieren Sie eine Symboldatei im PNG-Format im Stammdokumentordner mit dem Namen apple-touch-icon.png
Um ein Symbol für eine einzelne Webseite anzugeben oder das Website-Symbol durch ein Webseiten-spezifisches Symbol zu ersetzen, fügen Sie der Webseite ein Linkelement hinzu, wie in:
<link rel="apple-touch-icon" href="/custom_icon.png">Ersetzen Sie im obigen Beispiel custom_icon.png durch Ihren Symboldateinamen. Um mehrere Symbole für unterschiedliche Geräteauflösungen anzugeben, z. B. iPhone- und iPad-Geräte zu unterstützen, fügen Sie jedem Linkelement ein Größenattribut wie folgt hinzu:
<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">Das Symbol mit der für das Gerät am besten geeigneten Größe wird verwendet. Wenn kein Größenattribut festgelegt ist, beträgt die Standardgröße des Elements standardmäßig 60 x 60. Wenn kein Symbol vorhanden ist, das der empfohlenen Größe für das Gerät entspricht, wird das kleinste Symbol verwendet, das größer als die empfohlene Größe ist. Wenn keine Symbole größer als die empfohlene Größe sind, wird das größte Symbol verwendet.
Wenn mit einem Linkelement keine Symbole angegeben werden, wird das Stammverzeichnis der Website nach Symbolen mit dem Präfix apple-touch-icon ... durchsucht. Wenn die entsprechende Symbolgröße für das Gerät beispielsweise 60 x 60 beträgt, sucht das System in der folgenden Reihenfolge nach Dateinamen:
apple-touch-icon-76x76.png apple-touch-icon.pngInformationen zu Metriken für Webseiten-Symbole finden Sie unter Symbol- und Bildgrößen.
Hinweis : Safari unter iOS 7 fügt Symbolen keine Effekte hinzu. Ältere Versionen von Safari fügen keine Effekte für Symboldateien hinzu, die mit dem Suffix -precomposed.png benannt sind. Weitere Informationen finden Sie unter Erste Schritte: Identifizieren Ihrer App in iTunes Connect.
Quelle: Apple Touch-Symbolspezifikationen
quelle
Ich muss zugeben, dass ich noch nie Apple-Spezifikationen gelesen habe, aber laut Protokollen auf meiner Website sind diese Bilder im Stammverzeichnis erforderlich:
apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-120x120.png apple-touch-icon-152x152.png apple-touch-icon-72x72-precomposed.png apple-touch-icon-76x76-precomposed.png apple-touch-icon-120x120-precomposed.png apple-touch-icon-152x152-precomposed.pngquelle
Von meiner Pull-Anfrage zu https://github.com/h5bp/mobile-boilerplate (mit iPhone 6-Symbolen):
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 --> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png"> <!-- iPad 3+ (with @2× display) iOS ≥ 7 --> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png"> <!-- iPad (with @2× display) iOS ≤ 6 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png"> <!-- iPhone (with @2× and @3 display) iOS ≥ 7 --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png"> <!-- iPhone (with @2× display) iOS ≤ 6 --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png"> <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 --> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png"> <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png"> <!-- Android Stock Browser and non-Retina iPhone and iPod Touch --> <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png"> <!-- Fallback for everything else --> <link rel="shortcut icon" href="img/touch/apple-touch-icon.png"> <!-- Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions). If it’s not defined on that size it will take 128×128. --> <link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png"> <link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png"> <!-- Tile icon for Win8 (144x144 + tile color) --> <meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png"> <meta name="msapplication-TileColor" content="#222222">quelle
Mit omg-img können Sie alle Größen und Farben für beliebte Symbole generieren . Zum Beispiel:
<link rel="apple-touch-icon" sizes="152x152" href="https://img.icons8.com/color/152x152/anonymous-mask.png">Dieses Tag gibt das nächste Bild für iOS-Geräte zurück:
quelle