Badge and Icon Creation

Intro

Badges and Icon are used across the site, and are a good way to represent achievement 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, 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
  • 64x64 greyscale and blurred PNG

It's not entirely important how the file is formatted before uploading, but as long as it's square, the file will upload and be converted pretty easily. 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

Same thing as with badges, the actual image is not being resized only 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 should be square, as an equal number of x & y, 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.

In relation to badges, post in the Game's forum page one of the following: - leaving an old copy of the badge in the game thread (example: [img="http://retroarchievement.org/badge/1234]) - annotating the old badge ID (number displayed on the badge image's URL)

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

is recommended, to help keep everything orderly so that in cases when rollbacks or change backs are appropriate it is much easier to do them.