Difference between revisions of "P5js-App-Icon"

From Digipool-Wiki
Jump to: navigation, search
(One intermediate revision by the same user not shown)
Line 8: Line 8:
 
     <meta name="mobile-web-app-capable" content="yes">
 
     <meta name="mobile-web-app-capable" content="yes">
 
     <meta name="apple-mobile-web-app-capable" content="yes">  
 
     <meta name="apple-mobile-web-app-capable" content="yes">  
       <link rel="apple-touch-icon" href="ios/Icon-App-60x60@2x.png" />
+
       <link rel="apple-touch-icon" href="AppIcon/Icon-App-60x60@2x.png" />
       <link rel="apple-touch-icon" sizes="180x180" href="ios/Icon-App-60x60@3x.png" />
+
       <link rel="apple-touch-icon" sizes="180x180" href="AppIcon/Icon-App-60x60@3x.png" />
       <link rel="apple-touch-icon" sizes="76x76" href="ios/Icon-App-76x76.png" />
+
       <link rel="apple-touch-icon" sizes="76x76" href="AppIcon/Icon-App-76x76@1x.png" />
       <link rel="apple-touch-icon" sizes="152x152" href="ios/Icon-App-76x76@2x.png" />
+
       <link rel="apple-touch-icon" sizes="152x152" href="AppIcon/Icon-App-76x76@2x.png" />
       <link rel="apple-touch-icon" sizes="58x58" href="ios/Icon-App-29x29@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">
 
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
</pre>
 
</pre>
Line 34: Line 34:
 
     <meta name="mobile-web-app-capable" content="yes">
 
     <meta name="mobile-web-app-capable" content="yes">
 
     <meta name="apple-mobile-web-app-capable" content="yes">  
 
     <meta name="apple-mobile-web-app-capable" content="yes">  
       <link rel="apple-touch-icon" href="ios/Icon-App-60x60@2x.png" />
+
       <link rel="apple-touch-icon" href="AppIcon/Icon-App-60x60@2x.png" />
       <link rel="apple-touch-icon" sizes="180x180" href="ios/Icon-App-60x60@3x.png" />
+
       <link rel="apple-touch-icon" sizes="180x180" href="AppIcon/Icon-App-60x60@3x.png" />
       <link rel="apple-touch-icon" sizes="76x76" href="ios/Icon-App-76x76.png" />
+
       <link rel="apple-touch-icon" sizes="76x76" href="AppIcon/Icon-App-76x76@1x.png" />
       <link rel="apple-touch-icon" sizes="152x152" href="ios/Icon-App-76x76@2x.png" />
+
       <link rel="apple-touch-icon" sizes="152x152" href="AppIcon/Icon-App-76x76@2x.png" />
       <link rel="apple-touch-icon" sizes="58x58" href="ios/Icon-App-29x29@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">
 
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
   </head>
 
   </head>

Revision as of 19: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.

  1. Wandele die Icon-Datei mit einem Online-Tool in die Icon Formate um - www.makeappicon.com
  2. Kopiere den ios Ordner auf deinem Webspace zu der skatch und index Datei
  3. 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>