Icons are everywhere. There’s no avoiding them.
Your business’s Twitter/Facebook/LinkedIn/Instagram/Google+/Pinterest/YouGetTheIdea profile picture (avatar) is probably a simplified, square-ish version of your logo (an icon). These little icons represent your business and brand, but their use goes far beyond social media.
One use for icons is for bookmarks/favourites.
Your website has lots going on behind the scenes, and one of those things should be a bookmark icon. Or a series of bookmark icons…
What is a bookmark
Bookmarking has got pretty complicated recently, so let’s go back to what it was originally. Or what it is at its essence.
When you come across a website that you want to refer back, or you visit a website regularly, it’s good to be able to bookmark it so that you don’t have to Google it or type in the address each time you want to go back. The easiest way to do this is to add it as a bookmark or favourite.
Finding your bookmark
You can rename the bookmark you saved in your web browser so that it’s easy to pick out, but identifying a bookmark is much easier when it’s an icon. That’s where bookmark/favourite icons started out.
The usage of bookmark icons quickly spread. They started to appear next to the website address in your web browser’s. Certain browsers started to use them next to the page title in the ‘tabs’ at the top, so that you can pick out the tab you’re looking for easily.
Apple allows you to save/bookmark a website straight to your iPhone/iPad’s homescreen, as if it were an app. Just tap the share button (the one that looks like box with an arrow coming out of it), then tap the ‘Add to homescreen’ button. This is a similar idea to ‘pinned sites’ in Windows.
Your web browser is a smart piece of software. It knows which websites you visit most often and will offer you ‘suggested’ sites. Every browser handles this slightly differently: some use a tiny screenshot, but others use an icon to represent each site on their ‘speed dial’.
I’m sure there are lots of other bits of software that use bookmark icons. RSS readers like Reeder,
Lots of places
Much like the many different ways there are to give links on social media the right information, there’s no ‘standard’ way of displaying an icon.
Different web browsers (Internet Explorer, Safari, Chrome, Firefox, Opera, etc.) expect different sizes and formats of bookmark icons, as well as different methods of identifying the right bookmark for them.
To make matters worse, different operating systems (Mac, iPhone/iPad, Android, Windows 7, Windows 8, etc.) can have pretty much any of the above web browsers installed on it, adding more complexity.
Then there’s the pixel density of the device you’re using. For example, the iPhone 6 Plus has a different density than the iPhone 6. More scenarios for you to consider!
Bit of a minefield
A website that doesn’t send a bookmark icon to the browser to display in its tabs or address bar looks a little bare, somehow. A bookmark icon doesn’t just jazz up an otherwise barren web browser, it reassures visitors that they’re in the right place and adds that little bit of extra brand reinforcement.
Apple icons, Windows ‘pinned sites’ icons, Opera ‘speed dial’ icon are all really useful too, but not quite as essential. Adding that level of detail to your website can often be the icing on the cake for visitors, showing them that you really sweat the small stuff. If someone does add your site to their iPhone’s homescreen, though, it would be good for them to see your icon in all its glory.
Speak to your web designer about how to get a full complement of icons.
Never miss a resource
Do you have a website? Not the technical type? Join to receive free tips, useful to anyone looking to get the most out of their website.
Your email won’t be passed to any third parties or used in any way that won’t be of benefit to you. Also, you can unsubscribe at any time.