3

I've been working on a bookmarklet that performs some logic and then redirects the user to a different page. I'm running into an issue where, after the redirect, Chrome is replacing the icon of the bookmark with the favicon from the target of the redirection.

I'm trying to preserve the original icon on the bookmarklet and so am wondering if there is any way that I can prevent this behaviour?

As an example. Bookmarklet starts off looking like this:

with default favicon

If the bookmarklet were to redirect the user to Stack Overflow then on clicking the bookmarklet icon is replaced:

gets replaced with icon from target site

I've tried a couple of approaches to perform the redirect, all of which have this behaviour:

  • Bookmark is a link to a server-side page that performs the redirect by returning a 302 with a Location header

  • Bookmark is a link to a server-side page that executes JavaScript on page load that performs the redirect using window.location.replace

So far I have a couple of other approaches which avoid this particular issue, but have other downsides of their own:

  • Bookmark is a link to a server-side page that executes JavaScript on page load to perform the redirect using window.location.assign - if user click the back button they are taken to my page which then redirects them again, and can result in the user getting stuck in a loop

  • Bookmark is a javascript: link which makes a fetch request to perform logic in the background and then goes to the target page using window.location - this works OK, except for on a new blank tab where JS bookmarks are no longer allowed.

mikej
  • 65,295
  • 17
  • 152
  • 131
  • Have you tried other 3xx status codes? What about ``? – user3840170 Jul 11 '21 at 14:34
  • thanks for the suggestions @user3840170 - I've tried with a 303 and that behaves same as a 302 in terms of replacing the favicon. Using a `` was a good suggestion - this preserves the original favicon, but unfortunately adds a page into the history so has the same issue mentioned in the question as using `window.location.assign` – mikej Jul 15 '21 at 11:36

1 Answers1

0

It should be possible to prevent the replacing of favicon for some time for a redirect,by configuring the caching time:

* https://web.dev/service-worker-caching-and-http-caching/
* https://stackoverflow.com/questions/5799906/what-s-the-difference-between-expires-and-cache-control-headers
Alfred.37
  • 181
  • 1
  • 12
  • Hi. Thanks for looking at my question. Please can you expand on this answer a bit as I'd like to give this a try? Do you mean that I should be setting an `Expires` header for my own favicon? Currently Chrome is following the redirect and then fetching the favicon for the target site, which will will have a different URL to my own favicon so I'm not sure caching of my own favicon would help? – mikej Jul 09 '21 at 07:26