New Google Play badge doesn't get the size right

Question

Today I realized the old link to the "Get it on Google Play" badge (https://developer.android.com/images/brand/en_generic_rgb_wo_45.png) doesn't work any longer (Android devs, update your websites!) and I checked for the new version here: https://play.google.com/intl/en_us/badges/

I changed my code accordingly to

   . . . src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge-border.png" height="45" />

However, it now doesn't line up with the App Store icon any more. The google icon is now at about 37px whereas the App Store icon is, just like I set it, 45px in height.

It appears like the padding around the white border is "hardcoded" into the picture. Check my attached pic for the dimensions.

Why did Google have to change everything again? Also, why can't it just work like it did before? Do I really need to put it at like 55px height in order to make it appear like something like 45px? That sounds like awful code to me.

Edit: forgot the picture

Attract

did you generate the badge with the border set to none? Or the border included ? – Keys

With the border being included as the App Store badge also has a white border and I want both badges to look similar – Attract

that's your problem, generate it without the border included and try again. The border gives it the extra space which you don't want. – Keys

But how do I add the border then? As far as I read the google guidelines I am not permitted to change anything in the icon file. I don't want to give up my App Store border as the background of my website is already very dark – Attract

Answer 1

Note: the image was changed by Google since this answer was written, it's therefore no longer a copy/paste solution.

If you use the correct source image without border included it's trivial to style it correctly with correct height:

body {
  background:black;
}
img {
  border:1px solid white;
  border-radius:6px;
  box-sizing:border-box;
  height:45px;
}
span {
  background:#888;
  display:inline-block;
  height:45px;
  vertical-align:top;
}

<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png">
<span>Reference block of 45px high</span>

Shaunda

Thanks a lot for the answer man but didn't it say somewhere you can't change the appearance of the badge? Or does this only apply to edits within the badge? – Attract

You're not allowed to distort or modify it. Manually adding the border that is already there isn't "distortion". – Shaunda

@NielsKeurentjes The current image at that URL has a border in it. – Hairstyle

@BradPitcher Yep, Google seems to have changed it again. There is now a big margin around the image and no way to remove it using the generator. I ended up just adding the same margin to the app store badge to match Google's size. – Waller

@clearmend: here is a question for you: #47591071 – Cattleya

The badge appears significantly smaller than the reference block in this answer – Treasure

@Treasure as stated in the comments above you the image upstream was changed since I posted my original answer. I can see in the history that you downvoted the answer for that, effectively punishing me and my 4 year old answer because Google updated the actual image. – Shaunda

Answer 2

Because Google Play includes padding/white-space in the image, but Apple does not, we have to manually resize the images to appear the same to humans.

As of 2023, this is how I've sized my buttons using tailwindcss:

{/*Generated using https://tools.applemediaservices.com/app-store/*/}
<a className="inline-block h-16" href="https://apps.apple.com/gb/app/update_this"><img className="p-2.5 h-16" src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1669593600?h=626b1333341609700e14944b609ea886" alt="Download on the App Store"/></a>
{/*Generated using https://play.google.com/intl/en_us/badges/*/}
<a className="inline-block" href='https://play.google.com/store/apps/details?id=update_this'><img alt='Get it on Google Play' className="h-16" src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/></a>

Example

• https://dirr.orth.uk/ - a website that is a work in progress, but has the badges 😅
  • Uses a modified version of the code above, to make the buttons larger and use local files instead of external sources. See the source code

Screenshots

Screenshot of badges zoomed in

Screenshot taken using Firefox with it's rulers:

Notes

• Still not perfect, because there is some weird effects because the App Store badge has a smaller border than the google Play border.
• I went with Column because the badge have different widths

Selfexpression

Thank you, I was struggling with this. Inspecting your website has helped me get my badges to look much better. Much appreciated! – Known

Answer 3

In the section: badge guidlines: They said: There must be clear space surrounding the badge equal to one-quarter the height of the badge. So you can't modify the padding on your self.

https://play.google.com/intl/en_us/badges/

Exorbitance