Last Updated on February 26, 2019
A favicon is a small file containing one or more images that will be used in applications your website is viewed in, such as browsers or mobile apps. The favicon appears in the browser tab, tile icon, and so on as seen here. The favicon file, which uses the ICO file format, contains multiple .bmp or .png image files saved at different sizes. For more information on favicons, you can refer to the Wikipedia entry here.
The FoundPixel favicon as it appears in a Chrome tab.
Create your image
You will need to consider a graphic that displays, or is at least recognizable, at a small dimension. Good examples are the Google icons, which are instantly recognizable in your browser tabs.
You might use your brand mark as a favicon (a part of your logo or branding that represents your site), but even just a paw or something generic that represents your niche can work well in lieu of a logo or brand mark.
Using favicon files: a few essential best pracitces
Although creating and adding favicons might seem somewhat simple, and it can be, the file and how you should add it to your site is a somewhat more complex thing to do properly.
To add a favicon that supports different browsers and platforms properly, you need to create the ICO file a certain way, and add it to your site properly. Without going into the nitty gritty, here are a few best practices at the time of writing (do note that there are others that I’ll link to below, but these I feel are the most important to follow).
- Create the file using a generator that compresses your image well, and creates multiple necessary images inside the ICO (more below).
- To support multiple browsers, do not use special HTML. Just name your file favicon.ico and put it in the root of your domain.
In more advanced detail, I recommend referring to this Favicon Cheat Sheet on GitHub. This is also a great read about the favicon (in detail).
How to create the ICO file
I usually run my graphics through an online favicon generator, which are typically free. I choose a generator that adds an image for three different sizes to support multiple platforms. I recommend choosing a generator that at least adds these sizes to the ICO file:
- 16×16 image
- 32×32 image
- 48×48 image
You want to make sure that the generator appropriately compresses your image, and does not add extra images into the ICO that the browsers or apps do not use. This results in extra file size and traffic that do not benefit your site.
You may want to consider using a favicon generator such as Real Favicon Generator or X icon Editor. Upload your file at a large size, and the generator creates the ICO file at the appropriate dimensions. There are many others available, but make sure you investigate what images/content they actually put into the ICO. Real Favicon Generator also supplies some code you can optionally add to your website to handle additional icons, and it provides all the graphics you need to support them.
Add it to your website
The final step is to add the ICO file to your website. This can be done at least one of the following ways: manually, using an existing setting, or by adding a plug-in.
WordPress
- Look in your theme’s settings to check if there is an option for adding your ICO file. The setting may include an upload option, or ask you to link to a file that you add to your Media directory.
The Appearance > Customize section has a section to upload and set a favicon for your site.
- Manually upload the ICO to your site’s files using FTP. You may need to check with your theme’s documentation to find out where you need to add it. This is often the root of your website, or sometimes in the root or theme’s
/images/directory. - Use a plug-in. There are plugins available that let you add a favicon if you prefer not to use one of the above options.
- Optionally add special meta information to support iOS, Android, and Internet Explorer. For information on how to do this, refer to this page on GitHub.
Blogger
- In your blog’s settings, choose Layout (click the Settings button in My Blogs and then click Layout, or choose Layout from the Settings menu).
- Click Edit next to Favicon, as seen below:
In the Layout settings area, click Edit in the Favicon box, as shown here.
- Click Browser to select and upload your ICO file, and then click Save.
Browse for a file, and then click Save.
Other
Do you use a different platform and need help figuring it out? Let us know in the forums! And always remember that you can upload the file into the root of your website using FTP.
Viewing the favicon in your browsers
The final step is to see what it looks like. Do note that because browsers actively cache the favicon data, it can take some time for the image to show up. However, there are some ways to clear that cache and view your icon. Try the following
- Clear your browser’s cache (How to do this in all browsers).
- Restart your browser.
- Open a new browser tab.
If still stuck, try opening new tab. Or see this page on how to force a favicon refresh.