[Windows 8 User]

[Hinweis: ab iOS 7 haben die Icons eine andere Größe bzw. Form]

Hallo Community!

Wenn man im Safari WinFuture.de zum Homebildschirm eines iPhones, iPods oder iPads hinzufügt, erscheint nicht, wie bei anderen Webseiten ein Screenshot der Webseite, sondern ein festgelegtes Icon mit WinFuturelogo.
Wie ihr so etwas für eure Webseite baut, möchte ich euch hier zeigen:

Schritt 1: Icon erstellen

Es solte darauf geachtet werden, dass das Icon die richtige Größe hat.
Das Icon muss quadratisch sein und sollte je nach belieben eine der unten genannten Größen haben.

iPhone (ab 4): 114×114px

iPhone (alt): 57×57px

iPod: 57×57px

iPad: 48×48px

iPad (ab 3): 150x150px


Spiegeleffekte müssen nicht eingebaut werden, können aber! (Das Gerät kann die Spiegelung auch selber einfügen)
Bildformat ist PNG (oder ggf. ICO)!


Schritt 2: Einbinden

Variante 1: Bilddatei ins Stammverzeichnis legen

Das iPhone / iPad / iPod sucht im Stammverzeichnis der Webseite nach folgenden zwei Files:

"apple-touch-icon.png"

oder

"apple-touch-icon-precomposed.png"

Nennt euer Icon also wie einer der beiden Möglichkeiten.
Diese Varante fügt keinen Glossy- / Spiegeleffekt mehr hinzu!

2. Variante: Bild verlinken

Im Header der Webseite folgende <link> Tags einfügen:

Wenn das Icon noch keine Spiegeleffekte hat:

<link rel="apple-touch-icon" href="LINK z.B. /icons/iphone_favicon.png" />


Wenn das Icon schon Spiegeleffekte hat:

<link rel="apple-touch-icon-precomposed" href="LINK z.B. /icons/iphone_favicon.png" />


Wenn das Icon gar keine Spiegeleffekte haben soll, dann könnt ihr einfach eins ohne erstellen und eine Möglichkeit wählen, bei der das Gerät den Effekt nicht hinzufügt.

[J000S]

Ja sehr geil! Wusste bisher noch garnicht, dass es sowas gibt

Vllt. deswegen, weil ich kein Apple nutze



Aber eins noch, was ist, wenn ich das 114x114px png einfüge, wird das auf den anderen Geräten Trotzdem richtig dargestellt?

Oder muss man dann mehrere einbinden?

[Windows 8 User]

Zitat (J000S: 28. November 2011 - 11:36)

Vllt. deswegen, weil ich kein Apple nutze

Ich auch nicht.

Zitat (J000S: 28. November 2011 - 11:36)

Aber eins noch, was ist, wenn ich das 114x114px png einfüge, wird das auf den anderen Geräten Trotzdem richtig dargestellt?
Oder muss man dann mehrere einbinden?

Ich denke schon. Ich sehe gerade, dass ich oben was von Deiteiformat PNG geschrieben habe. Das stimmt nicht so ganz, ich habe bei mir selber (eben erst gesehen) eine .ICO, die die entsprechenden Größen beinhaltet erstellt.

Danke für den Hinweis, ich habe es oben geändert.

Zitat (J000S: 28. November 2011 - 11:36)

...anderen Geräten Trotzdem richtig dargestellt?

Wenn du willst, kannst du mir einen Link zur betreffenden Seite schicken und ich kann dir dann evtl. ein Foto davon senden.


Windows 8 User

[J000S]

Zitat (Windows 8 User: 28. November 2011 - 15:46)

Wenn du willst, kannst du mir einen Link zur betreffenden Seite schicken und ich kann dir dann evtl. ein Foto davon senden.

Hatte heute leider keine Zeit ein Icon zu erstellen... Wenn ich eines gemacht habe aber gerne!



So hab mal eines erstellt... im .ico Fromat...


LINK




EDIT: Habs einmal einfach als ico reingelegt und einmal mit verlinkung und png.
Am MAC meiner Kollegin ist aber kein icon bei Safari zu sehen

Dieser Beitrag wurde von J000S bearbeitet: 29. November 2011 - 12:19

[Windows 8 User]

Am iPad funktionierts prima.
Bild folgt bald.

[J000S]

cool... der MAC meiner Kollegin ist scheinbar zu doof ^^ oder Safari...

[Windows 8 User]

Dieser Beitrag wurde von Windows 8 User bearbeitet: 29. November 2011 - 16:52

[J000S]

geile Sache

Danke fürs Bild!