Recommended specifications for badge images
When creating a badge(see Creating badges as an issuer), you can upload an image from your device that you've already created using a graphic editor or use the Badge studio to design an image. If you're planning on uploading your own images, here are some guidelines on how to construct successful images to use as digital badges.
Badge image file formats must be either:
- PNG
- SVG
Image aspect ratio:
Whether PNG or SVG, images should be square (equal width and height).
For PNG, we recommend 400 by 400 px. Canvas Badges will attempt to resize your image to 400x400 if you upload a PNG larger in either dimension. For SVG, please ensure the image has a defined viewbox that is square.
Backgrounds:
Badges are portable beyond Canvas Badges to wherever earners take them. That means they may be displayed against a wide variety of background colors. While Canvas Badges most frequently places images on a white background, this isn't always the case. So take care not to leave a white background on your image, because even though this will usually look fine in Canvas Badges, it may not be visually acceptable on recipients' job profiles or other places.
Visual elements and typography:
Badges are sometimes displayed at a small size. Preview your image at around 90x90 device pixels to ensure that elements are not too unclear. This is around the smallest size that applications commonly embed badge images on the web.
Badge images are an important messaging channel for your organization. Earners use their badges as talking points in conversations about their achievements. When badges are on the web, they spread the word about the learning opportunities at your organization. Put your best foot forward by carefully constructing your badge images and using them as worthy representatives of your brand.