vuepress - manifest.json

Favicons und App-Icons erstellen

Für diese Seite wurde ein Logo als png Datei datei in der Größe 300 x 300 Pixel erstellt, um daraus die Favicons zu generieren.

Über das Tool https://www.favicon-generator.org/ wurden dann die Favicons und App-Icons automatisch erzeugt, sowie die HTML Header Informationen und die Datei manifest.json:

Vom Favicon Generator automatisch erzeugte Informationen für den HTML Head:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Hinweis vom Favicon Generator zur Nutzung des favicon.ico:

After generating a favicon with this tool download and save to the root directory of your site. Then include the following code in the head of your HTML document.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

1
2

Inhalt der vom Favicon Generator generierte manifest.json Datei:

{
"name": "App",
 "icons": [
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

Dateien im Projekt ablegen

Die erzeugten Logos (*.png Dateien), das Favicon (favicon.ico) und das Manifest (manifest.json) werden nun im Root der Webseite, also unter ./.vuepress/public abgelegt.

HTML Head der Vuepress Seite ergänzen

Die oben aufgeführten Ergänzugen für den HTML Head jeder Seite werden nun in der ./.vuepress/config.json Datei eingebaut. Siehe dazu auch den Artikel Vuepress - Anpassungen des HTML Head.

Ergänzugen der ./.vuepress/config.json:

module.exports = {
  head: [
    // Anpassung für das Favicon:
    ['link', { rel: 'icon', type:`image/x-icon`, href: '/favicon.ico' }],
    ['link', { rel: 'shortcut icon', type:`image/x-icon`, href: '/favicon.ico' }],
    // Anpassung für das APP Manifest:
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['link', { rel: 'apple-touch-icon', sizes: `57x57`, href: '/apple-icon-57x57.png' }],
    ['link', { rel: 'apple-touch-icon', sizes: `60x60`, href: '/apple-icon-60x60.png' }],
    ['link', { rel: 'apple-touch-icon', sizes: `72x72`, href: '/apple-icon-72x72.png' }],
    ['link', { rel: 'apple-touch-icon', sizes: `76x76`, href: '/apple-icon-76x76.png' }],
    ['link', { rel: 'apple-touch-icon', sizes: `114x114`, href: '/apple-icon-114x114.png' }],
    ['link', { rel: 'apple-touch-icon', sizes: `120x120`, href: '/apple-icon-120x120.png' }],
    ['link', { rel: 'apple-touch-icon', sizes: `144x144`, href: '/apple-icon-144x144.png' }],
    ['link', { rel: 'apple-touch-icon', sizes: `152x152`, href: '/apple-icon-152x152.png' }],
    ['link', { rel: 'apple-touch-icon', sizes: `180x180`, href: '/apple-icon-180x180.png' }],
    ['link', { rel: 'icon', type: `image/png`, sizes: `192x192`, href: '/android-icon-192x192.png' }],
    ['link', { rel: 'icon', type: `image/png`, sizes: `32x32`, href: '/favicon-32x32.png' }],
    ['link', { rel: 'icon', type: `image/png`, sizes: `96x96`, href: '/favicon-96x96.png' }],
    ['link', { rel: 'icon', type: `image/png`, sizes: `16x16`, href: '/favicon-16x16.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '#ffffff' }],
    ['meta', { name: 'msapplication-TileImage', content: '/ms-icon-144x144.png' }],
    ['meta', { name: 'theme-color', content: '#013ADF' }]
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

manifest.json anpassen

Nach den oben aufgeführten Schritten stehen alle Icons zu verfügung. Speichert ein Nutzer der Vuepress Seite nun die Seite z.B. auf seinen Homecreen seines Smartphones oder Tablets, so wird als Name App vorgeschlagen, bzw. gespeichert. Dieser Name kommt aus der manifest.json.

Die Datei manifest.json kann nun für die eigene Seite noch angepasst werden.

Infos zur manifest.json findet man z.B. unter dem Artikel The Web App Manifest auf developers.google.com.

Der Name App wird auf den eigenen Projektnamen angepasst ("name": "herwig.de").
Der Eintrag "short_name": "herwig.de" wird ergänzt. Dieser Name wir einem ANwender angeboten, wenn er die Webseite z.B. auf seinem Homescreen ablegen möchte.
Über "start_url": "/" wird festgelegt, dass bei einem Start über das App Icon auf einem Homescreen immer die Startseite geöffnet wird. Es ist aber auch jede andere Seite im Projekt denkbar.
"display": "standalone" öffnet die Seite wie eine App in einem eigenen Fenster und ohne Browser Steuerelemente.

Die vollständig angepasste und erweiterte Datei manifest.json:

{
"short_name": "herwig.de",
"name": "herwig.de",
 "icons": [
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ],
 "start_url": "/",
 "background_color": "#013ADF",
 "display": "standalone",
 "scope": "/",
 "theme_color": "#013ADF",
 "description": "Private Webseite von Michael Herwig aus Düsseldorf, mit vielen Notizen zu technischen Themen.",
 "lang": "de-DE",
 "dir": "ltr"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

Ressourcen

Video Progressive Web Apps

Im Video Progressive Web Apps: Great Experiences Everywhere (Google I/O '17) wird ab Minute 8:57 die Datei manifest.jsonerklärt.

# image/svg+xml vuepress - manifest.json

# Favicons und App-Icons erstellen

# Dateien im Projekt ablegen

# HTML Head der Vuepress Seite ergänzen

# manifest.json anpassen

# Ressourcen

# Links

# Video Progressive Web Apps