Before publishing your website, you should perfect your site with a custom favicon. Favicon is the image that users with a web browser see in the browser’s tab, browsing history, and next to the page title when they bookmark your website. Mobile users who visit your website frequently, see the favicon pinned to the mobile browser’s launch screen.
It is important to create favicon that reflects your identity and helps users to quickly recognize your website when they have several tabs open at the same time, or when they are browsing their history or bookmarks.
Favicons are created using .ico file format. This is a special file format that may contain multiple image sizes and color depths so that the image may be scaled appropriately.
Many image editors do not provide an option for exporting images in .ico format. Luckily we can use ImageMagick to perform the task. ImageMagick is a free, cross-platform, open-source software suite for working with images.
Next we will demonstrate the steps of converting a generic .png format image into a multi-resolution favicon.ico.
Requirements
To complete this tutorial you will need the following
- ImageMagick - download it here if you do not have it already.
- Website logo, preferably at least 128 x 128 pixels in
.png,.jpgor.jpegformat - Website where you want to add the favicon
Instructions
1. Prepare the command to convert your image
1 | convert logo.png -define icon:auto-resize=128,64,48,32,16 favicon.ico |
Where
logo.pngis the path to your website logo; include directory path to image if the image is not in the current directory.128,64,48,32,16are the different size resolutions to include in the output favicon. The maximum size should not exceed the size of the original image because scaling up an image will lead to blurriness. Rather start with a larger input image then scale down.favicon.icois the filename of the output image; include directory path if you want to output image outside the current directory.
2. Execute the command
Running the command should not yield any terminal output. After executing the command, you should see favicon.ico in the specified output path.
Special note to Windows 10 users
If you are using Windows 10, even after installing imagemagick and adding the executable to system environment paths, you may see the following error when you run the command:
1 | Invalid Parameter - -define |
This happens because Windows 10 prefers its own convert command over imagemagick’s convert. To resolve this issue, you need to fully quality your path to imagemagick as follows:
1 | "C:\Program Files\ImageMagick\magick.exe" convert logo.png -define icon:auto-resize=128,64,48,32,16 favicon.ico |
3. Add favicon.ico to your website meta tags
Your website output directory should contain index.html or similar default page, depending on the web framework you are using.
In the head section of this page, add the following meta tag specifying the path to the newly created favicon. Also make sure you have saved the favicon.ico in your website’s root directory (this is the same directory where your index.html should be defined).
1 | <link rel="shortcut icon" href="/favicon.ico"> |
4. Run your website
You should now see your new favicon in the browser. Browsers tend to cache these icons quite heavily so you may need to reload the page a few times.
If you still do not see the icon, inspect the network requests, verify that the path to the icon is correct, and that you have the favicon saved at the specified path.
Yay, you are done. Happy coding!