Weird WhatsApp web panel custom icon behaviour.

[junglized]

Hi everyone,

I've used this topic to change default web panel icons. Everything works properly except of WhatsApp icon, which is relatively bigger than other icons despite a proper CSS rule to be set for that and the rest of icons. The strange thing is other icons (FB, Skype, etc.) have different address than WhatsApp icon. I can't really see what is the problem here?

See the screenshot attached below. Cheers, Dan.

[Tchelows]

Here is normal for me, dude. Even connected too.

[LonM]

@junglized Just to clarify the situation:

• Is the svg you're loading in from your custom.css displaying too big, or
• is the default favicon being too big, and your custom.css is being overridden?

[junglized]

@Tchelows
Congratulations! Seriously!

@LonM
I observed one strange thing. When I click and open WhatsApp web panel right after the browser launches the icon remains in it's correct size with the image address https://web.whatsapp.com/img/favicon/1x/favicon.png, but when the panel remains closed for a few seconds after starting up the browser it enlarges itself changing image address to the one being displayed on screenshot: blob:https://web.whatsapp.com/blablabla, where blablabla changes to a different string everytime I close and start the browser anew.

What the heck is "blob:" in the img's address?

Regards, Dan.

EDIT:

There is more to that: When I remove "content:" rule (the one setting custom image) from my custom.css and restart the browser I see nice default WhatsApp icon. It remins unchanged in size whenever I open the panel straight after browser starts up, but when I wait few seconds with opening the panel after launching the browser default icon disappears completely. no enlarged image anymore...well no image at all.

The image address changes exactly the same way wether the custom image or default icon is being applied.

[LonM]

@junglized I think whats happening is whatsapp's web interface acts using a new HTML5 technology which lets it act like a pseudo-app which can function offline. To do this, it needs to store some stuff in the browsers storage, and I suspect thats what the blob is making a reference to.

This is pure speculation of course. I'm also not sure why it would cause the icon to change size.

If you want to replace it with something else, I'm also not sure how you can do that with the "content" property - that should only work on before/after pseudo elements. I would have instead hidden the image and set a background-image on the button itself.

[junglized]

@LonM It is possible to apply content rule to non-pseudo elelements such as img, h1, etc: (Check this out). I'll create pseudo elements on buttons and set backgrounds in those elements. That should work flawlessly.

I'm still wondering why it didn't work with initial portion of CSS.

Cheers.

[Hadden89]

I think WA changed the behaviour now. nope

Tried to add its panel just now (I seldom use it) and it searches for favicon at https://web.whatsapp.com/img/favicon/1x/favicon.png

Well, I'll keep on to see if strange blobs appear or if it breaks

Yeah, it becomes blob:https/web.whatsapp.com/<blob unique value?> after restart also here. And favicon vanish.
It's not cleaner to use a js to change the img src value from blob to url than using a draft css?
Well, in my case image wasn't hooked (probably my fault), but the css fix itself, prevent the url/blob change. nope.