How to target Favicon - dynamic favicon

🙋Get Help
1

Hi there,

I’m trying to have a dynamic favicon and to do that I need to target the but if I inspect the page of my site there is no favicon there. How is the favicon being pulled in with Frontity?

Thanks

2

hi @jeff, I have already given a solution on another post. You can check that

3

Hi @santoshdevnath15 , thank you for your reply. I did see your post but that actually wasn’t what I was after.

I needed to target the with rel=“icon” in order to have the favicon change depending on which page was visited but even if I viewed the page source code I could not find it…! I am not entirely sure how the favicon is added with Frontity but I managed to do what I needed in the end.

Here is the code I’ve used in case some future visitors will need it. I am not sure if that’s good practice but it does work for me so… :slight_smile:

import React, { useEffect } from "react";

const DEFAULT_FAVICON = '/favicon.ico'
const PREFIX = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg'
const ICONS = [
  'BAMAAACBVGfHAAAAElBMVEXlJDr63+H////1vMDxo6n41Nd4GK42AAAAIklEQVR4AWMYWMCohCZghCbAooQmwIQhEIRuBtOwFaA/AADRVgNQbXq16QAAAABJRU5ErkJggg==',
  'CAMAAABEpIrGAAAAJ1BMVEXEGS3MTln////hoKX46uvVc3vpu77IN0X79PX03+Dw09Xsx8rdkpgeIyppAAAATElEQVR42uXKKQLAMAzEQEfO6eT/721J6RoURkBo7M4KIIFnoCagkYCegAFTAmeFBBWXoEGRoLNNgQFHAmeaBIt4JwBfOVAF2H9wYQ/NrAFpV42SQAAAAABJRU5ErkJggg==',
  
'....... more images here'
];

const renderFavicon = (state) => {
    const data = state.source.get(state.router.link);
    const post = state.source[data.type][data.id];
    let id = null;
    if (post) {
        id = post.acf.id;
    }

    useEffect(() => {
        const icon = id ? PREFIX + ICONS[id - 1] : DEFAULT_FAVICON;
        const type = id ? 'image/png' : 'image/icon';
        const faviconEl = window.document.getElementById("favicon");
        if (faviconEl) faviconEl.remove();
        const headID = window.document.getElementsByTagName('head')[0];
        let link = window.document.createElement('link');
        link.type = type;
        link.id = 'favicon';
        link.rel = 'icon';  
        link.href = icon;

        headID.appendChild(link);
    }, [id]);
}

export default renderFavicon;
4

Hi @jeff, I am also not sure that how we can use a different favicon in Frontity for different routes. Yeh, you may have a temporary solution for that :innocent:

Let’s see if in the future Frontity makes any official update on Favicon.