--- 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-31T18:46:51.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 News & Announcements August 25, 2026 [ ### Compete in OpenAI’s WebMCP Challenge with Netlify ](/blog/compete-openai-webmcp-challenge) - ![Profile picture of Karthik Puvvada](/_astro/e5524d3c315ad5114e1d5300d8991bfe902916fe-192x192_Z1w18MB.webp) Karthik Puvvada News & Announcements August 19, 2026 [ ### New clarifying questions in Agent Runners ](/blog/new-clarifying-questions-in-agent-runners) - ![Profile picture of Taylor Barnett-Torabi](/_astro/cf4624da8c1286738397b6fecb53bad504df140b-400x400_ZsvK0s.webp) Taylor Barnett-Torabi Opinions & Insights August 14, 2026 [ ### The full power of Git, without the friction: A conversation with Netlify CTO Dana Lawson ](/blog/netlify-source-with-netlify-cto-dana-lawson) - ![Profile picture of Dana Lawson](/_astro/856bf146d0c05c9dc25d45b59f7eac955fbbd644-512x512_1n84rs.webp) Dana Lawson ![](/_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/)