1

Via Javascript/jQuery I can update the browser tab favicon, modifying the href attribute on the related link tag, so far so good.

The problem is when I remove the link tag or update its href to an invalid URL via Javascript/jQuery, it leaves the previous favicon instead of removing its space from the browser tab.

If I change the href from the Dev Inspector, to an invalid URL it DOES remove the space though.

I don't want to have the default browser favicon, what I need is to remove its space completelly.

Any ideas on how can I force the favicon space from the tab?

See these images for reference:

Desired outcome (if link href is set to invalid URL via Dev Inspector, this is the desired outcome):

enter image description here

A temp fix by using a blank data URI (not what I need):

enter image description here

The <link> tag in the <head> whom I'm modifying its href:

<link rel="icon" href="http://some-site.com/favicon.png" sizes="32x32">

Diosney
  • 10,520
  • 15
  • 66
  • 111
  • have you looked at https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically – Snowmonkey Jan 19 '18 at 16:17
  • Looks like you can't - browsers require it. Read https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests – dahrens Jan 19 '18 at 16:23
  • Can you include the applicable HTML with your question? Also, view your icon issue with Chrome, then right click over the area of interest and select "Inspect". That might show you what is causing your problem. – JohnH Jan 19 '18 at 16:30
  • The threads mentioned provide solutions but would not a transparent png assigned using your jquery script not work? It should in theory. – garrettlynchirl Jan 19 '18 at 17:05
  • @garrettlynch Right now I use a transparent data uri, which results in the image above with a blank space after the page title and that is not the desired outcome. – Diosney Jan 19 '18 at 18:01
  • @Snowmonkey I checked that answer before posting my question and none of the answer there fixed my issue. Note that I want to completely remove the favicon from the page to not leave any trace of it, mainly from the browser tab, and none of the answers there delete the favicon, they just change it. – Diosney Jan 19 '18 at 18:07
  • @diosney I see I didn't understand "blank data URI". So it's the left offset that is the issue really? I don't think there will be a solution to that as there has to be icon. Perhaps the only thing to do is to minimise what offset the icon creates by making the transparent png only 1 pixel wide. – garrettlynchirl Jan 19 '18 at 18:10
  • @JohnH This question is so simple that I think it don't need HTML however I added the tag `link` that I'm modifying its href. – Diosney Jan 19 '18 at 18:17
  • @dahrens I'm looking through all answers to test if anyone serves me, I will let you know since I didn't saw that page. – Diosney Jan 19 '18 at 18:19
  • Yeah, I'm actually playing around with it quite a bit, and its far more involved than it seemed. I'll let you know if I find anything. Sorry for my earlier, naive, flip answer. ;) – Snowmonkey Jan 19 '18 at 18:20
  • @garrettlynch The issue is exactly that offset. I will try the 1px offset solution to see if that works. Thanks. – Diosney Jan 19 '18 at 18:20
  • @Snowmonkey Noo! Any help is very much appreciated, and you didn't have a way to know beforehand that I checked that page, so it is my fault to not provide that info in the question :) Thanks again to make time to help. – Diosney Jan 19 '18 at 18:26
  • @dahrens I went over every single answer and comment in the provided link and none works for both Firefox and Dhrome. The only partial answer that worked in firefox was replacing the `href` with `data:;base64,iVBORw0KGgo=`, but in Chrome it left the previous icon. It seems that support for this is very limited indeed, maybe I will have to provide a default generic favicon to overcome this, since with pinned tabs a transparent png will be a bad solution. – Diosney Jan 19 '18 at 20:55
  • As I said - I don't think it is possible. Browser rely heavily on a favicon to use it in history, bookmarks, tabs... if there is none - they just create one... So if you provide a transparent one (and they support to draw it properly) in a data uri the empty space will always be present. – dahrens Jan 19 '18 at 21:28
  • This used to be possible in Firefox but it JUST stopped working yesterday... I doubt they'll ever fix it. – 12Me21 Oct 26 '18 at 21:51
  • (The solution was to insert a new favicon element with the `href` set to `""`) – 12Me21 Oct 26 '18 at 22:12

0 Answers0