Changing Website Favicon Dynamically

Changing website favicon dynamically

Why not?

var link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.getElementsByTagName('head')[0].appendChild(link);
}
link.href = 'https://stackoverflow.com/favicon.ico';

How can I change my favicon dynamically depending on the state of the browser tab?

To do this you would use the window's focus and blur events.

$(window).focus(function() {
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
});

$(window).blur(function() {
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
});

Or with even shorter and the following HTML for favicon

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

$(window).focus(function() {
    $("#favicon").attr("href","favicon1.png");
});

$(window).blur(function() {
    $("#favicon").attr("href","favicon2.png");
});

Dynamically changing favicon in react.js

You can do it using React's useEffect hook and some JavaScript. Usually, you would define your useEffect in your page components, so when your page is rendered, the effect triggers which updates the favicon.

const Page1 = (props) => {
  // effect to update favicon
  useEffect(() => {
    let link = document.querySelector("link[rel~='icon']");
    if (!link) {
      link = document.createElement('link');
      link.rel = 'icon';
      document.getElementsByTagName('head')[0].appendChild(link);
    }
    link.href = 'https://stackoverflow.com/favicon.ico';
  }, []);

  return (
    <div>Page1</div>
  );
}

Here's more on how to change favicon dynamically with just JavaScript

closed - Change favicon Angular theme

similar question to -> Changing website favicon dynamically

you will need to manipulate the native DOM link element to accomplish this.

HTML

<link rel="icon" id="favIcon" type="image/x-icon" href="./assets/favicon.ico" />

Typescript

export class AppComponent implements OnInit {
   favIcon: HTMLLinkElement = document.querySelector('#favIcon');

   constructor() {
     this.favIcon.href = './favicon_path_folder/favicon.ico';
   }
}

using this you should be able to alter your code, so that when the client switches, or in ngOnInit of your target component you update the 'href' attribute of the faveIcon link

Changing website favicon dynamically: how to when div wraps head

<div> is not valid between <html> and <head>. The rendering engine will work around it, but expect odd side effects like the meta properties (like <link rel="icon" ... >) being unpredictable or ignored.

Change favicon dynamically based on browser

You can make use of jquery in Angular to do this.
Once you get the browser configuration.
Call this method on ngOnInit in your App Component

    SetApplicationFavicon(id,basepath,icon)
     { 
          $("#"+id).attr("href", basepath+"/"+icon); 
     }

Or you can even make use of Renderer 2 to change the attribute of the
href tag at runtime either will work

How to change the favicon dynamically in VueJs

This will help, it is awesome libary with utilities for Vue 2 and 3.
VueUse useFavicon

How to create a dynamic favicon (which is depending on the browser color)?

It is not possible to get the color of the browser. The only possibility is to detect if the browser is in dark mode or not.

Solutions for that case are shown under Is it possible to use a different favicon for browsers that support theme-color? and Detect if the browser is using dark mode and use a different favicon, but there is no way of getting the browser tabs color.

Set a dynamic favicon on safari using react-hook

After moving the Head element to the _app.js file I start to see the icon on safari.

import React from "react";
import Head from "next/head";

const faviconUrl = "myUrl";

export default function MyApp() {
    return (
        <>
           <Head>
              <link rel="icon shortcut " href={faviconUrl} />

              <link rel="apple-touch-icon" href={faviconUrl} />
           </Head>
        </>
    );
}

However I still don't find any way to dynamically update the favIcon on safari but it look like it's just not possible.
Ref: Can't change favicon with javascript in safari

Example: https://mathiasbynens.be/demo/dynamic-favicons

Thank for your help.