{"id":28467,"date":"2021-05-18T22:03:10","date_gmt":"2021-05-18T22:03:10","guid":{"rendered":"http:\/\/How-to-set-a-favicon-in-your-website-in-just-5-steps"},"modified":"2026-03-11T17:35:17","modified_gmt":"2026-03-12T00:35:17","slug":"how-to-set-a-favicon-in-your-website-in-just-5-steps","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-set-a-favicon-in-your-website-in-just-5-steps\/","title":{"rendered":"How to set a favicon in your website in just 5 steps"},"content":{"rendered":"

Raise your hand if you have ever seen the following error in your browser\u2019s console:<\/p>\n

GET http:\/\/localhost:8001\/favicon.ico 404 (Not Found)\n<\/code><\/pre>\n
This error usually happens if you haven\u2019t defined a favicon for your website.<\/p>\n
In this Media Jam<\/em>, we\u2019ll explain how to add a custom icon for any web application that runs over a desktop browser in just five steps.<\/p>\n
1. Have your Website Running<\/h2>\n
Of course, we cannot add a favicon if we don\u2019t have a website ready to go.\nTo have a simple site to work with, we\u2019ll create an index.html<\/code> file with the following content:<\/p>\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n<head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span>><\/span>\n    <meta<\/span> http-equiv<\/span>=\"X-UA-Compatible\"<\/span> content<\/span>=\"IE=edge\"<\/span>><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\n    <title<\/span>><\/span>Favicon Demo<\/title<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n    <h1<\/span>><\/span>Favicon Demo<\/h1<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The previous code was auto-generated in Visual Studio Code<\/a>.<\/p>\n
If you\u2019re interested in giving it a try from scratch, you can install Live Server<\/a> in your code editor to launch a development server with the live-reload feature for this project.<\/p>\n
\"\"<\/p>\n
Pay attention to the upper-left corner. There is no custom logo for the application yet, and that\u2019s the reason you see the browser\u2019s error console, since it\u2019s trying to get that resource by default.<\/p>\n
2. Get Ready with your Logo<\/h2>\n
You must have a high-quality squared-logo ready before creating the favicon. Remember that this graphic image will be associated with your brand. Let\u2019s take the Unofficial JavaScript Logo<\/a> in PNG format as an example. It has a size of 1000x1000<\/code> pixels.<\/p>\n
It\u2019s great if you have a high-resolution version of your logo. However, the standard size<\/strong> for most desktop browsers is 32x32<\/code>.<\/p>\n
Resize the logo<\/h3>\n
In this step, you\u2019re free to choose any image editor<\/a> you have available to resize your image logo.<\/p>\n
In this case, I\u2019ll describe the steps you may follow using Adobe Photoshop:<\/p>\n