Apple Touch Icons nutzen

Datum: 17. Oktober 2012
Autor*in: Bastian Schwarz


Ich habe mal ein wenig recherchiert und möchte hier das Ergebnis mitteilen.

Die Apple Touch Icons können generell benutzt werden um Apps oder Webseiten auf z.B. den Startbildschirm zu pinnen. Ist bei der Webseite dann ein solches Icon hinterlegt wird das „Lesezeichen“ mit ihm hinterlegt und man erhält so einen schönen Wiedererkennungswert.

Generell sollten die Icons in einem transparenten PNG umgesetzt werden.

Es gibt aktuell 4 Größen in denen man die Icons zur Verfügung stellen sollte.

  • 57×57 – IPhone
  • 72×72 – IPad
  • 114×114 – IPhone (4)
  • 144×144 – IPad

Für das Icon gibt es dann noch 3 Effekte die häufig genutzt bzw. automatisch hinzugefügt werden.

Schlagschatten

Der Schlagschatten wird von Apple entweder hinzugefügt oder nicht, beeinflussen kann man das aber nicht. Ist wohl vom Gerät / iOS abhängig.

Abgerundete Ecken

Die abgerundeten Ecken dagegen muss man selber zur Verfügung stellen. Nachfolgend die Größen + kurze Erklärung:

Der Radius für die Ecken beträgt die Icongröße / 6.4. So ergeben sich folgende Größen:

  • 57 Icon — 9 px radius
  • 72 Icon — 11 px radius
  • 114 Icon — 18 px radius
  • 144 Icon — 22 px radius

Scheineffekt

Der Schein auf dem Icon wird von Apple standardmäßig reingezeichnet außer man stellet ein sog. precomposed Logo zur Verfügung. Das kann man also beeinflussen, muss man aber nicht.


Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Projekte


Spamschutz-Alternative: MotionCAPTCHA

Autor*in: Stefan Oswald


Projekte // Technologie // Über den Tellerrand // User Experience & Design


Sehr interessanter Ansatz: > MotionCAPTCHA > Beispielseite Die Idee dahinter ist, dass der Benutzer eine vorgegebene Form (z.B. einen Kreis, einen Stern oder ein Häkchen) nach malen muss. Bots dürften daran zuverlässig scheitern. Der Autor betrachtet die derzeitige Version 0.2 als „Proof of Concept“ und noch nicht aus produktiv einsetzbare Lösung. Wir sollten das im …


Beitrag lesen
20
MAI
14

Augmented Reality trifft TYPO3: POIs neu erleben

Autor*innen: Verena Schmuck, David Kelemen


infomax   //   Projekte   //   Technologie   //   Über den Tellerrand


Wie bringt man POIs auf mobilen Geräten intuitiv und platzsparend zur Anzeige? Diese Frage stand am Anfang von Davids Abschlussprojekt der Ausbildung zum Fachinformatiker Anwendungsentwicklung und wurde mit einer innovativen Lösung beantwortet: dem imx.ARBrowser, einer TYPO3-Erweiterung zur Darstellung von POIs in einer Augmented-Reality-Ansicht.


Beitrag lesen
29
JUL
25

Umzug eines MediaWiki auf neuen Server? Auweh…

Autor*in:


Projekte // Technologie // Über den Tellerrand


Ein kleiner Hinweis an Entwickler und Projektmanager, sollten MediaWiki-Projekte einen Serverumzug erfahren dürfen: Das Problem Versionen vor 1.19.x kommen mit den neuen Versionen der PCRX-Library (Perl Compatible Regular Expressions) nicht zurecht. So gehabt nun bei einem alten Projekt. Das Problem äußert sich dadurch, dass plötzlich auf den Seiten unter der Überschrift keine Contents mehr auftauchen, in der …


Beitrag lesen
03
DEZ
15

Responsive Webdesign – Was hat das mit mir zu tun?

Autor*in: Axel Güldner


Projekte // Technologie // Über den Tellerrand // User Experience & Design


Das Thema Responsive Webdesign hat inzwischen jeden von uns, der mit offenen Augen durch das Internet läuft, mindestens einmal berührt. Quasi wie aus dem Nichts ist diese Disziplin über Nacht zum neuen Buzzword unter Webdesignern/Entwicklern und Marketingleuten geworden. Responsive Webdesign gilt einfach als sexy, auch wenn die eigentliche Idee dahinter nicht gerade neu ist. Jeder …


Beitrag lesen
18
JAN
12