Skip to content
Preview maskable icons in the browser!
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
favicon
src
toggle
.editorconfig
.gitignore
LICENSE
README.md
github_social.png
index.html
manifest.json
maskable-demo.gif
package-lock.json
package.json
rollup.config.js
style.css
tigeroakes.svg
workbox-config.js

README.md

Maskable.app

Preview maskable icons in the browser!

Demo usage


Maskable icons allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other icons on the device. On Android, this lets developers get rid of the default white background around their icons and use the entire provided space.

It's important to test maskable icons to ensure the important regions of the icon are visible on any device and in any shape. Upload a maskable icon or drag and drop it into Maskable.app, then preview how it will appear on different Android launchers.

Developing

Install dependencies:

npm install

Once the modules are installed, just run a web server. Thanks to @pika/web, no build step is needed to test the program.

To generate the Service Worker, run npm run sw.

Licensing

This project is available under the MIT License.

You can’t perform that action at this time.