{
    "title": "PWA: Favicon & PWA Icon Generator",
    "slug": "pwa-favicon-pwa-icon-generator",
    "excerpt": "I've taken my Favicon Generator entirely client-side. By leveraging the Canvas API, the new version handles all image processing right in your browser - no server required. With full offline support and new features like squircle shaping and individual icon overrides, it's a faster, more flexible way to manage your project assets.",
    "body": "![Screenshot of Favicon & PWA Icon Generator](https://blog.philipnewborough.co.uk/media/66ebc2a7-6ad8-4f16-a478-8388bbd3747a.png)\r\n\r\nLive: [favicons-pwa.philipnewborough.co.uk](https://favicons-pwa.philipnewborough.co.uk/)\r\n\r\nFollowing up on my [previous post](https://blog.philipnewborough.co.uk/posts/favicon-manifest-generator), I&#039;ve been playing around with converting my Favicon Generator into a PWA.\r\n\r\nThe new version is entirely client-side - no server required - with all the image processing handled via the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). Because it&#039;s a PWA, it caches all assets, meaning once it’s installed, you can use it completely offline.\r\n\r\nI also took the opportunity to bake in a few new features:\r\n\r\n**Individual Icon Overrides:** Perfect for when a design doesn&#039;t scale down well and you need a custom image for smaller sizes.\r\n\r\n**Shaping Tools:** Quickly generate round, rounded, or &quot;squircle&quot; icons.\r\n\r\n**Safe Zone Overlay:** A handy way to check for clipping on OSs that enforce specific mask shapes.\r\n\r\nI&#039;ve already put it to work on a few of my own projects and I&#039;m really happy with the workflow. If you want to poke around the source, the code is up on [GitHub](https://github.com/corenominal/favicons-pwa.philipnewborough.co.uk).",
    "tags": [],
    "published_at": "2026-04-07 21:40:00",
    "url": "https://blog.philipnewborough.co.uk/posts/pwa-favicon-pwa-icon-generator",
    "featured_image": "https://blog.philipnewborough.co.uk/media/og-8b2efca3-5ec2-478d-94d1-f5c89045087b.png"
}