Having created a favicon, we need to upload it to our theme.
- Once you have your
favicon.ico, place the file in the same folder as your stylesheet andindex.htmlfile. - Open
index.htmland add this code inside the<head>section:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
We added a favicon, uploaded it to the correct place, and added a line of code in our index.html file referencing it.
If you refresh your browser you'll see it in your navigation bar.
Tip
Can't see your favicon?
Be sure to name your file favicon.ico correctly! It won't work if it's not named favicon.ico.
You may also find that you need to clear your cache and reload several times before you see your new favicon. Be sure to actually clear your cache through your browser's preference panel. The keyboard shortcut Shift + F2 (Refresh) sometimes only clears the web page cache. Some browsers cache favicons in a separate directory.
A little known fact about the .ico format is that it can contain multiple versions of itself at different color depths and resolutions. This is how your operating system is able to display those "smooth icons" that seem to be the right resolution no matter how large or small they're displayed. You may have noticed that some favicons, if saved as shortcuts to your desktop, look great and others look jaggy and terrible. The ones that look great take advantage of this feature.
The three main sizes that Windows will display a favicon in are: 16 x 16, 32 x 32, and 48 x 48. Sometimes favicons go all the way up to 128 x 128. It's up to you; just remember, the more resolutions, color depths, and transparencies you add, the larger your favicon file is and longer it will take to load.
You'd basically use the same steps listed previously to create your favicon, just starting with 48 px x 48 px, then save it (so as to not overwrite your original file) down to 32 x 32 and last 16 x 16. It helps to save each icon initially in PNG format, especially if you want the background to be transparent.
Tip
To find out more about favicons and generate your own, visit http://www.favicon.co.uk.
Since we just took the time to add a great, multi-resolution favicon, we might as well go all out and add in a nice touch icon. Touch icons are used by iOS and Android devices with versions higher than 2.1.0. While you can technically just create one higher resolution image (for example, 114 x 114) the other devices will size it down, but then why waste bandwidth time loading in a larger image if you don't have to? It's better to create the three required sizes.