So you've set up your website, either by spending hours hacking away at PHP, HTML and CSS, or you've installed a CMS such as WordPress or Drupal. You flick the switch for it to go live... only to realise the favicon — that little icon in the address bar — is the default one provided by the CMS or your web host. Not the most professional look, but it's a problem easily solved.
If you've coded you website from scratch, there are several approaches to tackling favicon management, from a straight FTP upload and tinkering with header code, to setting up something in your administration back-end. The latter is a much larger topic, so let's go with the former, more straightforward option.
- Hit up Faviconer to create a 16 x 16 favicon for your site. The advantage to using Faviconer is that it can create icons with transparency, either from an imported image or by using the site's provided painting tools.
- Upload the favicon to the root directory of your website via FTP. You can copy it to a subfolder, but to maximise support with older browsers, it's best not to deviate. For some browsers, this is enough — they'll detect the file and automatically use it.
- Open up your site's header file (or index file, if your site isn't that modular) and place the following line of code in the
section of the page:
, where "http://example.com/myicon.ico" is the path to the icon. It's recommended you use the name "favicon.ico", again to maximise compatibility.
- Save the file, clear your browser's cache and hit refresh. Be sure to check your site in as many browsers as you can, especially if your default browser doesn't seem to have picked up on the change.
You have two options when it comes to sorting out a favicon for your WordPress site — manually or via a plug-in.
Manually: The WordPress codex contains all the instructions you need, including how to create your favicon. Unfortunately, the instructions provided can be consider "hard"-setting your favicon (similar to what is explained above). If the site design changes or the location of the favicon changes, you'll need to update the appropriate files — the favicon image, the theme's templates, etc.
Plug-in: A better way to handle favicon management is via a plug-in and All-In-One Favicon will do the trick. By using a plug-in, you can also be sure that your favicon will appear correctly in popular browsers, with special cases handled for you.
Drupal's knowledge base also provides information for sorting out a favicon. It's possible to bind a favicon to each theme by copying the image file into the appropriate directory — "admin/build/themes/settings/", though for version 7, the folder you want is "admin/appearance/settings/".
Correctly configuring your favicon isn't that complicated, but it makes a world of difference when people visit your site. A well-rendered icon, taking into consideration the 16 x 16 pixel limit, adds that extra bit of polish. Resist the temptation to down-sample your company's logo — if you can, get a designer to create one for you or, if you fancy yourself good with Photoshop, have a go yourself.
On a related note, IcoFX is an excellent tool for creating alternative resolutions for any icon, including those destined to be favicons. It was once free-to-use but has since gone pay-for, however, you can still use the last released free version, which is exceptionally feature-complete.