Difference between revisions of "P5js-App-Icon"
From Digipool-Wiki
| Line 20: | Line 20: | ||
Beispiel für eine '''index.html''' Datei: | Beispiel für eine '''index.html''' Datei: | ||
| + | manifest.json | ||
<pre> | <pre> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| Line 44: | Line 45: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </pre> | ||
| + | |||
| + | <pre> | ||
| + | |||
| + | { | ||
| + | "lang": "en", | ||
| + | "dir": "ltr", | ||
| + | "name": "myDoor", | ||
| + | "short_name": "myDoor", | ||
| + | "icons": [{ | ||
| + | "src": "AppIcon/Icon-App-60x60@2x.png", | ||
| + | "sizes": "180x180", | ||
| + | "type": "image/png" | ||
| + | }, { | ||
| + | "src": "AppIcon/Icon-App-76x76@1x.png", | ||
| + | "sizes": "72x72" | ||
| + | }, { | ||
| + | "src": "AppIcon/Icon-App-29x29@2x.png", | ||
| + | "sizes": "58x58" | ||
| + | }], | ||
| + | "scope": "/", | ||
| + | "id": "superracer", | ||
| + | "start_url": "https://olafval.de/door_4p8rc5z3u2jt08l4/index.html", | ||
| + | "display": "minimal-ui", | ||
| + | "orientation": "portrait", | ||
| + | "theme_color": "aliceblue", | ||
| + | "background_color": "red" | ||
| + | } | ||
| + | |||
</pre> | </pre> | ||
Revision as of 18:34, 8 January 2023
Deine Datei muss eine PNG Datei mit transparenten Hintergrund sein mit einer Auflösung von 1024 x 1024 Pixel. Das Bildmotiv sollte aber auch bei einer Auflösung von 50 x 50 px noch gut zu erkennen sein.
- Wandele die Icon-Datei mit einem Online-Tool in die Icon Formate um - www.makeappicon.com
- Kopiere den ios Ordner auf deinem Webspace zu der skatch und index Datei
- Füge den mobile-web-app-capable code in die Datei index.html ein - siehe unten!
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="AppIcon/Icon-App-60x60@2x.png" />
<link rel="apple-touch-icon" sizes="180x180" href="AppIcon/Icon-App-60x60@3x.png" />
<link rel="apple-touch-icon" sizes="76x76" href="AppIcon/Icon-App-76x76@1x.png" />
<link rel="apple-touch-icon" sizes="152x152" href="AppIcon/Icon-App-76x76@2x.png" />
<link rel="apple-touch-icon" sizes="58x58" href="AppIcon/Icon-App-29x29@2x.png" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Beispiel für eine index.html Datei:
manifest.json
<!DOCTYPE html>
<html>
<head>
<title>Mein-Titel</title>
<meta http-equiv="expires" content="0">
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style> body {padding: 0; margin: 0;} </style>
<script src="p5.min.js"></script>
<script src="addons/p5.dom.min.js"></script>
<script src="addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="AppIcon/Icon-App-60x60@2x.png" />
<link rel="apple-touch-icon" sizes="180x180" href="AppIcon/Icon-App-60x60@3x.png" />
<link rel="apple-touch-icon" sizes="76x76" href="AppIcon/Icon-App-76x76@1x.png" />
<link rel="apple-touch-icon" sizes="152x152" href="AppIcon/Icon-App-76x76@2x.png" />
<link rel="apple-touch-icon" sizes="58x58" href="AppIcon/Icon-App-29x29@2x.png" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body style="background-color:#FAFAFA;">
</body>
</html>
{
"lang": "en",
"dir": "ltr",
"name": "myDoor",
"short_name": "myDoor",
"icons": [{
"src": "AppIcon/Icon-App-60x60@2x.png",
"sizes": "180x180",
"type": "image/png"
}, {
"src": "AppIcon/Icon-App-76x76@1x.png",
"sizes": "72x72"
}, {
"src": "AppIcon/Icon-App-29x29@2x.png",
"sizes": "58x58"
}],
"scope": "/",
"id": "superracer",
"start_url": "https://olafval.de/door_4p8rc5z3u2jt08l4/index.html",
"display": "minimal-ui",
"orientation": "portrait",
"theme_color": "aliceblue",
"background_color": "red"
}
