Advertisement


Sizes for icon for social sharing


Question

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?

2015/12/22
1
3
12/22/2015 4:05:00 AM

Accepted Answer

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

2015/12/22
2
12/22/2015 4:51:00 AM