Designing Game Icons
Designing Game Icons
Game icons are square images (512 pixels by 512 pixels) that are meant to convey the meaning and gameplay of a title at a glance. While a game icon can be anything related to your game, we have compiled a number of best practices to help game creators produce a professional, eye-catching icon that looks great and attracts players.
These guidelines will help you better showcase your game on the Roblox Games page.
Your icon must be a square, with maximum dimensions of 512×512 pixels. Your icon will be shrunk down and used at different resolutions throughout the site. An example of this is the Games page, which will display your icon at 128×128 pixels. We recommend you save your icon at multiple sizes to see how it looks.
Your game icon is the first experience many potential players will have with your game. It’s a very important marketing vehicle. Picking the right image, while removing unnecessary details will help it get noticed.
Below are mocked-up images of games that have been tuned and polished to capture the vibe of a game.
- The top-left icon represents a fast-paced game that you can enjoy with multiple players. The action is well framed while showing more tracks that can be enjoyed in the background.
- The top-right icon represents a slower-paced role-playing game with a beautiful, futuristic world to explore with friends.
- The bottom-left icon represents a fast-paced, multiplayer action title with lots of tension in tight spaces.
- The bottom-right represents a cozy winter home where players can explore, hang out, and roast chestnuts by the fire.
Picking the right color for your game icon is an easy way to convey the core vibe of the gameplay.
Highly saturated colors make the game look cartoony, while lower saturation makes a game appear more realistic and refined.
Images using bright blues will evoke a calm sensation and possibly reinforce a fantastic or supernatural setting. Adding darker blue values to an icon will give uneasy feelings of scariness and set a fantastic mood as well.
Red and Yellow Tones
Red values are associated with passion and comfort when mixed with lighter values or some blues. On the other hand, mixing red with yellow creates an exciting, fiery experience, and can also be that of horror when put together with darker tones.
Greens and browns are earthy colors, usually associated with an organic experience. They’re perfect for a mountain climbing or golf game.
It’s important to showcase your game icon in its most brilliant, viewable state. Having an image with poor contrast will remove visual information in the image, and possibly cause your icon to lose information for people on varying types of displays.
Fonts are important – they can even become part of your game’s identity.
- All-lowercase fonts are nice and pleasant while ALL-UPPERCASE fonts are more direct or appear to be shouted.
- A bold font is usually used for a stronger emphasis and to attract attention.
- An italic font is used for thoughts directly taken from someone, such as, “I wonder if this works?,” or to showcase speed.
- Font weights and sizes can be a useful way to create game icons or any image with supporting words.
- Selecting the correct font for your text will also make the overall composition of icon look more appealing to a player.
- There are a lot of references and direction on font selections online. It is encouraged that developers dive into this topic further if interested.
A treatment, or filtering pass, is a global effect applied to an image to give it a specific final look. These effects can evoke the right observable feeling about the image.
Deciding whether your game icon needs a global treatment is a personal decision that can influence players’ recognition of your game. This can also be applied to screenshots and could possibly become part of your game’s core visual identity.
There are a few practices game creators should avoid to make sure their game icon meets Roblox’s standards and terms of service.
A. Roblox logos
We recommend that you create your own identity in your game icon, game title, and game thumbnails, rather than drawing on Roblox’s assets. This will help distinguish your game from the competition.
B. Existing company or product logos
Do not use other product logos or company names in your game icon. You not only run the risk of having to remove the content, but lose a chance to create a unique identity for yourself and your game.
C. Detailed text information
The icon is meant to be a graphic that conveys the concept of your game at a glance. Place text-heavy information about the latest game updates using your game description and thumbnail images. A picture is worth 1000 words. Keep that in mind as you are creating your game icon.
D. Advertisement tags
The answer for this question is essentially the same as the one above. The icon is used to display your product, the “games details page” is the appropriate place to sell audience on the sales/specials/etc.
E. Ambiguous graphics
Ambiguous graphics are just that: hard to understand. Without a connection to the game a player doesn’t have a connection to this, nor do they know what it means, so what benefit does using that real estate for the icon?
F. Large text slogans
Text this large covers the graphic and thus breaks the graphic nature of an icon. This text is often most appropriate in the “game details page” as well. This will also cause the player to pause and read instead of click on what looks interesting. A picture is worth 1000 words. Keep that in mind as you are designing.
G. Writing description of the game on the icon
Creating too much text description in your game icon which will become completely unreadable if the size is reduced to the 128x128 pixels. Before uploading the new game icon make sure that the text can be read easily at 128x128 pixels. Again please consider A picture is worth a 1000 words.
H. Rounded corners and drop-shadows
In contemporary designs, the use of a round shape or item are viewed as “buttons or interactive” trigger items, whereas angular shapes are defines as text boxes or containers. Shadows are also used to support this functionality. Interactive round surfaces are elevated above any linear containers to appear click-able.
Placing a frame around your image will possibly limit the versatility as well as create more noise within the “games page”. Also Roblox’s new global visual language is now defining rounded shapes as items that can be interacted with. While sharp corners are static elements that do not have any active elements. With that in mind the game icon is static, but surrounded by a rounded container which in its entirety is interactive.
Have fun with your game icon. Follow these best practices, and remember to experiment with different versions to find out what works best!