How to target Favicon - dynamic favicon

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?


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

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 = [
'....... more images here'

const renderFavicon = (state) => {
    const data = state.source.get(;
    const post = state.source[data.type][];
    let id = null;
    if (post) {
        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; = 'favicon';
        link.rel = 'icon';  
        link.href = icon;

    }, [id]);

export default renderFavicon;

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.