5

I'm making a launcher icon in Inkscape, with my document size set to 512x512. I'm trying to adhere to Material Design standards which state that the Tinted Edge and Shaded Edge of the product icon should be 1dp.

Since I'm working with a 512x512 document, I made them 11px which would make them 1px when exported to 48x48 (MDPI launcher size), but, when exported to 512x512 for the web icon, the tinted/shaded edges are much larger than other app's icons.

Here's an example icon by me and also the Search app's icon side-by-side. What am I doing wrong? What density is the 512 icon? Is the shaded/tinted edge not actually 1dp?

Example

4

If I remember correctly (no guarantees there), Google doesn't just use scaled versions of their icons, but responsive icons. Meaning they optimize their icons for each size.

So in your case, you could adapt the top edge for each size before exporting. For example, you could make the top edge 1px in the smallest sizes, 4px in medium sizes, and 6px in the largest. (In other words, the edges become incrementally smaller compared to the overall size of your icon). Granted, this is a bit more work than just exporting at different sizes, but it gives you more control over what your icon will look like.

Of course, Google uses the 512x512 icon in different places, and scales it accordingly. So the danger could be that the top edge becomes all but invisible when they scale down your icon.

For more information see this article

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.