6 Golden Rules for Effective Game Icon Design

This week on the Podcast

Your icon is arguably one of your most important assets when it comes to your App Store presence. It is usually the first opportunity to impress potential players and therefore makes it critical to your overall branding.

So let’s talk about effective game icon design.

When speaking about icons, there is without a doubt some best practices that should not be ignored. Often when we think of icon design, less is usually more.

The icons main purpose is to fully encompass and capture the very essence of your game.

Try to use a single element and keep it simple

Games like Monument Valley execute this particularly well. Whilst they have stunning artwork throughout the game, they focussed entirely on the character and single platform.

Another great example of the would be Canabalt. The single Pixel character running shows you exactly what to expect and what you’ll see from the game.

Monument Valley and Canabalt Game Icons
Monument Valley and Canabalt Game Icons

Choose a limited colour palette that fits

Whilst your game may be super colourful, it’s important not to over complicate your icon, try and pair back where possible.

GramGames hit game 1010 has done a great job of this. They could have chose to include many of the pleasing colours, but opted to focus on the single red cube.

They also did something similar on their massive hit Merged. The simple tricolour icon is really effective and works particularly well.

1010 and Merged Game Icons
1010 and Merged Game Icons

Avoid Using Words for Effective Game Icon Design

Using words on your icon is generally a bad idea as they’ll be particularly hard to read once the icon is scaled down. It’s also mostly redundant as the name of your app is sitting right next to it on the App Store listing.

Most bigger brands tend to either use the first letter of their company or just their logo as part of their overall branding, but generally speaking you see this rarely in the gaming categories.

The Walking Dead for Instance have chosen to use the title on their icon, as have Rockstar Games with Grand Theft Auto.

However, these are huge companies with a massive marketing machine in place, here the names and franchises themselves are instantly recognisable and quite honestly, their icons are way less of an important factor.

The Walking Dead and GTA Game Icons
The Walking Dead and GTA Game Icons

Avoid Using Photo’s where Possible

This is usually more common in the Photo & Video Categories on the App Store, where it could make more sense, but it’s still a bad idea.

Photo’s are non scalable and often will contain unnecessary details so for effective game icon design, this is a poor choice.

The only exception could be for celebrity endorsed games where it makes sense to show the Famous Star to sell the game.

The approach GLU took for example, is way better solution, here they used a realistic illustration rather than traditional photo.

Character Icon used for Gordon Ramsey Game
Character Icon used for Gordon Ramsey Game

How to Fail with Your Game Icon

Being consistent with your icon and aligning it closely to the artwork within your game, is a really good way to gel everything together. This also ensures it wont disappoint the user once downloaded.

The last thing you want, is for a user to click on your icon only to discover that your game screenshots don’t match up with the promise on your icon and is essentially a different game altogether.

Let’s take a look at an example to explain this further.

Scramble Game Icon
Scramble Game Icon

This icon doesn’t look too bad, it’s kinda lively and looks decent enough. I’m thinking it depicts the game as a 3d scrambler, dodging through traffic and maybe has off road tracks.

Going by the exciting Icon, I’m ready to download and I want to have a look at the game screenshots.

So as we can see, the game does not reflect the icon in anyway whatsoever and looks absolutely terrible.

As a potential customer I’ll be giving this a big miss, so even though the icon grabbed my attention and I clicked through to the product page, I am now feeling let down. Fail!

Of course this an extreme, albeit sadly all too common example, it does I think show exactly not what to do and something to keep firmly in mind when designing your icon.

How to Create an Awesome Game Icon and Win

Effective Game Icon Design - Downwell Game Screenshots and Icon
Downwell Game Screenshots and Icon

Downwell is a perfect example of successfully using the games art style for the icon. Devolver has produced a cohesive marketing suite that truly brings the essence of the game throughout all its assets.

Effective Game Icon Design - Supersharp Game Screenshots and Icon
Supersharp Game Screenshots and Icon

Super Sharp from 1buttonSarl have also done an incredible job of pairing back their icon and matching it to their in game art style.

The simple cut effect on the white square against the blue background, sets expectations perfectly, and once inside the App Store product page, it really feels solid and fully connected.

This is definitely one of the factors that the App Store team look for when viewing a game and considering it for a feature place, and especially a key ingredient for snagging a banner feature.

Effective Game Icon Design - Limbo Game Screenshots and Icon
Effective Game Icon Design – Limbo Game Screenshots and Icon

Limbo is by far one of my all time favourites and its no surprise Limbo is continually re-featured time and time again and has truly earned its place in the App store hall of fame.

Apart from being a great game, Playdead did an absolute stunning job of capturing the games atmosphere and intrigue, then wrapping it all up in a shockingly simple icon.

The Importance of Scalability

So it’s super important when designing your icon, to ensure that all testing should be carried out by viewing the smallest sized version.

Although your icon may look stunningly great at its largest resolution, the reality is that your customers will only ever see the icon on an iPhone or iPad.

There are various ways to do this but one simple way is to head over to AppSparky.com.

If you’re an Academy Member, Game Icon Tester Pro is included in your membership.

This website was actually built by us for this very purpose. Once your icon is ready, you simply either drag it directly onto the ‘upload icon’ button, or open up a finder window to browse for your icon image.

This will take a little while to process and your icons must be in either .png or .jpg format.

Once the upload is complete you will see your icon displayed. As you scroll down the page you will see;

  • Large size icon displayed on different background shades.
  • How our icon will look on the App Store product page on both iPad and iPhone.
  • The homepage of both devices, in the Category Section of the App Store.
  • How it will appear in the Top Charts section of the App Store.
  • How it will look on the Homescreen.

You can either drag one of your icons directly onto the upload icon button, or simply click the button and that will open up a finder window for you to browse.

Uploading icons does take a little while to process, and your icons must be in either .png or .jpg format.

The first 3 views will give you an indication of a large size on different background shades. Underneath you’ll start to see the more relevant sizes, the first one being how your icon will look on the App Store product page on both iPad and iPhone.

You’ll also see the homepage of both devices, the Category section of the App Store, Top Charts section and finally on the App Store homescreen.

Getting Feedback for your Icon

Getting early feedback on your icons is also a great way to see how effective your design is looking. Facebook can work extremely well for this, we do this everytime before launching.

Whilst you can post to any game or Developer Groups you may belong to, I wouldn’t rely solely on these as they are obviously filled with other developers who are generally not your target audience.

We always post to our Company Facebook Page, you can also use your personal profile too and this will attract more of a widespread audience.

You may want spend $10-20 boosting the post if necessary and run it until the boost runs out. If you’re familiar with Facebook ads, you could also use advanced targeting to really hone in on your ideal demographic.

There are also sites where you can go way deeper for really detailed stats such as ;

Optimizely.com
Storemaven.com

These do tend to be quite pricey and I’ve never used any of these personally, as I found Facebook works well enough to see if we’re on track or not.

So do not under estimate the value and importance of your icon when pitching, especially to Apple.

Although I have no firm evidence on this, it is said that the App Store team will take all the Icons from the games that have a chance for a feature place that week, and line them up side-by-side.

They begin to discard any that do not meet their standards, or that simply do not stand out enough to be noticed.

How much, or if any of this is true, I’m not sure. But if we put ourselves into the shoes of an App Store Editor once again, this doesn’t sound too unreasonable and a pretty logical way of doing things.

Once a week they’ll have to choose the line up, and games will either go in the list or out.

Although a bad icon alone is unlikely to fully hamper your chances, it should be an important part of your process. It’s one of the things that is within your power to control, and you should be heading to create a striking Icon to give you the very best chance of making the list.

From personal experience, and you’ll begin to notice as you delve deeper into your research tasks, the vast majority of featured games in any given week, will all have an extremely strong and clearly defined icon.

How to Design the Perfect Game Icon

1. Try to keep it simple and reflective of your game.

2. Focus in on a single element where possible.

3. Choose a Limited Colour Palette that fits your game.

4. Ensure your Game Icon scales at smaller sizes.

5. Avoid using words where possible.

6. Do not use actual photo’s.

7. Get some feedback if you have more than one idea for your icon and see which performs best.

Enjoying the Podcast? Why not Subscribe…

If you enjoyed today’s show, it would go a long way if you hit that Subscribe button in your favourite podcast player, it’s a great way to support the show.

Why not listen while browsing the site or when you’re out and about. You can see More Episodes of Season 1 of the Podcast Here.

Be awesome and leave us a shiny  ★★★★★  on Apple Podcasts.

Share This