How to Create a Favicon That Changes Automatically

This article introduces how to use JavaScript to dynamically change the website favicon icon, and uses the real-time display time as an example to demonstrate how to implement this function in ordinary JavaScript and React environments. Some websites use dynamic favicon as a clever way to notify users of page updates, such as displaying red dots and other prompt information.

Inspired by an online favicon generator, and the possibility of changing favicon dynamically, I got the idea of ​​using clock emojis to display the current time. This requires checking the time every minute and setting the corresponding clock emoji as favicon.

First, the following function takes an emoji as a parameter and returns a valid data URL that can be used as an image (or favicon!) source:

 // Thanks https://formito.com/tools/favicon
const faviconHref = emoji =>
  `data:image/svg xml, <svg height="" viewbox="" width="" xmlns="" http:><text dominant-baseline="" central font-size="" text-anchor="" middle x="" y=""> ${emoji}</text></svg> `

Next, this function is located<link> Tag (created if it does not exist) and change its href attribute to a new emoji:

 const changeFavicon = emoji => {
  // Make sure we have access to the document, i.e. we are in the browser.
  if (typeof window === 'undefined') return

  const link =
    window.document.querySelector("link[rel*='icon']") ||
    window.document.createElement("link")
  link.type = "image/svg xml"
  link.rel = "shortcut icon"
  link.href = faviconHref(emoji)

  window.document.getElementsByTagName("head")[0].appendChild(link)
}

(Thanks to Stack Overflow's answer for providing this clever trick for using<link> Create a tag when it does not exist. )

You can copy and paste these two functions directly in the browser console and call changeFavicon("?") to test. You will see the emojis that favicon changes to dancing.

Going back to our clock project, we need to determine the clock emoji to display based on the current time. For example, 10:00 shows?, 4:30 shows?. Since not all times have corresponding emojis, we will show the closest ones. For example, 9:45 to 10:14 displays a clock of 10:00; 10:15 to 10:44 displays a clock of 10:30, etc.

We can implement it using the following function:

 const currentEmoji = () => {
  // Add for 15 minutes, round down to the closest half hour const time = new Date(Date.now() 15 * 60 * 1000)

  const hours = time.getHours() % 12
  const minutes = time.getMinutes()
  // ... (Omit some code, the same as the original text) ...
}

Then, use the setInterval function to call changeFavicon(currentEmoji()) once a minute.

In a React environment, we can use useEffect and custom hook useInterval to achieve the same functionality, ensuring that changeFavicon function is called when the component is mounted and updated every minute. (The React code part is omitted here, the same as the original text)

Summary: We have implemented the function of dynamic update of favicon by combining code snippets from three different sources. Breaking the problem into smaller subproblems and making full use of existing solutions is the key to efficiently solving problems. This is an effective way to enhance the user experience of the website and can be applied to various scenarios, such as display notifications, time updates, etc.

The above is the detailed content of How to Create a Favicon That Changes Automatically. For more information, please follow other related articles on the PHP Chinese website!