Wondering what the best practices are for adding social media icons to your web pages? Or are you just confused about how and where to use them? If you’ve answered yes to any of these questions, keep reading for our handy guide on how to use social media icons in your projects.
The 411
Social media icons are a fairly simple concept that have really taken off in web development and design practices. Basically, they’re typically small icons that represent different social media platforms. Each icon links to the webpage’s social media presence on the icon’s corresponding platform. The concept should be pretty easy to understand. By using social media icons in your project, you’re allowing your users to be able to easily find, follow, and engage with you on social media without having to compromise design or user experience by providing basic or unattractive text links to 5 or 6 different pages and platforms.
Where to Put Them?
Social media icons can pretty much be placed anywhere you like on your web pages, but typically they aren’t included in content sections. Headers, footers, and sidebars are among the most popular locations for these icons. If you do want to insert them into the content of a specific page, the contact or about page is probably the best spot to do that.
To comply with the most common practices of using social media icons, they probably shouldn’t be bigger than 48px x 48px, while not being smaller than 24px x 24px. Additionally, the height of your icon should be equal to the width of your icon.
How to Use Them?
You’d link to your social media pages with your social media icons in the same way that you’d link to other pages using images — surround the image with your anchor tag. If you’re not sure how to go about doing that, see the HTML example below:
<a href="http://www.facebook.com"> <img src="/image/facebook.png" alt="Facebook" /> </a>
Of course, you’ll need to change the link to correspond to your actual Facebook page, and the path to the image needs to be customized to reflect that actual path to the image as it can be found on your server in relation to the source file.
Where to Find Them
Social Media Icon sets can be downloaded for free all over the Internet. A simple Google search should yield you more icons than you’ll know what to do with. Alternately, if you have any Photoshop skills, you can create your own custom icons pretty easily and quickly. Once you’ve downloaded (or finished creating) your icons, upload them to your server and you’ll be good to go.