In 2016, my workplace did a study to determine the state of various issues on public library websites in Ohio. One of the numbers that was concerning was the widespread lack of a favicon. Over 45% of the 171 libraries evaluated didn’t have one.
If you’re unfamiliar with it, the term is simply a mashup of the word “favorite” and the word “icon.” It’s the little icon that sits to the left of the page title in the page tab, in most browsers. It also shows up as the little symbol for a page in your bookmarks/favorites list. When you’re tab junkie (let’s not talk about how many tabs I might have open at a time, because I probably need professional help), those little favicons are a lifesaver. Sometimes, one can’t tell one tab from another without those, because there’s simply no room for the full page title. Or, if you’re scrolling through a very long list of bookmarks, that little icon can make finding a particular link much easier. In short, it’s a user experience issue when a site doesn’t have one.
Favicons don’t just make for a more usable site. If your site doesn’t have a custom favicon (or, worse, shows the default content management system one), that’s a branding opportunity being missed. More importantly, it shows an unfinished, less-professional website.
There are basically two steps for getting a favicon for your site:
- Create the actual favicon, then
- Put the appropriate HTML tag into the <head> of your website.
Creating a favicon
Favicons have to be in a specific format: .ico. Not all graphics programs can export in this format, but never fear: there are tools like Favic-O-Matic that can take your image (generally GIF, JPG or PNG) and convert it to the .ico format. Note that your original image should generally already be 32×32 pixels, before you start using a favicon export tool.
If your library’s logo is too complex to fit clearly into a 32 x 32 block, try using just a recognizable part of it. If that’s still an issue, it might be time to get a new logo. For guidelines about what makes a good logo these days, try Designing a Logo with Staying Power.
Using the HTML tag
Once you have your .ico file, the next step is to put an HTML tag into the <head> of your website. If your library uses a CMS, there are generally specific ways to insert tags into the site header (sorry, you’ll need to do some googling for your particular CMS). Regardless, the syntax for the tag generally is:
<link rel=”shortcut icon” href=”YOUR_PATH_TO_FAVICON” type=”image/x-icon”>
So, YOUR_PATH_TO_FAVICON might be something like “https://mylibrary.org/files/favicon.ico” (or, better, make it a relative URL, and make it just “/files/favicon.ico”)
What does this mean to me, Laura?
Favicons are important to both the user’s experience, and to your library’s credibility. It doesn’t take a huge effort to add one and has a well-worth-it payoff.
