{"id":27791,"date":"2022-07-06T09:24:52","date_gmt":"2022-07-06T09:24:52","guid":{"rendered":"http:\/\/build-dynamic-favicon-with-javascript"},"modified":"2025-10-21T08:35:06","modified_gmt":"2025-10-21T15:35:06","slug":"build-dynamic-favicon-with-javascript","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/","title":{"rendered":"Build Dynamic Favicon with JavaScript"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>A favicon is a small image displayed next to the page title in the browser tab. It creates a visual representation of your website and saves time by allowing users to easily identify your brand with it. Establishing brand recognition through favicons is important for Search Engine Optimization. You may have noticed that modern web applications have dynamic favicons that change over time.<\/p>\n<p>A dynamic favicon is great because it changes instead of staying static. It can update based on user actions or real-time events, such as showing unread message counts, switching with dark or light mode, or reflecting online\/offline status. This makes the favicon more interactive and informative, enhancing the browsing experience.<\/p>\n<p>In this article, you will learn how to build a dynamic favicon using JavaScript.<\/p>\n<h2>Prerequisites<\/h2>\n<p>To effectively create your own dynamic favicon JavaScript project doesn\u2019t take deep developer skills, but there are a few things you should know before you get started:<\/p>\n<ul>\n<li>Basic HTML5 skills.<\/li>\n<li>Basic knowledge of JavaScript.<\/li>\n<\/ul>\n<p>With that skillset, you can easily get to work. To set context and give you a space to experiment, below, we have a couple options for you to work with the code before going live:<\/p>\n<h3>Github<\/h3>\n<p>Check out the complete source code in this <a href=\"https:\/\/github.com\/musebe\/Dynamic-Favicons\">GitHub Repository<\/a>.<\/p>\n<h3>Codesandbox<\/h3>\n<p>Work with the final project on Codesandbox; click on the \u201cOpen Sandbox\u201d link in the sandbox to play around.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/dynamic-favicons-ff7xor?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"dynamic-favicons\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>Getting Started With Your Dynamic JavaScript Favicon Project<\/h2>\n<p>In this demo, we are going to create favicons that change after a specific time, say after one second. Later we are going to create a simple favicon with a static notification by using HTML canvas to draw on it. Most of the favicons have a common name <code>favicon.ico<\/code><\/p>\n<blockquote>\n<p>HTML canvas is an element that can be used to draw graphics on a web page via scripting (usually JavaScript).<\/p>\n<\/blockquote>\n<blockquote>\n<p>A favicon is a square image with sizes of <code>16*16<\/code> and supports a variety of file formats including <strong>ICO<\/strong>, <strong>PNG<\/strong>, <strong>GIF<\/strong>, <strong>JPEG<\/strong>, and <strong>SVG<\/strong> In this article we are going to use PNG files.<\/p>\n<\/blockquote>\n<p>Let\u2019s get started!<\/p>\n<h2>Dynamic Favicon JavaScript Project Setup<\/h2>\n<p>Open an empty folder in your favorite text editor and create a folder. We are going to store at least two favicon images. Then create an <code>index.html<\/code> inside the parent folder and paste the following.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n<span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">http-equiv<\/span>=<span class=\"hljs-string\">\"X-UA-Compatible\"<\/span>  <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"IE=edge\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span>  <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Dynamic Favicons<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"favicon\"<\/span>  <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"icon\"<\/span>  <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"favicons\/0.png\"<\/span>  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"image\/png\"<\/span>  <span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"16*16\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"text-align: center; color: crimson;\"<\/span>&gt;<\/span>Welcome to Cloudinary<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"text-align: center; margin: auto; width: 60%;\"<\/span>&gt;<\/span>Transform images and videos to load faster with no visual degradation, automatically generate image and video variants, and deliver high quality responsive experiences to increase conversions.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n  \n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"script.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Right-click the <code>index.html<\/code> file and open it in your browser. You should be able to see a page and besides the title <strong>Dynamic Favicons<\/strong> a favicon of your choice. It should look like this. We can then look at this in more detail.<\/p>\n<p>If you are using CodeSandbox you have to open the browser page in a new tab for you to see the page\u2019s favicon. To do this just click the top rightmost button on the browser section.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/bowenivan\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1656512294\/favicon_j70u0t.jpg\" alt=\"img.png\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"514\"\/><\/p>\n<h2>Add Favicon to Your Web Page<\/h2>\n<p>To add a favicon for your page add a <code>&lt;link&gt;<\/code> element just after the <code>title<\/code> element. Ensure that you have the favicon image saved in the root directory of your project or inside a folder for this case the <code>favicons<\/code> folder. You can visit <a href=\"https:\/\/www.favicon.cc\">this link<\/a> to create your own favicon.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"favicon\"<\/span>  <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"icon\"<\/span>  <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"favicons\/0.png\"<\/span>  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"image\/png\"<\/span>  <span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"16*16\"<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>You may also notice that here we are naming the favicons with numbers, this is to make iterating through the favicons easier, you\u2019ll see this in the next steps.<\/p>\n<p>You can specify the size using the <code>sizes<\/code> attribute to ensure that they are of the right size i.e., 16*16.<\/p>\n<h2>Handle the Javascript Favicon Element<\/h2>\n<p>Create a <code>script.js<\/code> file in your root folder because we are going to use JavaScript to handle the favicon once our page loads.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-built_in\">window<\/span>.onload  =  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>  (<span class=\"hljs-params\"><\/span>)  <\/span>{\n\n<span class=\"hljs-keyword\">var<\/span>  favicon  =  <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'favicon'<\/span>);\n\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We can create an animation effect for our favicon by changing it after every second. It is also clear here as to why we used ascending numbers to name our favicons. We will increment the <code>faviconIndex<\/code> after every second and this will change the URL of the link.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-built_in\">window<\/span>.onload  =  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>  (<span class=\"hljs-params\"><\/span>)  <\/span>{\n\n  \n\n<span class=\"hljs-keyword\">var<\/span>  faviconIndex  =  <span class=\"hljs-number\">0<\/span>;\n\n<span class=\"hljs-keyword\">var<\/span>  favicon  =  <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'favicon'<\/span>);\n\n  \n\nsetInterval(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)  <\/span>{\n\nfavicon.href  =  <span class=\"hljs-string\">\"favicons\/\"<\/span>+faviconIndex  +  <span class=\"hljs-string\">\".png\"<\/span>;\n\nfaviconIndex++;\n\nfaviconIndex  %=  <span class=\"hljs-number\">3<\/span>;  <span class=\"hljs-comment\">\/\/ number of favicons (3)<\/span>\n\n},  <span class=\"hljs-number\">1000<\/span>);\n\n};\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>If you refresh your browser after saving the changes you will see the favicon changing after every second. You can do this to grab people\u2019s attention.<\/p>\n<h2>Create a Favicon with a Simple nNtification Badge<\/h2>\n<p>In this second part, we are going to create our own simple favicon with a static notification. We will use HTML Canvas to create a favicon and display some text on it. This code is in the <code>badge.js<\/code> file. You can either replace the <code>script.js<\/code> with this or reference a new js file in your <code>index.html<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-built_in\">window<\/span>.onload  =  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n\n<span class=\"hljs-keyword\">var<\/span>  favicon  =  <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'favicon'<\/span>);\n\n<span class=\"hljs-keyword\">var<\/span>  faviconSize  =  <span class=\"hljs-number\">16<\/span>;\n\n<span class=\"hljs-keyword\">var<\/span>  canvas  =  <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'canvas'<\/span>);\n\n<span class=\"hljs-keyword\">var<\/span>  context  =  canvas.getContext(<span class=\"hljs-string\">'2d'<\/span>);\n\n<span class=\"hljs-keyword\">var<\/span>  img  =  <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'img'<\/span>);\n\nimg.src  =  favicon.href;\n\n  \n\nimg.onload  =  <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span>  =&gt;<\/span>  {\n\ncanvas.width  =  faviconSize;\n\ncanvas.height  =  faviconSize;\n\ncontext.fillStyle  =  <span class=\"hljs-string\">\"#F76B67\"<\/span>;\n\ncontext.fillRect(<span class=\"hljs-number\">0<\/span>,  <span class=\"hljs-number\">0<\/span>,  canvas.width,  canvas.height);\n\ncontext.font  =  <span class=\"hljs-string\">\"10px 'helvetica', Assistant\"<\/span>;\n\ncontext.fillStyle  =  <span class=\"hljs-string\">\"#FFFFFF\"<\/span>;\n\ncontext.textAlign  =  <span class=\"hljs-string\">\"center\"<\/span>;\n\ncontext.textBaseline  =  <span class=\"hljs-string\">\"middle\"<\/span>;\n\ncontext.fillText(<span class=\"hljs-number\">3<\/span>,  canvas.width  -  faviconSize  \/  <span class=\"hljs-number\">3<\/span>,  faviconSize  \/  <span class=\"hljs-number\">3<\/span>  );\n\nfavicon.href=canvas.toDataURL(<span class=\"hljs-string\">\"image\/png\"<\/span>);\n\n};\n\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To get a drawing context on the canvas we use the <code>HTMLCanvasElement.getContext() <\/code>method and takes a contextType parameter <code>getContext(contextType)<\/code> for our case <code>&quot;2d&quot;<\/code> which leads to the creation of an object representing a two-dimensional rendering context.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">const<\/span>  context  =  canvas.getContext(<span class=\"hljs-string\">\"2d\"<\/span>);\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We can also specify the height pixels and width pixels of our canvas element by using the height and width attribute of the canvas element created. Since the favicon takes a width of 16 we\u2019ll use the <code>favicon size<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">\ncanvas.width  =  faviconSize;\n\ncanvas.height  =  faviconSize;\n\n<\/code><\/span><\/pre>\n<p>We can then draw our background by first setting the background color by using the <code>fillStyle<\/code> property and then drawing a filled rectangle with the background set.<\/p>\n<blockquote>\n<p>The fillStyle canvas property sets the color used in filling the drawing.<\/p>\n<\/blockquote>\n<blockquote>\n<p>The fillRect() method draws a filled rectangle. The default background color is black.<\/p>\n<\/blockquote>\n<p>The <code>fillRect()<\/code> takes four parameters, the x-coordinate of the upper corner of the rectangle, the y-coordinate of the upper corner of the rectangle, and the width of the rectangle in pixels, and the height of the rectangle in pixels.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\ncontext.fillStyle  =  <span class=\"hljs-string\">\"#F76B67\"<\/span>;\n\ncontext.fillRect(<span class=\"hljs-number\">0<\/span>,  <span class=\"hljs-number\">0<\/span>,  canvas.width,  canvas.height);\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Draw the Notification Text<\/h2>\n<p>We can also add some text on the canvas element and place it on the top right so that it looks like a notification. We will specify the font, color, and alignment and set the baseline of the text as shown below.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\ncontext.font  =  <span class=\"hljs-string\">\"10px 'helvetica', Assistant\"<\/span>;\n\ncontext.fillStyle  =  <span class=\"hljs-string\">\"#FFFFFF\"<\/span>;\n\ncontext.textAlign  =  <span class=\"hljs-string\">\"center\"<\/span>;\n\ncontext.textBaseline  =  <span class=\"hljs-string\">\"middle\"<\/span>;\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To draw the text we use the <code>fillText<\/code> method which takes three parameters: the text, x-coordinate, and y-coordinate. The coordinates are used to place the text in a certain part, for our case we are going to align it to the top right.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">\ncontext.fillText(3,  canvas.width  -  faviconSize  \/  3,  faviconSize  \/  3  );\n\n<\/code><\/span><\/pre>\n<p>We then change the favicon link so that it displays the canvas element we have created. <code>toDataURL<\/code> is a canvas method that returns the data URL of the canvas image.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\nfavicon.href=canvas.toDataURL(<span class=\"hljs-string\">\"image\/png\"<\/span>);\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Conclusion<\/h2>\n<p>In conclusion, we have learned how we can create a simple dynamic favicon that changes after a specified time. Another interesting thing we have learned is how we can create a simple favicon using HTML canvas.<\/p>\n<p>Some other cool thing you can create is a favicon with animated badges. We will cover how we can achieve this in yet another article.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27792,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[381,134,370,177,371],"class_list":["post-27791","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-imagecdn","tag-guest-post","tag-image","tag-javascript","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build Dynamic Favicon With JavaScript<\/title>\n<meta name=\"description\" content=\"Learn how to build a dynamic favicon with JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Dynamic Favicon with JavaScript\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a dynamic favicon with JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-06T09:24:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-21T15:35:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build Dynamic Favicon with JavaScript\",\"datePublished\":\"2022-07-06T09:24:52+00:00\",\"dateModified\":\"2025-10-21T15:35:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA\",\"keywords\":[\"(Image)CDN\",\"Guest Post\",\"Image\",\"Javascript\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/\",\"name\":\"Build Dynamic Favicon With JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA\",\"datePublished\":\"2022-07-06T09:24:52+00:00\",\"dateModified\":\"2025-10-21T15:35:06+00:00\",\"description\":\"Learn how to build a dynamic favicon with JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA\",\"width\":640,\"height\":350,\"caption\":\"Image showing a graphic image of a mouse clicking on a JavaScript favicon button\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Dynamic Favicon with JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build Dynamic Favicon With JavaScript","description":"Learn how to build a dynamic favicon with JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Build Dynamic Favicon with JavaScript","og_description":"Learn how to build a dynamic favicon with JavaScript.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-06T09:24:52+00:00","article_modified_time":"2025-10-21T15:35:06+00:00","og_image":[{"width":640,"height":350,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/"},"author":{"name":"","@id":""},"headline":"Build Dynamic Favicon with JavaScript","datePublished":"2022-07-06T09:24:52+00:00","dateModified":"2025-10-21T15:35:06+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA","keywords":["(Image)CDN","Guest Post","Image","Javascript","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/","name":"Build Dynamic Favicon With JavaScript","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA","datePublished":"2022-07-06T09:24:52+00:00","dateModified":"2025-10-21T15:35:06+00:00","description":"Learn how to build a dynamic favicon with JavaScript.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA","width":640,"height":350,"caption":"Image showing a graphic image of a mouse clicking on a JavaScript favicon button"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-dynamic-favicon-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Dynamic Favicon with JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926267\/Web_Assets\/blog\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5\/69ec6425dcbca6dc166197743e72d4027e4c48ac-640x350-1_277922ecc5.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27791"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27791\/revisions"}],"predecessor-version":[{"id":38944,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27791\/revisions\/38944"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27792"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}