SVG and Emoji favicons not showing up on tabs

entorotoro

Recently, the svg favicon is no longer showing up in the tabs. (Mac&Windows)

Specific example.
I can customize the favicon of a page in Notion, but if I set emoji as favicon, it is displayed on the tab. However, if I make a favicon of svg format, it is not displayed.
But when I use Chrome, it is displayed.

Pathduck

@entorotoro Hello and Welcome to the Vivaldi Community

Not sure what you mean by "no longer" - As far as I know, SVG favicons have never worked in Vivaldi.

Test site: https://000458870.codepen.website

I recommend you report a bug.

Please read:

carefully and report the bug to Vivaldi bugtracker

It is recommended for web devs to make sure there is a favicon (ico/png) fallback as browser support is not complete:
https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
https://caniuse.com/link-icon-svg

skorphil

Hi, i've noticed broken favicon on one site
Screenshot 2023-05-24 at 20.19.36.png
However Chrome displays that favicon normally.
I've tried to open private window but favicon still broken in Vivaldi.

After investigation I've noticed that this behavior probably due to uncommon way of setting up favicon on that page. So Vivaldi seems struggle to understand such things

<link href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<style>
svg {
background: transparent;
}
path {
fill: black;
}
@media (prefers-color-scheme: dark)  {
path {
fill: white;
}
}
</style>
<path fill-rule='evenodd' clip-rule='evenodd' d='M81.8182 18.1818V81.8182H18.1818V18.1818H81.8182ZM10 90V10H90V90H10Z'/>
</svg>" rel="icon">

RasheedHolland

Hi,

Can you guys verify that you get no favicon on FT? I do get it on Edge and Firefox.

https://www.ft.com

DoctorG

@RasheedHolland Correct.
And even with fresh profile, with no settings done, the icon is missing.
But shows up in Private Window and Guest Window.
Strange.

Pathduck

I guess SVG favicons still don't work in Vivaldi.
https://forum.vivaldi.net/topic/87407/svg-and-emoji-favicons-not-showing-up-on-tabs

https://000458870.codepen.website
https://emojitofavicon.com

FT uses an SVG:
<link rel="icon" type="image/svg+xml" href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=svg"/>

The site uses an alternate icon too:
<link rel="alternate icon" type="image/png" href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=png" sizes="32x32"/>

But Vivaldi does not fall back on this as it "should" - but then again that's stupid HUGE for a favicon (1024x) and anyway Chrome++ does support SVGs so it's probably just a matter of getting Vivaldi to display it properly.

I thought the whole "SVG as favicon" was just something the cool kids were doing for fun - apparently this is now a thing...

DoctorG

This post is deleted!

DoctorG

Is this bug:
VB-81544 "Emojis as favicons appear blank" - Confirmed

DoctorG

@Pathduck But why does the icon show up with 6.1.3035.111 in Private Window of Guest Window?

Pathduck

@DoctorG Yes - well FT is not using an emoji but an actual SVG, but the same concept applies and probably same cause.

But why dos the icon show up in Private Window?

Very good question... always the private window weirdness.
I have no idea, will check.

Pathduck

So in a private window, examining the tab favicon in the UI:

<span class="favicon jstest-favicon-image ">
	<img width="16" height="16" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=svg">
</span>

In a normal window:

<span class="favicon jstest-favicon-image ">
	<img width="16" height="16" srcset="chrome://favicon/size/16@1x/iconurl/https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-ft-logo-square-coloured?source=update-logos&format=svg 1x,chrome://favicon/size/16@2x/iconurl/https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-ft-logo-square-coloured?source=update-logos&format=svg 2x">
</span>

Basically the srcset for the private window icon is a direct link to the SVG, while in the normal window, it links to the Chromium favicon store/database. Maybe some privacy measure in private windows, as they cannot rely on stuff being cached?

After visiting FT in a private window, close it and see the difference between these two urls:

chrome://favicon/size/16@2x/iconurl/https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-ft-logo-square-coloured?source=update-logos&format=svg

chrome://favicon/size/16@2x/iconurl/https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=svg

Note the lack of encoding for the failing icon url - the : is not encoded as %3A
But that last one is not an actual SVG of course, since the Chromium store cannot cache SVGs (far as I know).

Pathduck

But Vivaldi is clearly able to retrieve the favicon for display in the UI, just not in the tabs...

DoctorG

@Pathduck Broken caching?

Pathduck

@DoctorG Nah, just broken Vivaldi

They'll need to fix this so that SVG favicons show. That will probably also fix issues with sites using emojis as favicons, as it's the same concept.

DoctorG

@Pathduck Can you add your valuable finding to VB-81544 Mr. Shörlock Duck

RasheedHolland

Guys, thanks for all the feedback.

Is there any news on when this will be fixed? Here is another example on the Dutch website from Häagen-Dazs.

https://www.haagen-dazs.nl

DoctorG

@RasheedHolland said in No favicon on FT.com, only with Vivaldi?:

Is there any news on when this will be fixed?

No timeline, and most of the dev team is in summer vacation for some weeks.

RasheedHolland

@DoctorG said in No favicon on FT.com, only with Vivaldi?:

@RasheedHolland said in No favicon on FT.com, only with Vivaldi?:

Is there any news on when this will be fixed?

No timeline, and most of the dev team is in summer vacation for some weeks.

OK thanks, too bad that it takes so long to fix things and to add features.

DoctorG

@RasheedHolland A fix is in progress. That's all i know.

RasheedHolland

Come on guys, fix this already, it's a month later and it's really annoying. It shouldn't be this hard to fix a simple thing like this.