Let's also enable iteration through favicons via the hook. Create a new hook, 

touch src/hooks/useFaviconChangeEffect.ts

export const useFaviconChangeEffect = (
  faviconLinks: string[],
  shouldIterateFavicons: boolean
) => {
}

You'll need a state variable to keep track of the current favicon index:

const [faviconIndex, setFaviconIndex] = useState(0);

Also, set up a ref for the current favicon, since constantly finding the favicon in the DOM every time you need it isn't very efficient. Then use the 

 hook to change the favicon every 500 ms. Pass in the 

 value to determine whether or not the interval should be running.

const faviconRef = useRef<HTMLLinkElement>(null);

// at an interval of 500 ms, increment the faviconIndex value
useInterval(
  () => {
    const nextIndex = faviconIndex + 1;
    nextIndex === faviconLinks.length
      ? setFaviconIndex(0)
      : setFaviconIndex(nextIndex);
  },
  500,
  shouldIterateFavicons
);

Favicons can be stored in a variety of ways and formats. You'll need a custom function to try and find the favicon in the DOM. Create a new folder 

 depending on whether a favicon is successfully found:

export const getFavicon = () : HTMLLinkElement | null => {
  
}

To find the favicon URL, get all elements by the 

export const getFavicon = () : HTMLLinkElement | null => {
  const nodeList = document.getElementsByTagName('link');
  for (let i = 0; i < nodeList.length; i++) {
    if (
      nodeList[i].getAttribute('rel') === 'icon' ||
      nodeList[i].getAttribute('rel') === 'shortcut icon'
    ) {
      return nodeList[i];
    }
  }
  return null;
}

---
title: Implementing Favicon Modification Functionality
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-10
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/6m27ao9splr2yI5c8UtmEjlm8SULpvEKpfbx6UcnsXw.m3u8
---

Let's also enable iteration through favicons via the hook. Create a new hook, `useFaviconChangeEffect`, which will resemble `useTitleChangeEffect`:

```shell
touch src/hooks/useFaviconChangeEffect.ts
```

It should take a parameter `faviconLinks`, an array of strings, and `shouldIterateFavicons`, a `boolean` type:

```ts
export const useFaviconChangeEffect = (
  faviconLinks: string[],
  shouldIterateFavicons: boolean
) => {
}
```

You'll need a state variable to keep track of the current favicon index:

```ts
const [faviconIndex, setFaviconIndex] = useState(0);
```

Also, set up a ref for the current favicon, since constantly finding the favicon in the DOM every time you need it isn't very efficient. Then use the `useInterval` hook to change the favicon every 500 ms. Pass in the `shouldIterateFavicons` value to determine whether or not the interval should be running.

```ts
const faviconRef = useRef<HTMLLinkElement>(null);

// at an interval of 500 ms, increment the faviconIndex value
useInterval(
  () => {
    const nextIndex = faviconIndex + 1;
    nextIndex === faviconLinks.length
      ? setFaviconIndex(0)
      : setFaviconIndex(nextIndex);
  },
  500,
  shouldIterateFavicons
);
```

## Favicon Determination

Favicons can be stored in a variety of ways and formats. You'll need a custom function to try and find the favicon in the DOM. Create a new folder `utils`, and a new file `getFavicon.ts`. This function will return a `HTMLLinkElement` or `null` depending on whether a favicon is successfully found:

```ts
export const getFavicon = () : HTMLLinkElement | null => {
  
}
```

To find the favicon URL, get all elements by the `link` tag name:

```ts
export const getFavicon = () : HTMLLinkElement | null => {
  const nodeList = document.getElementsByTagName('link');
  for (let i = 0; i < nodeList.length; i++) {
    if (
      nodeList[i].getAttribute('rel') === 'icon' ||
      nodeList[i].getAttribute('rel') === 'shortcut icon'
    ) {
      return nodeList[i];
    }
  }
  return null;
}
```

Now, back in `useFaviconChangeEffect`, instead of passing `null` as the initial value for the faviconRef, use the `getFavicon` function:

Chris Frewin

Implementing Favicon Modification Functionality

Let's also allow iteration through favicons via the hook.

Let's create a new hook called use favicon change effect.

And this will end up looking quite similar to use title change effect.

So we'll export const, use favicon change effect.

And this hook will take a parameter called favicon links, which is of type

and should iterate favicons, which is type boolean.

We first need a state variable to keep track of the current favicon index.

We're also going to set up a ref for the favicon since every time we need to

it's not very efficient to search through the entire DOM to find it.

So I'll just call it favicon ref and use ref.

This will be of type HTML link element within initial value of null.

And similar to what we've seen in use title change effect, we're going to use

calculating the next index by incrementing the current favicon index.

And if the next index is already at the end of our favicon links array,

Otherwise, we can continue on with the next index.

We'll also use a interval of 500 milliseconds.

And we'll pass on this should iterate favicons parameter to toggle when the

And then we'll create a new folder called utils.

And within this folder, we'll create a new function.

This function is going to hopefully return an HTML link element.

But in the case that it can't find anything, it will return null.

We would expect the favicon to be a link tag and also with attribute rel of

So first we're going to get all the nodes that are of type link.

Then we're going to loop at this list and check if the link tag that we're

If that tag has a rel attribute and if it's equal to icon or it's equal to

So if this is the case, we will return that element.

If we come all the way down to here, that means we haven't found one and we'll

Now back in use favicon change effect, instead of passing null as the initial

favicon ref, we can call our get favicon function.

And now we can write the use effect hook that actually updates the favicon.

And similar to what we've already seen in use title change effect, we're going

favicon index and every time that changes, we will set the favicon ref current

ref value of the favicon links passed in at that favicon index.

We can import this from react and format this hook.

And now let's finally add use favicon change effect to use please stay.

Just like the other custom hooks we've written, I'm going to add a comment.

Modifies the favicon of the page whenever should iterate titles is true.

So use favicon change effect, favicon links and should iterate titles.

And of course we have to add these favicon links as a new parameter, which is

So we're ready to test this new functionality in the example app.

First we'll rebuild, we'll move into the example app and to just make sure it's

Let's just do the loop animation type and we'll do we heart react and alternate

we heart new line and the corresponding favicons here one comes from react.org.

This also happens to be the default create react app favicon and the new line

Let's format this so it's a bit easier to read.

So we've got our default title here and we expect when we open this new tab for

So we successfully built a way to change the favicon dynamically along with the

In summary, we created a new use favicon change effect that was largely

We created a custom get favicon function that helps us find the favicon in the

We added use favicon change effect to our main use please stay function, which

that we expose a new parameter to use please stay, which is this favicons

We then rebuilt our hook and tested it in our example app and we saw that it

In the next lesson, we're going to allow adding the interval time as a

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript