If you’re building your websites using frameworks such as React.js, Vue.js, Next.js, or any other, chances are that they are using their logo as favicon.
If you’re like me and you always have way too many tabs open at once, you may understand how having your own favicon is important for your users to quickly identify the website associated with each tab.
Luckily, customising a favicon can be done in a single line of code!
In your main HTML file, inside the <head> tag, paste the following line:
<link rel="icon" type="image/jpg" href="path-to-your-favicon"/>
Change the value of the href property to the path where your image is located in your project, update the image type if needed, and you’re done!
If you want to test this quickly, favicons can also be emojis, so you could use 🦄, 🎉, 🍔, or whichever your favourite emoji is!
To do this, the code is a little different and looks like this:
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦄</text></svg>"></link>
Depending on the tool you’re using to build your websites, you might have to use packages such as next/head for Next.js or react-helmet for React.
Finally, you could also use this favicon generator tool if you want to see what your favicon could look like in light/dark mode, in search engine results, and generate the tags automatically!
