Icon-Größen für Progressive Web Apps

Icons

Ganz viele Icons

Es ist so furchtbar! Mittlerweile benötigt man ein Dutzend Icons, nur um anständig auf einem Device oder Desktop seine Progressive Web App zu starten. Warum können sich die Betreiber der Browser nicht darauf einigen, dass man ein großes Icon in den Dimensionen 4096×4096 nimmt und das dann feuchtfröhlich auf die Größe skaliert, die man braucht. Beim nächsten Start kann man es ja aus dem lokalen Cache zerren.

Natürlich wird man sich hier nicht einigen und so wächst weiter still und heimlich ein ziemlich gigantischer Berg von Icons heran.

Bevor jemand den Überblick verliert, hier einmal all gängigen Icon-Größen für Progressive Web Apps (PWA) und mobile Seiten, die man auf den Startbildschirms des aktuellen Devices klatschen kann.

Und wie es sich für einen fragmentierten Markt gehört haben die Anbieter Google, Apple und Yandex ein eigenes System entwickelt.

Übersicht der Icons in Progressive Web Apps und mobilen Websites

Unter der URL http://aso-blog.de/pwa-icons.pdf befindet sich eine handliche Übersicht der benötigen Icons für Progressive Web Apps und mobilen Websites.

Ein Grafiker oder noch besser Icon-Designer sollte alle Icons entwickeln und auf der Checkliste abhacken.

Für den Einbau der Icons in die App oder Website wendet man sich dann am besten an den Programmierer oder Web-Entwickler.

Icons für Progressive Web Apps

Wie die Icons der Progressive Web Apps nun auf dem Webspace heißen, bleibt der Phantasie des Entwicklers überlassen. Eine einheitliche Benennung ist jedoch dem Kraut- und Rüben-Chaos vorzuziehen.

Pfad Größe
/img/favicon.png 512×512
/favicons/icon-192×192.png 192×192
/favicons/icon-144×144.png 144×144
/favicons/icon-96×96.png 96×96
/favicons/icon-72×72.png 72×72
/favicons/icon-48×48.png 48×48
/favicons/icon-36×36.png 36×26

Verwenden der Icons in die PWA

Alle Icons gehören in das Manifest der PWA (/manifest.json):

{
  "name": "PWA Name",
  "short_name": "PWA Test-App",
  "description": "Meine dolle Beschreibung meiner PWA",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#336699",
  "theme_color": "#336699",
  "icons": [
    {
      "src": "/favicons/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": 0.75
    },
    {
      "src": "/favicons/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": 1
    },
    {
      "src": "/favicons/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": 1.5
    },
    {
      "src": "/favicons/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": 2
    },
    {
      "src": "/favicons/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": 3
    },
    {
      "src": "/favicons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": 4
    },
    {
      "src": "/img/favicon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Weitere Progressive Web Apps Icons

In der XML-Datei der Browserkonfiguration sind die folgenden Icons zu hinterlegen:

Pfad Größe
/favicons/mstile-70×70.png 70×70
/favicons/mstile-150×150.png 150×150
/favicons/mstile-310×150.png 310×150
/favicons/mstile-310×310.png 310×310

Verwenden der weiteren Icons in die PWA

Die hier genannten Icons werden in der Datei /favicons/browserconfig.xml ausgezeichnet:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/favicons/mstile-70x70.png"/>
            <square150x150logo src="/favicons/mstile-150x150.png"/>
            <wide310x150logo src="/favicons/mstile-310x150.png"/>
            <square310x310logo src="/favicons/mstile-310x310.png"/>
            <TileColor>#336699</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Weitere Icons für eine mobile Seite auf einem Adroid-Device

Diese Icons werden von den verschiedenen Geräten, die unter Googles Android-Betriebssystem laufen, verwendet, wenn man eine Seite auf dem Homescreen speichert oder wenn man danach sucht.

Pfad Größe
/favicons/icon-230×230.png 230×230
/favicons/icon-228×228.png 228×228
/favicons/icon-192×192.png 192×192
/favicons/icon-96×96.png 96×96
/favicons/icon-32×32.png 32×32
/favicons/icon-16×16.png 16×16

Verwenden der Icons im HTML-Quellcode

Soll ein Icon der Website auf einem Android-Device gespeichert werden, muss in der HTML-Datei um Bereich zwischen <head> und </head> das folgende Schema benutzt werden:

<link rel="icon" type="image/png" sizes="x" href="/favicons/icon-x.png">

Apple Icons

Die Icons für die verschiedenen Devices der Firma Apple bieten bei der Benennung keinen Spielraum. Dafür benötigt der Anbieter aus Cupertino allerdings ein buntes Sammelsurium an Icons.

Icons für Progressive Web Apps bei Apple

Pfad Größe
/favicons/apple-touch-startup-image-320×460.png 320×460
/favicons/apple-touch-startup-image-640×920.png 640×920
/favicons/apple-touch-startup-image-640×1096.png 640×1096
/favicons/apple-touch-startup-image-750×1294.png 750×1294
/favicons/apple-touch-startup-image-1182×2208.png 1182×2208
/favicons/apple-touch-startup-image-1242×2148.png 1242×2148
/favicons/apple-touch-startup-image-748×1024.png 748×1024
/favicons/apple-touch-startup-image-768×1004.png 768×1004
/favicons/apple-touch-startup-image-1496×2048.png 1496×2048
/favicons/apple-touch-startup-image-1536×2008.png 1536×2008

Verwenden der Icons im HTML-Quellcode

Soll ein Icon der Website auf dem Homescreen netz Nutzers gespeichert werden, muss in der HTML-Datei um Bereich zwischen <head> und </head> das folgende Schema benutzt werden:

<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/favicons/apple-touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/favicons/apple-touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/favicons/apple-touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/favicons/apple-touch-startup-image-750x1294.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/favicons/apple-touch-startup-image-1182x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/favicons/apple-touch-startup-image-1242x2148.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/favicons/apple-touch-startup-image-748x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/favicons/apple-touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/favicons/apple-touch-startup-image-1496x2048.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/favicons/apple-touch-startup-image-1536x2008.png">

Springboard-Icons für das Device bei Apple

Pfad Größe
/favicons/apple-touch-icon-57×57.png 57×57
/favicons/apple-touch-icon-60×60.png 60×60
/favicons/apple-touch-icon-72×72.png 72×72
/favicons/apple-touch-icon-76×76.png 76×76
/favicons/apple-touch-icon-114×114.png 114×114
/favicons/apple-touch-icon-120×120.png 120×120
/favicons/apple-touch-icon-144×144.png 144×144
/favicons/apple-touch-icon-152×152.png 152×152
/favicons/apple-touch-icon-180×180.png 180×180

Verwenden der Icons im HTML-Code der Seite

Soll ein Icon der Website auf einem Android-Device gespeichert werden, muss in der HTML-Datei um Bereich zwischen <head> und </head> das folgende Schema benutzt werden:

<link rel="apple-touch-icon" sizes="x" href="/favicons/apple-touch-icon-x.png">

Icons für Progressive Web Apps bei Yandex

Natürlich geht auch Yandex seinen eigenen Weg. Hier wird das Icon in der Größe 50×50 für den PWA unter /favicons/yandex-browser-manifest.json ausgezeichnet. Die Datei liegt hierbei im JSON-Format vor:

{
  "version": 1,
  "api_version": 1,
  "layout": {
    "logo": "/favicons/yandex-browser-50x50.png",
    "color": "#336699",
    "show_title": true
  }
}

Abschließende Worte

Sollte sich der Markt der Smartphones noch weiter fragmentieren, wird eine Aktualisierung dieses Dokuments notwendig sein. Hier wird die Version 1.0.0 vom 26. November 2016 10.51 Uhr angezeigt.

Zurück zum Anfang des Artikels über

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.