Convert icon to android icon

MakeAppIcon on your mac.

Faster. Smarter. More organized than ever.

MakeAppIcon powered by Oursky

Generate App iOS and Android Icons of all sizes with a click!

Thanks for interested in MakeAppIcon Desktop!
It will be available very soon.

Best app icon resizer for
mobile developers.

Optimized for both for Xcode and Android Studio.

MakeAppIcon Desktop for Mac and Windows

MakeAppIcon.com has always been the best icon resizer for mobile app developers and designers.

With the desktop app, you can:

• Save upload time to MakeAppIcon Server
• Generate Android and iOS icons in bulk
• Preview icons
• Simple yet easy to use interface
• *30-day money back guarantee

Also available on App Store

*Priced at $14.99 because Apple takes commission

This icon resizer optimizes your icon designs into all formats needed for iOS and Android mobile app!

Generate icons that are required in an iOS and Android app

Quick preview of your app icon on the devices

Auto enhancement for the smaller icons!

• About
• About MakeAppIcon
• Desktop App
• Other Tools
• Privacy Statement
• Contact Us

• Apple Developers
• Use icons for iOS app
• OS App Icons for macOS
• App Icons for watchOS
• App Icons for iMessage
• tvOS App Icons
• Import into XCode

• Android Developers
• Use icons for Android
• Import into Android Studio

• Web & API
• Use icons for mobile web app
• API

Proudly powered by

Design and build award-winning apps

Besides MakeAppIcon,
We also build your web / mobile app with passion.

Drop us a line and we will get in touch with you soon.

Источник

Android Icon Sizes Made Simple (4.1)

This article has now been superseded by the latest Lollipop 6.0 Android Icon Size Guide. Please click on the image below for the latest information.

What are Android Icon Sizes?

It is a simple question but even Android, who provide better documentation than most, seems to make you want to work a little for the answer. Fear not, I have done the work for you!

Android Icon Sizes – App Launcher

What sizes do I need for Android App launcher icons? If you want to design your own or commission a professional to design your custom icons, you really need to know the right sizes.

Quick answer: 48 px, 72 px, 96 px, 144 px, 192 px & 512 px (for Google Play Store).

What about the Google Play Icon?

Google play requires a single additional version of the Icon in 512 x 512 pixels.

Understanding Android Icon Sizes

Android approach their Icon Size documentation slightly differently to other platforms, concentrating on different pixel densities rather than the simple facts we want. However, it is worth taking a moment to understand why they use this approach.

As technology has progressed, manufacturers have brought out hardware with ever increasing resolutions and pixel density. An increase in pixel density or dots per inch (dpi), basically means more image information can be displayed with.

• MDPI – Medium Pixel Density – also known as the ‘Baseline’
• HDPI – High Pixel Density
• XHDPI – Extra High Pixel Density
• XXHDPI – Extra Extra High Pixel Density

Note: Android also supports low-density (LDPI) screens, but you normally don’t need to create custom assets at this size because Android effectively down-scales your HDPI assets by 1/2 to match the expected size.

Need an expert to design your Android icons?

We will create a design you love, that also converts more customers.

Android Icon Sizes – User interface

All Android icons follow the same scaling rules, so when creating your icon files you must make 5 versions to cover all the platforms available. The table below shows the pixel densities and icon sizes for the different types of user interface icons used by Android:

640 dpi

MDPI (Baseline)	HDPI	XHDPI	XXHDPI	XXXHDPI
Scale	1 x	1.5 x	2 x	3 x	4 x
DPI
App Launcher Icons	48 px	72 px	96 px	144 px	192 px
Action bar Icons	32 px (24px inset)	48 px	64 px	96 px	128 px
Small / Contextual Icons	16 px (12px inset)	24 px	32 px	48 px	64 px
Notification Icons	24 px (22px inset)	36 px	48 px	72 px	96 px

Whilst the user interface icons follow the same scaling rules as the app launcher icon, they also have some additional display rules of their own:

Android Action bar Icon Sizes

Action Bar Icons require a file size of 32×32 pixels at the baseline size (MDPI). However, the image itself must be no more than 24×24 pixels centred within the Icon file.

The Icon Design must be single colour #666666 with a transparency set to 60%

Android Small / Contextual Icon Sizes

Action Bar Icons require a file size of 16×16 pixels at the baseline size (MDPI). However, the image itself must be no more than 12×12 pixels centred within the Icon file.

The Icon Design must be single colour #666666 with a transparency set to 60%

Android Notification Icon Sizes

Action Bar Icons require a file size of 24×24 pixels at the baseline size (MDPI). However, the image itself must be no more than 22×22 pixels centred within the Icon file.

The Icon Design must be single colour white, #ffffff.

Android’s own icon guide can be found here:

I hope this Android Icon size guide has been helpful. Please let me know if there is something else you would like me to add or elaborate on. Thanks!

Need Android icons?

Let’s improve your sales with app icons that convert

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

30 thoughts on “Android Icon Sizes Made Simple (4.1)”

Thanks for the reply.

“Note: Android also supports low-density (LDPI) screens, but you normally don’t need to create custom assets at this size because Android effectively down-scales your HDPI assets by 1/2 to match the expected size.”

I’ll add that to the Blog post.

I hope that helps.

Hi guys. Is it possible to set the height of the app icon to match the height of the action bar?

Thanks for posting. I don’t work on App development, just design to spec but I believe if you try and use larger icons sizes in the Action bar (or anywhere else) Android will just scale them to the standard size.

So I would say a tentative no but an App Developer may be able to help you more.

Sorry but I don’t get the density-resolution-dp-dpi thing. So if I want to support all densities, I should make 5 files – 48X48px/72X72px/96X96px/144X144px/192X192px.

That’s fine, but what resolution in pixels/inch should I input?
Is it 72 for all of them as per default? Or is it 160/240/320/480/640 pixels/inch?

I really don’t get what values for width, height and resolution to input for each file in Photoshop new file window!

Anyone willing to explain and help?

I’ll keep it simple, just use 72dpi in Photoshop, along with the file dimensions in pixels.

Clear and simple. Thank you!

Thanks for this! Would be nice if you could include the inset/un-padded dimensions in your table too, e.g. for notification icons.

Also, the ‘Iconography’ part of the Android design docs says that notification icons should be white, not #666666. I’m not sure about transparency, I’ve taken a gamble on all pixels being either white or transparent and it looks OK.

Thanks for the notification colour correction, post updated. 🙂
If I can fit the inset dimensions in the table I will.

Nice and simple and extremely useful.
Thank you very much!

I wrote a command line tool which can convert icons automatically to the right sizes for the different screen densities and which also saves everything in the right directories – it even supports the version structure of androids res/ folder.

The main idea is to have one SVG file for each icon. You do not have to have different SVG files for the states (e.g. enabled and disabled) but you can use icon-converter to change one or more colors in the icon.
Having all the SVG’s, you can simply write a .sh script to “compile” all the icons at once, meaning that icon-converter creates all PNG’s with the given settings (density, colors, scale, even versioning is supported, renaming files so that you can find them after compiling). The PNG’s are then stored directly in the right drawable-directories. E.g. when you change an icon which has different states, you only have to execute your script once and do not have to export PNG’s by yourself.

Please have a look at this tool, there are some examples online:
iconconverter.android-msapps.com

It runs on Linux and Windows.

Thanks for that, sounds useful. What kind of sampling algorithm does it use?

The conversion from .SVG to .PNG is done by the command line tool “convert” (ImageMagic).
On top of this I implemented the “android rules” and the recoloring.

Источник

VectorDrawable Adaptive Icons

So the Android O APIs are final — API 26 is here! That means you can start compiling with API 26 right now (and you should really always compile with the latest SDK) as well as work towards targeting API 26.

One of the first things you should consider working on is providing an adaptive icon — an icon made of a separate background and foreground layer. This new format provides a consistent shape across all icons on a device and will also allow launchers to add visual effects by animating the background and foreground separately. This is really how you make a good first impression for users with Android O devices.

With the system handling the outer edge shape and its shadow, adaptive icons give you a chance to re-evaluate how you build your app icon. If you’re able to build your app icon as an SVG/vector image, consider avoiding bloating your app with more PNGs for the background and foreground and take advantage of VectorDrawables for your adaptive icon.

Note: there are valid cases where PNGs are the correct choice for your app. Talk to your designer before trying to force everything into vector drawables.

I’ll walk you through what it took to convert Muzei’s current icon into an adaptive icon.

Note: you do not need to target API 26 to provide an adaptive icon — only compile against it. Users will benefit from your work even as you work through other behavior changes.

The basics of adaptive icons

By placing it in the mipmap-anydpi-v26 folder, the resource system will use it in preference over any files in the other dpi folders (exactly what you want, since this file is replacing all of them) and that it should only be used in API 26+ devices.

You’ll notice that the drawables are in the drawable directory. This is because I’m using vector drawables. If you are using PNGs, this should most definitely be in mipmap . Another option is use a color resource for your background:

Round icons

For those of you with an android:roundIcon , you must keep that attribute to continue to support API 25 devices. Devices with round masks will use your custom roundIcon if available, but it is strongly suggested to use a single adaptive icon for those devices as well (this ensures you get the standard shadow, support for visual effects, etc).

I find this easiest by creating an alias resource. You’d keep your ic_launcher_round images in the res/mipmap directories for API 25 devices, but add a file in your values-anydpi-v26 folder:

Building a VectorDrawable Background

The background is a great place to start. Being a full bleed 108 x 108 dp image, there’s not much special about this one:

Just keep in mind that due to the masking of the image, users will usually only see the middle 72 x 72 dp.

Building a VectorDrawable Foreground

The foreground image, on the other hand, offers a unique challenge.

First, you have to handle creating the foreground shape itself. It is still on the same 108 x 108 dp artboard, but the ‘safe zone’ of what you know will be shown is only a middle circle of radius 33 dp — don’t put anything critical outside of that part!

Where I initially got stuck was when it comes to the traditional 45º material cast shadow that the foreground also needs to include. Normally, this would be where you’d have to break out the PNGs to get that perfect gradient. But gradient support was added to VectorDrawables back to API 24!

Getting gradients working, however, required a bit of research. The VectorDrawable docs point out the ability to use a GradientColor , but where to find a good example? On StackOverflow of course.

Now, Roman Nurik, the maker of the original Muzei icon, had made a fantastic SVG version of the launcher icon including the shadow as a
element in the SVG. I won’t pretend that I know how he came up with the correct values — talk to your local designers or read the material design guidelines for product icons a couple hundred times.

But what it became was a res/color/ic_launcher_shadow.xml file that looks like this:

You’ll note all of the attributes from the GradientColor documentation available to customize this to be just right.

Note: As of Android Studio 3.0 Canary 3, Android Studio flags gradient as an error (‘Element gradient must be declared’). It still works.

Now, we can refer to our gradient color the same way you’d refer to a color: with @color/ic_launcher_shadow in the VectorDrawable . In Muzei’s case, this means that the foreground background consists of two paths: the shadow and then the shape below it:

Note: this is also how you’d add a finish layer to your icon — a separate gradient above your shape as explained in the material design guidelines.

All the benefits, none of the APK bloat

By taking advantage of API 24’s addition of gradients to VectorDrawables, we can build well designed VectorDrawable adaptive icons that have the correct material shadows on foreground elements without resorting to adding even more PNGs into the app.

If you want to see it in action, join Muzei’s open beta, then download Muzei on an Android O Dev Preview 3 device and check out the commit that added the adaptive icon. (Although unless you have the superhuman ability to visualize VectorDrawables like Nick Butcher, you might find the full commit doesn’t add much over the code we already covered.)

For further information, you might want to check out Nick Butcher’s excellent series of articles on adaptive icons.

Источник