Skip to main content

Bookmark icons

Posted in Content, Meta-data and Search

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.

Usage

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.

Beyond bookmarks

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’.

Ever heard of ‘read later’ services like Readability or Apple’s Reading list. A bookmark icon helps your article stand out from the crowd in people’s reading lists.

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.

Hire me

If you like what you’ve read and think we’d work well together, I’d love to hear from you.

Contact me now

More resources

Here are a couple more resources for you to enjoy. If that’s not enough, have a look at the full list.

  1. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.

  2. The accessibility conversations you want to be having

    In most companies, accessibility conversations centre around WCAG compliance, but that’s just the start. Thinking beyond that is where you want to be!