wake-up-neo.net

Apple Touch-Symbol für Websites

Bisher habe ich die Zeile für das Apple Touch-Symbol wie folgt in meinen Kopf eingefügt:

<link rel="Apple-touch-icon" href="/Apple-touch-icon.png">

In die Fragen und Antworten "Wie lauten die korrekten Pixelabmessungen für ein Apple-Touch-Symbol?" In der akzeptierten Antwort heißt es, dass nach den Richtlinien von Apple jetzt drei Bilder benötigt werden.

Wie würde man also vorgehen, diese in den Kopfteil des Codes einzufügen?

65
J82

Los gehts, hoffe das hilft.

Wenn Sie möchten, dass Apple das ästhetische Bit für Sie ausführt (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 Vorkomposition erstellen möchten, damit Apple es ohne Glanz anzeigt, müssen Sie Folgendes tun:

<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 mehrere verwenden, sucht das iOS-Gerät nach der richtigen Größe und verwendet dieses Bild automatisch. Wie Sie anhand der Namen der Bilder im Beispiel sehen können, benötigt das iPad mit Retina-Display ein Symbol, das 144x144px ist. Das iPhone 4/4S/5 benötigt ein Symbol, das 114x114px ist, das ursprüngliche iPad (und iPad 2) Bildschirmauflösung ist nicht anders) benötigt ein Symbol, das 72x72px ist, und das ursprüngliche iPhone benötigt keine Größenangabe, aber für Ihre Referenz ist es 57x57px.

64
Charles Cooke

Apple-Spezifikationen Neue Größen für iOS7 angeben:

  • 60 x 60
  • 76 x 76
  • 120 x 120
  • 152x152

Und auch für iOS8

  • 180 x 180

Darüber hinaus werden vorzusammengesetzte Symbole nicht mehr unterstützt.

Um jedoch neue Geräte (mit iOS7) und älteren Geräten (iOS6 und älter) zu unterstützen, lautet der generische Code:

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

Sie sollten außerdem ein 180x180-Bild mit dem Namen Apple-touch-icon.png erstellen.

Beachten Sie, dass iOS nach URL wie /Apple-touch-icon-76x76.png sucht, wenn es im HTML-Code kein interessantes Material findet (ein bisschen wie IE mit /favicon.ico). Daher ist es wichtig, dass die Dateinamen oben bleiben. Es ist auch wichtig zu bedenken, dass Android/Chrome auch diese Bilder 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.

59
philippe_b

Da einige dieser Antworten bereits veraltet sind, empfehle ich die Verwendung von http://realfavicongenerator.net/ , um alle Bilder und Markierungen zu generieren. Ich spende jedes Mal ein paar Euro, wenn ich es in der Hoffnung verwende, dass es funktioniert ermöglicht es ihnen, sich auf dem Laufenden zu halten, was aktuell unter iOS, Android und Windows gilt, also muss ich das nicht.

8
Tim Iles

Festlegen eines Webseitensymbols für Webclips

Möglicherweise möchten Sie, dass Benutzer Ihre Webanwendung oder Ihren Webseiten-Link zum Startbildschirm hinzufügen können. Diese durch ein Symbol dargestellten Links werden Webclips genannt. Befolgen Sie diese einfachen Schritte, um ein Symbol anzugeben, das Ihre Webanwendung oder Webseite unter iOS darstellt.

Um ein Symbol für die gesamte Website (jede Seite der Website) anzugeben, platzieren Sie eine Symboldatei im PNG-Format im Hauptdokumentordner mit dem Namen Apple-touch-icon.png.

Fügen Sie der Webseite ein Linkelement hinzu, um ein Symbol für eine einzelne Webseite anzugeben oder das Website-Symbol durch ein Symbol für eine Webseite zu ersetzen.

<link rel="Apple-touch-icon" href="/custom_icon.png">

Ersetzen Sie im obigen Beispiel custom_icon.png durch Ihr Symbol Dateiname . Um mehrere Symbole für verschiedene Geräteauflösungen anzugeben, beispielsweise 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">

Es wird das Symbol verwendet, das für das Gerät am besten geeignet ist. Wenn kein Größenattribut festgelegt ist, beträgt die Elementgröße standardmäßig 60 x 60. Wenn ein Symbol nicht der empfohlenen Größe des Geräts 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 Link-Element keine Symbole angegeben werden, wird im Website-Stammverzeichnis nach Symbolen mit dem Präfix Apple-Touch-Symbol ... gesucht. Wenn die entsprechende Symbolgröße für das Gerät beispielsweise 60 x 60 ist, sucht das System in der folgenden Reihenfolge nach Dateinamen:

Apple-touch-icon-76x76.png

Apple-touch-icon.png

Siehe Symbol- und Bildgrößen für Websitensymbolmetriken.

Note: Safari unter iOS 7 fügt den Symbolen keine Effekte hinzu. Ältere Versionen von Safari fügen keine Effekte für Symboldateien mit dem Suffix -precomposed.png hinzu. Weitere Informationen finden Sie unter Erste Schritte: Identifizieren Ihrer App in iTunes Connect.

Quelle: Apple-Symbolspezifikationen

5
user2719890

Apple Developers Website empfiehlt 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 den Titel Ihrer Website. Normalerweise möchten Sie das . Das Startbild wird beim Start der App angezeigt.

4
Pedro Ferrari

Ich habe noch nie Apple-Spezifikationen gelesen, muss ich zugeben, aber laut den Protokollen auf meiner Website sind diese Bilder in root 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.png
2
Tomáš Zato

Von meiner Pull-Anfrage an 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">
2
Pinal

Sie können omg-img verwenden, um alle Größen und Farben für popular icons zu 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: 

 enter image description here

0
Horev Ivan