WinFuture-Forum.de: Ein Homebildschirm-Icon für die eigene Webseite - WinFuture-Forum.de

Zum Inhalt wechseln

Hinweis

Alle neuen Themen werden vor der Veröffentlichung durch einen Moderator geprüft und sind deshalb nicht sofort sichtbar.
Seite 1 von 1

Ein Homebildschirm-Icon für die eigene Webseite Wirksam auf iPad, iPhone und iPod Touch

#1 Mitglied ist offline   Windows 8 User 

  • Gruppe: Moderation
  • Beiträge: 2.414
  • Beigetreten: 10. August 09
  • Reputation: 232

geschrieben 11. August 2011 - 17:33

[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.
2

Anzeige

#2 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.018
  • Beigetreten: 13. Juni 09
  • Reputation: 37

geschrieben 28. November 2011 - 11:36

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

Vllt. deswegen, weil ich kein Apple nutze :rolleyes:



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?
1

#3 Mitglied ist offline   Windows 8 User 

  • Gruppe: Moderation
  • Beiträge: 2.414
  • Beigetreten: 10. August 09
  • Reputation: 232

geschrieben 28. November 2011 - 15:46

Beitrag anzeigenZitat (J000S: 28. November 2011 - 11:36)

Vllt. deswegen, weil ich kein Apple nutze :rolleyes:
Ich auch nicht. :P

Beitrag anzeigenZitat (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.


Beitrag anzeigenZitat (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
1

#4 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.018
  • Beigetreten: 13. Juni 09
  • Reputation: 37

geschrieben 28. November 2011 - 16:05

Beitrag anzeigenZitat (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

1

#5 Mitglied ist offline   Windows 8 User 

  • Gruppe: Moderation
  • Beiträge: 2.414
  • Beigetreten: 10. August 09
  • Reputation: 232

geschrieben 29. November 2011 - 14:24

Am iPad funktionierts prima.
Bild folgt bald.
1

#6 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.018
  • Beigetreten: 13. Juni 09
  • Reputation: 37

geschrieben 29. November 2011 - 14:34

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

#7 Mitglied ist offline   Windows 8 User 

  • Gruppe: Moderation
  • Beiträge: 2.414
  • Beigetreten: 10. August 09
  • Reputation: 232

geschrieben 29. November 2011 - 15:53

Eingefügtes Bild Eingefügtes Bild Eingefügtes Bild

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

1

#8 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.018
  • Beigetreten: 13. Juni 09
  • Reputation: 37

geschrieben 29. November 2011 - 16:10

geile Sache :imao:

Danke fürs Bild!
1

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0