If you’re looking to drive Android app discovery and downloads from your website, you have likely considered using one of the app store badges that can be seen everywhere.

No, not the one from Apple (unless your app is also on the Apple Appstore). Android app store badges! There are in fact a lot to choose from.

There is a small quirk though – each app store that provides a badge creates a different sized image (and sometimes no image at all, but dynamic content).

And then there’s the clause of mutually assured annihilation: most of the app store branding guidelines require that their badge be “as big or bigger” than any other badges. At least they don’t all require that their badge be on top…

Why multiple Android app store badges?

As you might know from reading my posts on my research on other Android app markets, I put a bit of effort into pursuing Android markets outside of Google’s offering.

I want to make sure potential customers of these markets can find my app, so it’s important to make them aware that my app is available for their chosen Android device or platform!

Following the app store branding guidelines

No, there is probably no secret police tracking down offenders, so maybe I’m being overly cautious. However, I just plain don’t like the look of mismatched images. I want my app page to look good, not like I just dumped some links and images on it.

So, I need a solution that works for all of my apps, with minimal fussing every time. I chose to resize all images to match each other.  Read on for some details.

Google Play has a badge generator, and if that’s your only market you’re done. However, if you want to put other badges up side-by-side (or above and below), you’ll need to do some extra work to make it look nice.

Amazon also has badges, as does Nook and SlideMe (but you’ll need to log into get those resources). Other app stores have done the same, and some get creative with their promotional materials.

Update January 2013 – Amazon updated their badges.

I am not interested in running a custom campaign right now – Just want to put a few badges up on my app page and get back to writing apps.

Basically, I:

• Captured the original sizes of all of the badges
• Calculated a scale factor needed to make the width equal that of the smallest one – Google Play’s badge
• Calculated the correct height for each badge to keep the same aspect ratio

Note that I had to make two adjustments:

• Amazon had dead space around their icons. I cropped that and re-saved the image.
• SlideMe generates their icon dynamically. I don’t want to add more javascript to my page just for a badge, so I captured the image.

The end result was that I mashed some HTML div tags into my product page to make a stack of badges, each the same width (using the width and height attributes to rescale images if necessary).  You may find it easier to just resize the images, so nothing fancy needs to be done for your web page.

Yes, you loose some points in Google’s PageSpeed analysis if you rescale images on the fly. That’s not a big deal for many sites, but high-traffic sites should use pre-scaled images and a CDN (content delivery network) to speed up the user experience. That’s way outside the scope of this post, though.

Here’s the end result.  It could use more polish, but the buttons look well enough matched for now:

Hmm, the color difference isn’t perfect.  Maybe I should move Nook down one spot…

Conclusion

For my purposes, I’ll save my chunk of HTML code and copy in new links and alt text for future apps – that way I don’t need to redo this effort, or go in to the ‘marketing materials’ section for each app store for each app I build.