--- 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-07-16T13:30:23.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 July 14, 2026 [ ### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers ](/blog/new-pro-plan-tiers) - ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp) Gehrig Kunz News & Announcements July 13, 2026 [ ### Netlify inside of Claude Design ](/blog/netlify-inside-of-claude-design) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças ![](/_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/)