🎨 PWA Icon Generator

Generate all required PWA icons from a single image

📌 Best Practice: Upload a square PNG image (at least 512x512px) with your logo/icon
📁

Drop your image here or click to browse

Supports PNG, JPG, JPEG

Generated Icons:

📋 Installation Instructions:

  1. Generate icons using this tool and download them
  2. Create an /icons/ folder in your website root
  3. Upload all generated icons to the /icons/ folder
  4. Add the manifest.json to your website root
  5. Add the service-worker.js to your website root
  6. Add these lines to the <head> section of your index.php: 
    <link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192x192.png">
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">
<meta name="theme-color" content="#ff0000">
  7. Add this script before the closing </body> tag: 
    <script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js')
      .then(function(registration) {
        console.log('ServiceWorker registered:', registration.scope);
      })
      .catch(function(err) {
        console.log('ServiceWorker registration failed:', err);
      });
  });
}
</script>