Apple Touch-Symbol für Websites

84

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?

html  mobile  apple-touch-icon 
— J82
quelle

Antworten:

89

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:

  • 60x60
  • 76 x 76
  • 120 x 120
  • 152 x 152

Und auch für iOS8 :

  • 180x180

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.

— philippe_b
quelle
2
Werden alle Dateien in jedem <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 ...
— RayOnAir
1
Ab iOS8 gibt es auch die neue Auflösung 180x180. Sie müssen auch nicht wirklich aus HTML auf die Symbole verlinken - es sei denn, Sie möchten bestimmte Symbole für nur eine bestimmte Seite. Apple hat die aktuelle Liste der Größen, die sie mögen: developer.apple.com/library/ios/documentation/UserExperience/… . Suchen Sie in der Tabelle nach dem Eintrag "Webclip-Symbol".
— Qingu
1
Das Hinzufügen so vieler Daten in den Header jeder Seite erscheint mir unnötig - wenn das Symbol in der 180x180-Version nicht riesig ist (meins liegt normalerweise zwischen 2 KB und 5 KB), reicht <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.
— Iquito
1
@iquito Richtig, Sie können nur eine Deklaration verwenden. Als Gründer von RealFaviconGenerator arbeite ich an dieser Einheitslösung. Es gibt einen möglichen Haken, obwohl iOS gute Arbeit leistet: iOS verwendet einen ähnlichen Algorithmus wie Mitchell, um die Symbole zu verkleinern. Abhängig von Ihrem spezifischen Design ist dies möglicherweise nicht das, was Sie möchten. Ich werde meine Antwort aktualisieren, sobald ich mehr Feedback dazu habe.
— philippe_b
2
RealFaviconGenerator ist übrigens wirklich großartig. Das einzige, was ich für besser hielt, waren die vielen Header-Links, die nicht unbedingt erforderlich sind - sowohl beim Generieren neuer Favoriten als auch beim Überprüfen der Funktionsweise einer Website. Vielleicht könnte die Website als weitere Verbesserung verschiedene Möglichkeiten aufzeigen - welche Teile sind absolut vorteilhaft (und was sie tun / mehr Erklärung) und welche Teile weggelassen werden können und normalerweise vom Browser automatisch erkannt werden (soweit ich iOS kenne) sucht auch nach den spezifischen Größen im Stammverzeichnis, wenn die Seite keine Informationen zu enthält apple-touch-icon).
— Iquito
70

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.

— Charles Cooke
quelle
Warum bedeutet vorkomponiert ohne Glanz? Ich kann die Definition von vorkomponiertem Halsen nicht mit "ohne Glanz" machen. Und nein, ich bin nicht sarkastisch, ich möchte es wirklich wissen.
— Bootscodierer
@ Mark0978 Ich habe es so gelesen, dass es bedeutet: "Es ist bereits komponiert, dh" iOS-Stil "(von Ihnen), damit iOS nicht damit herumspielt (außer um die Ecken abzurunden)"
— Michael Haren
5
Dies ist veraltet ab iOS 7.
— bjb568
Ist es möglich, nur ein Bild zu haben und Apple die Größe automatisch ändern zu lassen?
— Aaron Franke
12

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.

— Tim Iles
quelle
3
(Ich habe gerade bemerkt, dass eine der anderen Antworten hier vom Autor von realfavicongenerator.net stammt - bitte stimmen Sie seiner Antwort statt meiner zu!)
— Tim Iles
3
Unterstützen Sie diesen Entwickler, denn diese Seite ist perfekt
— Whiteshooz
Tim + @whiteshooz: Vielen Dank für Ihre Unterstützung! (Ja, ich bemerke gerade Ihre Kommentare)
— philippe_b
7

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.

— Pedro Ferrari
quelle
6

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.png

Informationen 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

Hallo, weißt du, wo ich diese PNG-Bilder herunterladen kann?
— BKSpurgeon
2

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.png
— Tomáš Zato - Monica wieder einsetzen
quelle
2

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">
— Pinal
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.