notwoods / maskable

Create and preview maskable icons in the browser!

Maskable.app

Preview maskable icons in the browser!

---

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, run:

npm run dev

This starts a development server using Vite.

Licensing

This project is available under the MIT License.

maskable's Issues

Question: Does the image need to be that big?

When using an svg it exports an image with the size of 1024x1024px - does it make sense to have it that big?

Minimum Safe Image does not match chrome Dev Tools

Cool tool :) It would be really nice if the output image matches the "show minimum safe image" in the chrome dev tools. Notice in the following images how chrome's y value is higher:

Maskable.app:

Chrome Dev Tools:

Cannot Change Background Color

I'm having trouble changing the background color. I prefer to use color codes instead of those color pickers.

SVG Upload Problems

You can create a svg without height and width in the svg tag and most programs support that. I exported an svg from illustrator and wanted to upload it to the maskable.app. But it doesn't work. You don't see the uploaded svg.

Expected Behavior

You should be able to upload an svg without a width and a height in the svg tag. After the upload you should be able to see the svg in the preview.

OR

Show an error message, that the svg needs a given height and width in the svg tag.

Current Behavior

You can upload such a svg without height and width in the svg tag, but you can't see it in the preview or in the export.

Steps to Reproduce

Click on the editor and then try to upload this svg:

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.47 87.69">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

if you upload the following svg it works:

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="27.33mm" height="30.94mm" viewBox="0 0 77.47 87.69">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

Context (Environment)

Tested in Mozilla Firefox for Ubuntu 104.0 (64-Bit)

Preview masks don't affect the file downloaded

Export dialog broken on safari

Probably due to no support for the dialog element.

I'd also like to improve accessibility while working on the dialog updates.

maskable.app down

Add x/y/rotation controls

Warn when an icon has transparent pixels

Maskable icon aren't supposed to be transparent. It would be helpful to show some warning to indicate this.

Exporting multiple sizes

Would it be possible to add an option that allows choosing the sizes to export?

Nice tool!

In the meanwhile I'm using:

for r in 72 96 128 144 152 192 384 512; do
    convert icon-maskable.png -resize $r icon-maskable-${r}x${r}.png
done

Suggestion: Add info to initial background why it can't be deleted

I think adding a small info text like

[delete button] This layer can not be deleted as maskable icons should never be transparent

will help clear up some confusion.

I only found out because I looked through the issues and saw #9

Add export size 192x192

I’ve checked the manifests of a bunch of popular PWAs, and the ones that implements maskable icons are mainly using two sizes, which are 192x192 and 512x512, so I suggest adding the export size 192x192 as well. There are also articles mentioning 196x196, but I have yet to find any PWA using that size.

Create template files for making maskable icons

Offer some files to download to make maskable icons in different image editors.

• Photoshop
• Illustrator
• Inkscape
• Affinity Designer

Can't type numbers in the URL input

When I type numbers in the URL input they aren't typed and instead change the mask. My icon URL has numbers in it: https://perfectly-balanced.luisafk.repl.co/favicon96.png

The only solution would be pasting the URL into the input

EDIT: pasting doesn't work?

Need to preserve tarasparency in png

Now the application forces you to use a solid color as the background, although the icon is made with transparency

Add export sizes

hi
please support 152x152 and 144x144
thanks

Icon is generated in a wrong size

My icon was generated as 117x117 instead of the requested 196x196. I used a 40% padding and kinda expected it to fill up.

Exported image is incorrect when X and Y are not 0

When changing X and Y, the Layer preview to the right is not corresponding with the Maskable icon preview on the left and when exporting, the downloaded icon doesn't correspond with either of the previews.

Add undo support to editor

We should support undo-ing the previous action in the editor, ideally when Ctrl-Z is pressed.

• Sliding around colors or ranges should only track the initial and final value
• The stack should be as large as possible and track changes across layers

Feature: Add option to view a Samsung like mask

Samsung makes up a large portion of Android devices and has a unique icon shape. It would be useful to be able to preview this icon shape in the viewer

Clicking on a demo image makes the upload button not work

Clicking on a demo image at the top takes you to something like: https://maskable.app/?demo=demo/spec.svg

Which makes "Open icon file" not work:

Also, from this screen, there's no button/navigator to go to the editor (https://maskable.app/editor)

Make more distinct button for switching between editor and viewer

Option to show all masked icons at the same time

I think it would be nice not having to click through all options

Show UI for getting icon from URL

Currently https://maskable.app/?demo=<url> can be used to load an image from a URL, but having some UI for this would be nice too. Ideally just use a form so no JS is needed.