Designating a Custom Icon for your Web App on iPhone and Android

Put apple-touch-icon.png in the same directory as that HTML file. A 180×180 PNG is ideal.


A few details make it much more reliable on iPhone:
  • Use a square PNG, ideally 180×180 px.
  • Don’t pre-round the corners; iOS applies the Home Screen mask itself.
  • Avoid transparency if you care exactly how the background looks; a solid background is safer.
  • Use a stable URL and filename. iOS can cache these icons aggressively.
  • If you already added the site to your Home Screen, you may need to delete the existing Home Screen web app and add it again before the new icon appears.
    •

    For iPhone

    keep it simple. I’d just add the Apple touch icon line right after the stylesheet link:

    an example in <head>: 
              
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Various online writing Tools</title>
            <link rel="stylesheet" href="BlackPurp.css">
            <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
            <style>
              :root {
                --bg:#0f1115;
                --text:#e7e9ee;
                --muted:#9aa3b2;
                --line:#273047;
                --accent:#5dd6c6;
              }
            </style>
          </head>

    Android and others

    And if you want the site to behave like a proper installed web app across iPhone and other platforms, it’s worth also adding a manifest.webmanifest with your icon, app name, display mode, theme, etc.
    A manifest becomes useful when you want the site to behave more like an installable app across browsers, rather than merely have a nice icon on iPhone. For your case, apple-touch-icon is enough if the main goal is: “When I add this page to my iPhone Home Screen, use this icon.” A manifest.webmanifest starts to matter when you want things like: a specific app name or shorter Home Screen name multiple icon sizes for Android/Chrome and other platforms standalone display behavior without normal browser chrome theme/background colors for the launch experience a defined start URL orientation preferences richer PWA/install behavior better cross-platform handling outside Safari/iOS

    json and link in <head>: 
              
          <json>
          {
            "name": "Various Online Writing Tools",
            "short_name": "Writing Tools",
            "start_url": "/",
            "display": "standalone",
            "background_color": "#0f1115",
            "theme_color": "#0f1115",
            "icons": [
              {
                "src": "/icon-192.png",
                "sizes": "192x192",
                "type": "image/png"
              },
              {
                "src": "/icon-512.png",
                "sizes": "512x512",
                "type": "image/png"
              }
            ]
          }
          </json>
          
          <head>:
          <link rel="manifest" href="/manifest.webmanifest">
          </head>

    * note:

    
"start_url": "/" = start at the root domain

"start_url": "." = start at the folder relative to the manifest file's location.

"start_url": "/tools/writing/" = explicitly starts here