Difference between revisions of "P5js-App-Icon"
From Digipool-Wiki
(Created page with "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...") |
|||
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
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. | 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 - [https://makeappicon.com/ 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! | ||
+ | |||
+ | <pre> | ||
+ | <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"> | ||
+ | </pre> | ||
+ | |||
+ | <br> | ||
+ | |||
+ | Beispiel für eine '''index.html''' Datei: | ||
+ | |||
+ | <pre> | ||
+ | <!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> | ||
+ | </pre> |
Revision as of 20:27, 18 August 2020
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:
<!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>