CODEWITHSUNDEEP
javascriptreactjsfaviconremix.run
sajalsuraj
sajalsuraj

Reputation: 992

How to replace favicon in Remix run from the default one to custom one?

I am not able to figure out how to remove the default favicon and replace that with a custom favicon in Remix. In the web pages the default favicon is replaced but when I open a media file from my website in a different tab let's say an image or a PDF file that is hosted on my website, in that case, the default favicon of Remix appears.

enter image description here

You can see in the above screenshot. In normal web pages my custom favicon works fine. I have implemented it like this -

export function links() {
  return [
   {
     rel: 'apple-touch-icon',
     sizes: '180x180',
     href: '/favicon/apple-touch-icon.png',
   },
   {
     rel: 'icon',
     type: 'image/png',
     sizes: '32x32',
     href: '/favicon/favicon-32x32.png',
   },
   {
     rel: 'icon',
     type: 'image/png',
     sizes: '16x16',
     href: '/favicon/favicon-16x16.png',
   },
   {
     rel: 'icon',
     type: 'image/x-icon',
     href: '/favicon/favicon.ico',
   },
   { rel: 'manifest', href: '/favicon/site.webmanifest' },
   {
    rel: 'mask-icon',
    href: '/favicon/safari-pinned-tab.svg',
    color: '#5bbad5',
   },
 ]
}

But the same doesn't work in the case of hosted media files. Any help would be appreciated, thanks :)

Upvotes: 9

Views: 9016

Answers (1)

Kiliman
Kiliman

Reputation: 20312

Since a web page can include the <link> tag for favicons, the browser will display it correctly. However, for direct links to resources like images or PDF, there is no way to specify the favicon, so the browser will request the /favicon.ico file. This is located in the /public folder.

Replace this file with the correct icon. If you're still seeing the old icon, then you'll need to purge your cache. By default, files in /public are cached for 1 hour.

Upvotes: 11

Related Questions