--- title: "How to add a favicon to your site" description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!" source: "https://www.netlify.com/blog/how-to-add-a-favicon-to-your-site/" last_updated: "2026-08-05T03:29:38.000Z" --- 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 `` tag, paste the following line: ``` ``` 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: ``` ``` Depending on the tool you’re using to build your websites, you might have to use packages such as [`next/head`](https://nextjs.org/docs/api-reference/next/head) for Next.js or [`react-helmet`](https://www.npmjs.com/package/react-helmet) for React. Finally, you could also use this [favicon generator](https://realfavicongenerator.net/) 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! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=How to add a favicon to your site&url=https://www.netlify.com/blog/how-to-add-a-favicon-to-your-site/) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2Fhow-to-add-a-favicon-to-your-site%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/how-to-add-a-favicon-to-your-site/) - [Bluesky](https://bsky.app/intent/compose?text=How to add a favicon to your site+https://www.netlify.com/blog/how-to-add-a-favicon-to-your-site/) * * * ### Tags - [favicon](/blog/tags/favicon/) - [SEO](/blog/tags/seo/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials June 17, 2016 [ ### Five SEO Rules for Your JAMstack Site ](/blog/2016/06/17/five-seo-rules-for-your-jamstack-site/) - ![Profile picture of Aaron Autrand](/_astro/5962c94512311ae8aa1bbfa6c10d37e5528fc8c7-80x80_ZJvRM3.webp) Aaron Autrand ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials September 26, 2017 [ ### How to Build a Serverless, SEO-friendly React blog ](/blog/2017/09/26/how-to-build-a-serverless-seo-friendly-react-blog/) - ![Profile picture of Roger Jin](/_astro/1db6914a1ea5fe5012ad8cfe752b1f13c621659a-80x80_1MjjHB.webp) Roger Jin ## Recent posts Opinions & Insights July 28, 2026 [ ### Open Weights and the 2nd World ](/blog/open-weights-and-the-2nd-world) - ![Profile picture of Mathias Biilmann](/_astro/f193d4707a6391d843d5aaa73338b5a5971ec5cc-960x960_1Yylqm.webp) Mathias Biilmann Tools & Services July 28, 2026 [ ### MCP goes stateless and extensible ](/blog/mcp-goes-stateless-and-extensible) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements July 28, 2026 [ ### New Netlify projects are now private by default ](/blog/new-netlify-projects-are-now-private-by-default) - ![Profile picture of Taylor Barnett-Torabi](/_astro/cf4624da8c1286738397b6fecb53bad504df140b-400x400_ZsvK0s.webp) Taylor Barnett-Torabi ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)