Raise your hand if you have ever seen the following error in your browser's console:
1GET http://localhost:8001/favicon.ico 404 (Not Found)
This error usually happens if you haven't defined a favicon for your website.
In this Media Jam, we'll explain how to add a custom icon for any web application that runs over a desktop browser in just five steps.
1. Have your Website Running
Of course, we cannot add a favicon if we don't have a website ready to go.
To have a simple site to work with, we'll create an
index.html file with the following content:
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta http-equiv="X-UA-Compatible" content="IE=edge">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Favicon Demo</title>8</head>9<body>10 <h1>Favicon Demo</h1>11</body>12</html>
The previous code was auto-generated in Visual Studio Code.
If you're interested in giving it a try from scratch, you can install Live Server in your code editor to launch a development server with the live-reload feature for this project.
Pay attention to the upper-left corner. There is no custom logo for the application yet, and that's the reason you see the browser's error console, since it's trying to get that resource by default.
2. Get Ready with your Logo
It's great if you have a high-resolution version of your logo. However, the standard size for most desktop browsers is
Resize the logo
In this step, you're free to choose any image editor you have available to resize your image logo.
In this case, I'll describe the steps you may follow using Adobe Photoshop:
- Open your image in Adobe Photoshop.
- Choose the
Imagemenu, and then
Image Size. You'll see a popup where you can adjust the image's size. Put
32for the width and height (pixels), and click
OKto save the changes.
- To export the new image, go to the
Filemenu, and then click
Save for Web.
Then, make sure you select the
PNG format (top right option). Check the
Transparency option (in case you have borders or a logo with transparency). Finally, click the
Save button, name your file, and select the folder.
I have chosen
favicon.png for the file name, under my
3. Generate the Favicon
There are a lot of tools that can generate a
.ico file. In my personal experience, it's easy to generate it using ICO converter. It's free, and you don't even need to create an account to use it!
- Open the ICO converter website.
- Click on the
Choose Filebutton, and open the file you just saved in the previous step.
- You may select
32 pixelsfor the size.
32 bitsas the default option.
- Click on the
- Select the same folder location as your
You should have two files now:
4. Apply the Favicon
Before applying the favicon, you'll need to copy the brand new
favicon.ico file into your images folder. In the sample project, I'll put it in the
Next, let's update the
index.html file. Specifically, we'll need to add a
<link> element into the
1<head>2 <link rel="shortcut icon" href="static/icons/favicon.ico" />3</head>
After that, the
index.html should have the full content as follows:
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta http-equiv="X-UA-Compatible" content="IE=edge">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">78 <link rel="shortcut icon" href="static/icons/favicon.ico" />910 <title>Favicon Demo</title>11</head>12<body>13 <h1>Favicon Demo</h1>14</body>15</html>
5. Test your Favicon
Once you've completed all the previous steps, you can try refreshing your browser, and the new favicon should be there. In most modern browsers (Google Chrome, Mozilla Firefox) you'll see it at the top-left corner of the active tab as the next screenshot shows.
Also, note that the initial error displayed in the browser's console is gone.
Using Other Icon Sizes
You may need to add more icon sizes in case your app is used on several platforms, including mobile devices. In that case, just make sure to know what the new sizes are, and then create the
PNG files for all of them (Step 2).
Once you are ready with the new files, you can add the new icons in your
index.html file (just next to the initial one):
1<link rel="shortcut icon" href="static/icons/favicon.ico" />2<link rel="icon" type="image/png" sizes="32x32" href="static/icons/favicon-32x32.png" />3<link rel="icon" type="image/png" sizes="48x48" href="static/icons/favicon-48x48.png" />4<link rel="icon" type="image/png" sizes="96x96" href="static/icons/favicon-96x96.png" />5<link rel="icon" type="image/png" sizes="144x144" href="static/icons/favicon-144x144.png" />
If you prefer, you can play around with the project in this CodeSandbox too: