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.
Custom Site
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.
WordPress
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
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/
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.
Comments
6 responses to “Don’t Forget To Replace That Favicon!”
The limit is higher than 16×16 pixels these days. It won’t make much of a difference normally, but if you appear in the frequently visited websites in IE it will show a higher res image (32×32 where possible.) The same goes for if a user pins a website in a taskbar. For example, Lifehacker does not have a highres icon, and it shows! See https://dl.dropboxusercontent.com/u/456202/favicon_highres.png for frequently visited website and https://dl.dropboxusercontent.com/u/456202/favicon_highres_taskbar.png for taskbar.
It’s definitely worthwhile making a higher res one where possible, but it still needs to be simple enough that it’s recognisable and looks good in 16×16 as that is still what it will be displayed as most of the time in most browsers.
I think when I generated one I used http://www.consultsarath.com/public-utilities/Favicon.aspx and it exports one .ico file with 4 different sizes embedded.
Is it just me, or is there some code missing (not showing up?) in this story?
What about the 144x144px Apple iPad Retina icons? There’s a lot more to favicons than you’ve covered here.
The article Everything you always wanted to know about touch icons by Mathias Bynens is a great read!
These are different things. Favicon is traditionally the tiny image to the left of your address bar.
The article did state “that little icon in the address bar”, but I’d argue the favicon is now used to mean any and all icons that are automatically displayed representing your website. It’s an important point to address regardless of if you’re only thinking “pre-iPhone” era, or if you’re willing to keep up with the latest technology. Ie; people could still be saving your website to their iOS device’s home screen no matter how hard you ignore them…
Don’t just stop at the Favicon! You can do iOS and Windows 8 devices as well. Here’s a video explaining how. http://www.youtube.com/watch?v=DDIxdmUravQ