Badge and Icon Creation

Intro

Badges and Icon are used across the site, and are a good way to represent the game and achievements in the game.

Badges are the images for the achievements of a game. They are stored on site in the following manner and place: i.retroachievements.org/Badge/00136.png; the number coincidences with the badge ID found in the Achievement editor.

Icons are stored on the site in the following manner and place: i.retroachievements.org/Images/000705.png. They are stored in the same folder as other game images such as the game box and game screenshots.

Badge Format

When uploaded, your file is converted into the following:

• 64x64 32-bit colour PNG. Example:

  

• 64x64 greyscale and blurred PNG. Example:

  

It's not entirely important how the file is formatted before uploading as long as it's square. Naturally it is important not to break any copyright law, or upload anything vulgar, offensive or pornographic, with the possible consequences of being cautioned, potentially reported and potentially removed from RetroAchievements.

Icon Format

When uploaded, your Icon images are reduced to a maximum 96x96 32-bit colour PNG. If you upload an Icon that is smaller than 96x96 the image uploaded will retain it's original size.

The same is true for badges, except badges maximum size is 64x64. (Profile images maximum is 128x128.)

Places and sizes Icons are displayed:

• On leaderboards: 96x96
• Game Pages: 64x64
• User Pages: 48x48
• Currently Playing and Global Feed: 32x32

As with badges, the actual image is not being resized. The image is scaled by the browser to the display size. If you use Android or increase your browser zoom you will see the images more clearly.

Guidelines and Tips

• Uploaded images for badges and icons should be square (have the same X and Y dimensions), otherwise the resulting image will be distorted and ugly.

• Non-interlaced PNG format recommended, avoid using a transparency layer as it will come out in the end with a flat white box.

• It's recommended to make Badges at 64x64 for sharpest clarity. Icons should be made in a way that the subject is clear even when sized at 32x32.

• Badges should refer in some way to what the achievement is about - i.e. a picture of the boss, level or collectible that the achievement requires the player to get to.

• In the cases of low-resolution games' achievements, it can be hard to get a badge looking good without it looking blocky or blurry, in these cases the blocky look is often preferable, so that the images have a retro feel to them.

• You can make each badge have little rounded borders like an actual badge or some extra spiky corners for emphasis or a king's crown for difficult ones. Its your design. It should visually represent the achievement itself, or hint at the location in the game for secrets.

• Matching to the game's art style works well. Google Image searches for "Sprite Sheets" is another useful tip to include some game art.

Changes and Demotions

As the site does not in most cases have a permanent changelog/git-style-rollback/wiki-style-rollback for all actions taken on a set it's recommended that when a developer makes changes of any kind to a set that they make a note of it in the forum for that game to help keep everything orderly so that in cases when rollbacks are appropriate it is much easier to do them.

In relation to badges, it's easiest to just reference the old and new badges as img links:

• example: [img="http://retroachievements.org/badge/01234.png"] -> [img="http://retroachivements.org/badge/56789.png"]
• make sure to capture the old badge ID from the Achievement Editor before uploading the new badge
• the new badge ID will appear in the Achievement Editor after uploading it.
• both values can also be captured from the web site, but you have to copy the image links as the hover link is for the achievement.

Here is a perfect example of how to properly back up changed badges.