Cms: Favicon changes to Craft logo in the control panel

[darylknight]

Description

In 3.4.17, the favicon changes to the Craft logo when viewing the control panel. Clients are finding this confusing and would like it changed back to their own logo. From a client this morning:

_"I just noticed that the icon changed from our logo to the Craft logo on the bookmarks bar. Is it possible to change it back? Should I do that on my end?"_

I'm guessing this is deliberate, but can we change it back?

Additional info

• Craft version: 3.4.17

[lindseydiloreto]

I'm not offended by the change, but I do find it confusing.

Especially if you have multiple CP pages open for several different websites. All of the tabs will have the same icon, despite the fact that they represent different sites.

[lindseydiloreto]

@jalendport just pointed out this on Discord... https://github.com/craftcms/cms/issues/4003

If it's easy for us to override the favicon, and the default fallback is the Craft logo, that definitely feels like the best solution! 👍

[brandonkelly]

Yep, will be customizable in 3.5 :)

[jonlongnecker]

In Safari, this not only affects the control panel, but all frontend pages also show the craft favicon which is suuuuuper confusing for both clients and myself as I try to work on building sites out. If I clear the browser cache, it will load the proper site favicon until I visit the CP and then it gets changed again. Is Craft doing something with expires headers or something that would cause this to happen?

[brandonkelly]

@jonlongnecker Weird, Craft is simply setting the icon with a <link rel="icon"> tag on CP pages. Maybe try setting your favicon explicitly like that, instead of just favicon.ico?

[darylknight]

Just out of interest - what prompted Craft setting it's own Favicon for control panel pages to start with?

[brandonkelly]

I was implementing #4003 and realized Craft has always been sortof meaning to set its own favicon, but there was a bug so it wasn’t actually showing up. So…

[jonlongnecker]

@brandonkelly I've tried that, but it still overrides it once I visit the control panel.

I'm guessing it has to do with the last one:

<link rel="mask-icon" href="https://site.com/cpresources/601feb15/images/icons/safari-pinned-tab.svg" color="#e5422b">
That's a relatively new thing, and most sites probably won't have that set. Could we either remove that or at least give us an option somewhere to stop Craft from forcing this so we don't have to go back and update all our sites?

If have some time I'll try to go back and make an SVG version of my favicon and test, just can't get to it right now.

[brandonkelly]

Ah gotcha. Those have been around since 2015, and definitely a good idea to add to your sites! I’m going to leave things as-is for now, since 3.5 will in fact give you a way to override it, via the new cpHeadTags config setting, and even if Safari is showing the CP mask icon on the front-end, that would only be for people who have actually visited the control panel. So it won’t affect your public web traffic.

[jonlongnecker]

One more idea - could the "Site Icon" be used for the control panel favicon? If none is set, then we see the Craft favicon, but if a custom one is set, it gets used instead. I know it doesn't affect site visitors, but it does affect both the developer and client who login to the backend.

[brandonkelly]

Definitely considered that, but browsers are pretty picky on the file types allowed for favicons, unlike that setting.

[jonlongnecker]

Following back up here. The mask icon only supports a single color, and isn't ideal for some icons. i.e. I'd like my favicon to match my logo, but because Craft is forcing the icon mask, it isn't possible anymore. Hopefully 3.5 will help with this.

[brandonkelly]

Well that’s a stylistic restriction that Safari has made. Any logo worth its salt will have a way of representing it in a single color though.

[jonlongnecker]

FYI, after adding my own custom mask it will show correctly right after clearing the icon cache, but after quitting Safari and coming back it gets overriden again to the Craft icon until I visit multiple public facing pages and it eventually starts pulling the one I created. I can't tell if it's a Safari issue or Craft issue at this point, but it's annoying and inconsistent.

[ryanmasuga]

Why is Craft setting any favicon in the CP or otherwise? Just like the default "Craft News" widget in the control panel - probably something our clients will never need to see, and if it's leading to actual _confusion_, even worse. I've had a harder time finding a few CP's among tabs once this glitch was "fixed" to work - I assumed those tabs were Craft's own website. And there's the extra bit of confusion when I have control panels for more than one site open at a time.

The less "branding of the tool" a client sees and the more "when I look at our website admin it feels like it's ours" they see, the better. Personally I think a great online tool is nearly invisible.

[j-greig]

after quitting Safari and coming back it gets overriden again to the Craft icon until I visit multiple public facing pages and it eventually starts pulling the one I created.

We have someone experiencing a similar issue with the Craft favicon showing in Safari on the frontend too, is there a fix for this or is it a browser thing? (happening for me too in Safari 14.0 (15610.1.28.1.9, 15610) and my creative director is flipping out, haha)

[jonlongnecker]

@j-greig I think it's just how Safari works. Either way I still wish Craft had never started forcing it's own mask so we'd have to override it. I'd prefer not to use the mask at all, and just use a favicon.

[piperhaywood]

Just adding, I’m in a similar boat... I totally understand the reason for wanting to add a Craft favicon, but considering how harsh caching is in so many browsers, particularly Safari, this is causing an unnecessary headache. Specifically for the reason that @jonlongnecker mentions, that visiting the Craft admin area can suddenly force the Craft icon to load everywhere on the front end. This is even when I add URL parameters to cache bust, unfortunately that doesn’t fix anything.

[brandonkelly]

@piperhaywood You can customize it using the cpHeadTags config setting (added in Craft 3.5).

[ryanmasuga]

This is overridable, sure, but I still have to ask: if this were an option and _not_ the default, would anyone actually _enable_ it? (That goes for any feature, really). Would I ever want to set my client's control panel (which they likely paid good money for) to any favicon other than their own? Why bother implementing this and having to have devs spend any time searching for this thread and wrestling with it instead of doing nothing here, which then requires zero core team dev time, and zero config customization overrides?

[mmikkel]

I think it's a very good idea that Craft requires devs to actually declare the favicon to display for CP requests and falling back to a default "Craft" favicon if none is set, rather than depending on browsers to _hopefully_ display the correct favicon for that domain. The "default" (i.e. pre-Craft 3.5) behaviour was very broken and only appeared to work due to the browser being able to pull the correct favicon from its cache, for most visitors (sometime you'd get no favicon or even the wrong one).

FWIW I do think the cpHeadTags is a bit convoluted and difficult to use, though. It would be nice if there was an _easier_ way to tell Craft which favicon to use for the CP.

[brandonkelly]

FWIW I do think the cpHeadTags is a bit convoluted and difficult to use, though. It would be nice if there was an _easier_ way to tell Craft which favicon to use for the CP.

I’m not thrilled about it, but defining favicons is pretty convoluted in the first place, so there wasn’t really an easier way to do it.

Worth mentioning that you don’t need to include all the different favicon head tags though; If Craft detects any head tags that look like a favicon, it will skip adding any of its own ones.