3

I am creating an icon for our brand to appear on our clients sites next to the sharing options e.g. Facebook, Twitter, etc.

I cannot find a standard size for all these icons. I realise that each website might use a different size but what sizes should I provide users to download?

  • What are they downloading? The Icon? What sizes are you already using and why are those not working? – KMSTR Dec 18 '15 at 8:51
  • 2
    I feel like you're asking about two things. Q: What is the standard size for social buttons on a website? A: There are no standards. What ever fits the design is the right size. In your case, perhaps the same size as the existing icons in the client website. Q: What size should downloadable brand assets be? A: Also no standards. You should either use a size that you want the logo to be used per the guidelines and/or provide vector files, in which case the size of the logo is fairly irrelevant. – Joonas Dec 18 '15 at 9:24
  • Regarding the last A: If you want some guidance, maybe look into brand asset pages for known brands: Facebook, Twitter, Instagram, Tumblr, Squarespace, Spotify. – Joonas Dec 18 '15 at 9:25
  • Thanks @Joonas I guess if I'm providing an EPS then the sizing is up to the user. – Clinton Green Dec 20 '15 at 22:05
2

You might need to make a few versions and ideally offer a vector for each of them if you're not the one who will implement these icons/buttons on your clients' sites.

It's easy to figure the size for the other social media buttons since you can create your own custom version at any size and by downloading their logos online on their own websites. What a lot of designers do is to offer a set of icons that goes from 16px, 32px, 48px, 64px, 128px, 256px in png , and as an extra you can add the vector version (.ai, .svg) since it's for your clients and more versatile too. The height of each icon is more a concern than the width but offering a square version is a good standard.

But most of the time the default dynamic versions of social media sharing buttons (eg. like, share, tweet widgets) are offered in different styles, some more squarish and others are more like flat rectangles for example.

For the "dynamic" version you'll probably need to look on the developer section of the brand guideline for each social media; in general they have a version that now fits well with the other most popular versions.

example of social media sharing buttons and icons

If you go on the "Layout Settings" of Facebook for example, you'll see they offer you the height for each type of button.

It varies between 20 and 80 pixels depending on what version our client wants to use.

https://developers.facebook.com/docs/plugins/like-button#settings

When the size isn't written on their site, you can check the CSS of the button. For example, the small Twitter Tweet button seems to be 20 pixels height. Sometimes you can find this info in the code to embed the button too.


List for some popular social media sharing buttons/widgets and brand assets:

Facebook:

https://www.facebookbrand.com/

https://developers.facebook.com/docs/plugins

Twitter:

https://about.twitter.com/company/brand-assets

https://dev.twitter.com/web/overview

LinkedIn:

https://brand.linkedin.com/

https://developer.linkedin.com/docs

Instagram:

https://www.instagram-brand.com/

https://www.instagram.com/developer/

Pinterest:

https://business.pinterest.com/en/brand-guidelines

https://developers.pinterest.com/tools/widget-builder/

Google+

https://developers.google.com/+/branding-guidelines

https://developers.google.com/+/web/buttons-policy

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.