https://github.com/notwoods/maskable

Create and preview maskable icons in the browser!
https://github.com/notwoods/maskable

adaptive-icons hacktoberfest maskable-icons masking pwa pwa-icons

Last synced: 4 days ago
JSON representation

Create and preview maskable icons in the browser!

• Host: GitHub
• URL: https://github.com/notwoods/maskable
• Owner: NotWoods
• License: mit
• Created: 2019-08-08T03:34:00.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-08-10T05:44:57.000Z (5 months ago)
• Last Synced: 2024-12-25T13:08:34.450Z (11 days ago)
• Topics: adaptive-icons, hacktoberfest, maskable-icons, masking, pwa, pwa-icons
• Language: JavaScript
• Homepage: https://maskable.app
• Size: 2.3 MB
• Stars: 190
• Watchers: 3
• Forks: 20
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


# Maskable.app

_Preview

[maskable icons](https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/)

in the browser!_

![Demo usage](.github/maskable-demo.gif)

---

[Maskable icons](https://www.w3.org/TR/appmanifest/#examples-of-masks) 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](https://maskable.app), then preview how it will

appear on different Android launchers.

## Developing

Install dependencies:

```shell

npm install

```

Once the modules are installed, run:

```shell

npm run dev

```

This starts a development server using [Vite](https://vitejs.dev/).

## Licensing

This project is available under the MIT License.