How to Add a Favicon (Bookmark Icon) to Your Website
In this tutorial, I will show you how you can easily add a favicon, or a bookmark icon in other words, to your website to enhance its identity and present your users a distinct mark they will recognize when they see it.
Favicon is a small icon that is displayed on the title bar of a web browser when you open a web page that has a favicon icon. It can be considered as a small version of a logo that identifies the website. It is displayed to the left of the web page title as shown in the screenshot from this website below:
If you check some of your favorite websites in your web browser, you will see their favicons on the title bars of each tab and notice how they help with the identification and recognition of the website.
Being displayed on the title bar is not the only function of a favicon. Favicon is the short version of "favorite icon", a name that is given to this web page element since it is also displayed next to the web page link it belongs within the bookmarks. By the way, bookmarks are also often referred to as favorites, e.g. "Add to favorites".
Additionally, favicons are displayed on mobile devices and tablets when your website is bookmarked or a shortcut to it is added to the applications list. Furthermore, some search engines such as Yahoo, display your favicon next to your page link on their search results.
Considering all of the above points, though it is not necessary to have a favicon on your website, having your own unique favicon is a good idea for branding and making people remember your website by its icon.
What is Favicon Size?
The favicons you see on the title bar of the browser have a standard size of 16 x 16 pixels. If your website is focusing only for desktop users, that would be the size you should design your favicon. However, considering a lot of visitors may be coming from mobile devices and tablets, it might be better to design your favicon a bit larger. 32 x 32 or 64 x 64 or even 128 x 128 pixels would be some good size points to choose from.
Below is a sketch of the favicon I designed for this website using Inkscape, a free SVG image editor.
Note that, even if you create a larger favicon, the title bar version will always be displayed at 16 x 16 pixels.
Favicon Image File Types
When they first came to use, the file type for favicon images were .ico, e.g., favicon.ico. In time, other common image types such as PNG, JPG or GIF were allowed to be used depending on the browser. Choose whichever image type suits your design best.
TIP: If you need a favicon with transparency, you will need to create your favicon in either ICO, PNG or GIF file types.
Where to Put Favicon Image?
You can put your favicon image in any folder on your website as you wish. For example, you can place it in your root directory or images folder. Just make sure to link to it correctly.
TIP: Some web browsers automatically check for a favicon.ico file in the root directory of your website and cause a 404 error. Hence, naming your favicon file as favicon.ico and putting it in the root directory is recommended.
How to Add a Favicon to Your Website
Now, let's continue with the steps for adding a favicon to your website.
STEP 1: Prepare the Favicon Image
Obviously, you will need a favicon image in order to insert it to your website. If you have your favicon image ready, you can skip to the next step.
You don't need to be a skilled graphic designer to create your own favicon. What you can do is that you can either create a small version of your logo (if you have one), or you can create a favicon image using one of the free favicon generator tools that you can find online. Some of these tools help you create a favicon from scratch or using an image that you will provide. I will list a couple of them below to help you get started:
- Favicon.ico Generator
- Favic-o-matic
- App Icon Generator
If your favicon is ready, you can continue with adding it to your website.
STEP 2: Upload the Favicon Image to Your Website
Once your favicon image is ready, upload it to your website, using the File Manager in your hosting control panel or an FTP client. Take note of the path where you stored the file as you will use it in the next step.
STEP 3: Add the Favicon Image to Your Website
After uploading your favicon image to your website, you need to add a link to it from within the <head> element on all your pages. Here is the code that you will use:
<link rel="icon" href="/favicon.ico">
In the above code, the name of the favicon file is favicon.ico and it is placed in the root directory. If it was stored in the images folder, we would have used the following line:
<link rel="icon" href="/images/favicon.ico">
Below is how it is placed within the <head> element of an actual web page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website Title</title>
<link rel="icon" href="/favicon.ico">
</head>
...
If you are using a content management system such as WordPress, you can simply insert that link to the header.php file of your theme, which is usually used on all pages (some themes may behave differently). However, if your website is built with separate static pages, you will need to insert that link into all pages.