Simple PWA is a Progressive Web App template that provides the minimum file structure needed to create a PWA—a reliable and installable web application. It's up to you to build upon it, to make it capable.
Simple PWA is "offline-first", using a "cache first" caching strategy, which means on load, two asynchronous requests are kicked off—one to the cache, and one to the network. If there's a cached version available, it is used, but the updated version is fetched and stored for the next load. To force the cache to update from the network, change the value of cacheName
in sw.js
.
android-chrome-36x36.png
image
Favicon, Android Chrome M39+ with 0.75 screen density
android-chrome-48x48.png
image
Favicon, Android Chrome M39+ with 1.0 screen density
android-chrome-72x72.png
image
Favicon, Android Chrome M39+ with 1.5 screen density
android-chrome-96x96.png
image
Favicon, Android Chrome M39+ with 2.0 screen density
android-chrome-144x144.png
image
Favicon, Android Chrome M39+ with 3.0 screen density
android-chrome-192x192.png
image
Favicon, Android Chrome M39+ with 4.0 screen density
android-chrome-256x256.png
image
Favicon, Android Chrome M47+ Splash screen with 1.5 screen density
android-chrome-384x384.png
image
Favicon, Android Chrome M47+ Splash screen with 3.0 screen density
android-chrome-512x512.png
image
Favicon, Android Chrome M47+ Splash screen with 4.0 screen density
apple-touch-icon.png
image
Favicon, Apple default
apple-touch-icon-57x57.png
image
Favicon, Apple iPhone, non-Retina with iOS6 or prior
apple-touch-icon-60x60.png
image
Favicon, Apple iPhone, non-Retina with iOS7
apple-touch-icon-72x72.png
image
Favicon, Apple iPad, non-Retina with iOS6 or prior
apple-touch-icon-76x76.png
image
Favicon, Apple iPad, non-Retina with iOS7
apple-touch-icon-114x114.png
image
Favicon, Apple iPhone, Retina with iOS6 or prior
apple-touch-icon-120x120.png
image
Favicon, Apple iPhone, Retina with iOS7
apple-touch-icon-144x144.png
image
Favicon, Apple iPad, Retina with iOS6 or prior
apple-touch-icon-152x152.png
image
Favicon, Apple iPad, Retina with iOS7
apple-touch-icon-180x180.png
image
Favicon, Apple iPhone 6 Plus with iOS8
browserconfig.xml
IE11 icon configuration file
favicon_config.json
RealFaviconGenerator configuration file
favicon.ico
image
Favicon, IE and fallback for other browsers
favicon.png
image
Favicon generation source image
favicon-16x16.png
image
Favicon, default
favicon-32x32.png
image
Favicon, Safari on Mac OS
index.html
Main HTML file
logo.png
image
Logo
main.js
Main Javascript file
manifest.json
Manifest file
maskable_icon.png
image
Favicon, maskable
mstile-70x70.png
image
Favicon, Windows 8 / IE11
mstile-144x144.png
image
Favicon, Windows 8 / IE10
mstile-150x150.png
image
Favicon, Windows 8 / IE11
mstile-310x150.png
image
Favicon, Windows 8 / IE11
mstile-310x310.png
image
Favicon, Windows 8 / IE11
README.md
Readme file
robots.txt
Robots file
safari-pinned-tab.svg
image
Favicon, Safari pinned tab
sitemap.xml
Sitemap file
share.jpg
image
Social media sharing
sw.js
Service worker file
style.css
Main CSS file
If you're able to install the CLI version of RealFaviconGenerator, favicon_config.json
contains all settings to generate these images using the following command from the project's root directory. The real-favicon
tool generates images from favicon.png
, so replace favicon.png
prior to running this command. The resulting favicon_data.json
and site.webmanifest
can be discarded.
real-favicon generate favicon_config.json favicon_data.json .
maskable_icon.png
.safari-pinned-tab.svg
.share.jpg
.Looking for inspiration? Check out these PWA directories:
Want to help improve this? Contributions are welcome! ➡️ GitHub