Table of Contents
Favicon stands for Favorite Icon: we're talking about the 16x16 px icon that identifies your website during the user navigation. Most browser shows it on the left side of the address bar, assuming the currently visited website has one. It's also shown in the active navigation tab and in all of the browser's favorites listings, menus and bars.
Why you should use it
It's not merely aesthetics: favicon enables the user to identify the website he's currently visiting, mentally group its pages/tabs in his browser window or inside his favorite list. A favicon-enabled website hooks up its users and simplifies their navigation, while also having a more professional look. That's why, no matter what results you want to achieve on the web, you definitely want to have this kind of website.
How to build it
adding a favicon to your website is a two-step task: choosing a suitable image and installing it on your website. Let's see how we can fullfill them both.
Choosing a suitable image
If you want your favicon to be meaningful, you have to pick a decent image. Here are some useful advices:
- Avoid complex pictures or drawings: keep in mind that we're talking about a 16x16 px icon. Since it needs to work at this extremely low res, we need a rather simple icon, letter or logo more than a full-featured picture. In other words, simpler is better. Some of the most successful favicons are basically made of letters, numbers, basic shapes, or a combination of these three things. If your website already has a logo, try to use it: if you feel like it's too complex, try to make it more lightweight by simplifying or removing some lines. Another thing you can do is to use a single letter of your logo (the first one, the most fancy one), maybe painted using your "own" color(s).
- Speaking of which, colors. Try to cut them to 2-3 at least, you don't have the space to use more than that without annoying the user or spoiling your shape. Most Favicons feature a 2-color combination, try to stick to that pattern and you won't fail. Color-wise, at least.
- Aim for readability and crispness. Nothing is worth more, including aesthetics: don't forget that you could suffer from a rather biased look: you do know your logo or the image you chose. Think about your visitors: they don't. Your favicon will be there to help their navigation, not to amuse them.
Last but not least, here's the most important advice: take a look at your neighbours fence before building yours. You don't have to copy, nonetheless you'll learn a lot just by watching their favicon before thinking about yours. Take a quick tour over your favorite social networks, your mobile apps flagship home sites, as well as any other web site you remember for its stunning look. That's how you will get and refine your ideas, that's how you'll learn what you can do with sixteen pixels.
Do you want some basic examples? Here they are:
Building it up
Favicon, as we just said, is basically a 16x16 px image. You can craft it manually with a raster image editing software like Adobe Photoshop (if you want to stick to the industry-standard) or Gimp (if you want a great open-source alternative): once done, save it to a 16x16 px .ico file.
Thing is, in the last few years things shifted a while into mobile browsers & devices and a whole new set of favicons / display icons made their way into business. This is a non-exhaustive list of what we have today:
|
1 |
16x16, 32x32, 57x57, 60x60, 72x72, 76x76, 96x96, 114x114, 120x120, 144x144, 152x152, 180x180, 192x192 |
Whilst you won't need most of these formats yet, modern browsers and operating systems slowly start to look for their presence. If you want your website icon to look neat on a Windows 8.1 tile or over an Android/iOS desktop bookmark in the near future, you should consider to make them available too.
Do you have to manually craft all of them? Of course not, unless you really want to. You can use one of the free online favicon converters/generator who will gladly craft all of these formats for you from a single square source picture of your choice. The most used ones as of today are www.favicon-generator.org and favicon.cc, both of them free (and highly recommended). Personally, I would also recommend realfavicongenerator.net (while it's still in beta) for its modern, responsive and script-based approach.
Needles to say, online generators are the perfect choice even if you ain't that comfortable with the aforementioned image editing software.
Installing the favicon on your web site
Once you got it done, the last thing you need to do is (up)loading it on your website. Let's see what you need to do, depending on what you have.
WordPress
If you want to handle it using a plugin, I highly recommend Favicon by RealFaviconGenerator, by the same guys wo made the aforementioned online favicon generator realfavicongenerator.net. Using it is quite straightforward, just install it and you'll be able to get it working in few seconds. If you want to check for some alternatives, you can also try the following free online tools:
If you prefer to perform a manual install, all you need to do is to add the following action to your functions.php file using the WordPress Admin Panel (Appearance -> Editor -> functions.php):
|
1 2 3 4 |
function wp_add_favicon() { echo '<link rel="shortcut icon" href="'.bloginfo('stylesheet_directory').'/images/favicon.ico" type="image/x-icon" />'; add_action('wp_head', 'wp_add_favicon'); } |
You'll also need to upload your 16x16px favicon to your theme's /image/ folder. You can do that with any FTP software like Filezilla or SmartFTP.
Generic Web Site
Open your html file or template: if you're using phpBB, Joomla, Drupal, or any Content-Management-System, you might have to check their documentation in order to properly find where it is. Once you're got it, insert the following HTML code inside your
<head>
block:
|
1 |
<link rel="shortcut icon" href="/path/to/favicon-16x16.ico" type="image/x-icon" /> |
Don't forget to replace /path/to/favicon-16x16.png with your 16x16 favicon path and filename.
IMPORTANT: If your favicon isn't showing up, remember to clear any cache you might use, including browser, proxy, web server, WordPress or dinamically generated files.
Happy coding!
