How to convert an HTML file to APK

When a single HTML file is the right choice

Choose the single-file route when everything your page needs is in one .html file: the markup, a <style> block and a <script> block. If your page loads style.css, app.js or images from neighbouring files, either inline them or package the folder as a ZIP instead — see ZIP to APK.

Prepare the file

• Add a viewport tag so the page fits the phone screen: <meta name="viewport" content="width=device-width, initial-scale=1">.
• Inline small images as data URIs, or reference them from a public URL if the app will always be online.
• Avoid desktop-only interactions such as hover menus; make tap targets at least 48 × 48 pixels.
• Save state locally with localStorage — it persists inside the app between launches.
• Keep it light: the free plan bundles up to 5 MB, which is plenty for a single page.

Convert it

1. Install HTML & ZIP to APK Builder from Google Play.
2. Choose HTML file and pick your .html from the phone's storage.
3. Enter the app name (what appears under the icon), upload a square icon and choose a theme colour.
4. Set a package name. Keep it — it identifies your app forever.
5. Build, then download the APK and install it.

Test before you share

Open the app with flight mode on to confirm it works offline. Rotate the phone, try the back button, and check text is readable without zooming. If something breaks offline, look for files or fonts loaded from the internet — see making a website work offline in an APK.

Good single-file apps

• Calculators and converters
• Quizzes and flashcards
• Restaurant or price menus
• Small canvas games
• Event schedules and checklists

A minimal app-ready HTML file

This skeleton has everything a single-file app needs — viewport, safe-area padding, no tap highlight and local saving:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>My App</title>
  <style>
    body { margin: 0; font: 16px system-ui, sans-serif;
           padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
           -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
    button { min-height: 48px; font-size: 16px; }
  </style>
</head>
<body>
  <h1>Counter</h1>
  <button id="b">Tapped 0 times</button>
  <script>
    let n = +localStorage.getItem('n') || 0;
    const b = document.getElementById('b');
    const show = () => b.textContent = `Tapped ${n} times`;
    b.onclick = () => { n++; localStorage.setItem('n', n); show(); };
    show();
  </script>
</body>
</html>

Make the page feel like an app

• Fixed layout, not a document: keep headers and bottom actions in view with position: sticky or a flex column that fills 100dvh.
• No accidental zoom or text selection on controls: use 16px+ inputs and user-select: none on buttons.
• System fonts look native and need no download.
• Respect dark mode with @media (prefers-color-scheme: dark).