Including my favicon in Volto frontend instance

I’ve almost migrated my Plone+Volto instance to Volto 18 but am stymied trying to get the built frontend image to use my custom favicon. I am able to get the favicon to show in a make start-frontend process, though there’s a big gotcha there which I’ll describe below.

Here are some of the things I’ve tried:

  • I have copies of various image formats of my favicon: favicon.ico, favicon.png, and icon.svg, in my monorepo inner package src/public, ie <project-dir>/frontend/packages/volto-myriadicity-net/src/public/ and in my monorepo outer package public folder, ie <project-dir>/frontend/public/
  • When the built image didn’t include my icon I added volto-site-settings to my configuration and used the running-instance Volto Site settings to upload the favicon. The instance still shows the Plone favicon.
  • I also specified my favicon in the Plone classic Site settings. The favicon then shows in the classic view, but still not in the Volto frontend.

As I mentioned, I’m able to get my favicon to show in the Volto frontend if I run it via make frontend-start from the project root directory. HOWEVER, I discovered that running make frontend-start (or make start from the frontend directory) causes the icon files in the frontend/public folder to be overwritten by the standard Plone icon files. (What the heck?) The running image then shows the standard Plone favicon. It was only after I noticed that happening that I watched for when it happened and quickly recopied my icon files to the directory. Then my custom favicon will be used as the site favicon.

Unfortunately, that doesn’t help with the built docker image.

To compound the mystery, I was successful in getting the icon to be included in one of my built images. It happened when I was working with Volto 18.29.1. Trying a fresh instance to reassure myself that I could reliably get that result, I was subsequently unable to do so in many many tries! I was unable to get the favicon to show the Volto frontend from a running docker image with either 18.29.1 or the more recent 18.30.0.

In my flailing I tried doing a search through the entire monorepo for favicon.ico and icon.svg and replacing the files with my versions of the favicon. Even still, the built image uses the Plone favicon.

This is driving me crazy (possibly not a long ride). What am I missing??

I was wrong about one thing that’s important to mention. I had not activated the Plone companion addon for volto-site-settings, collective/collective.volto.sitesettings. I had included it in my Plone build, however. When I did activate it (through the Add-ons through-the-web site configuration panel, all Volto vists to my site fail with

“Sorry, something went wrong with your request: url.replace is not a function”

I’m unable to get to the Volto online Site settings to remove the Plone addon. I am able to get to the Plone site settings panel, but trying to remove the addon from there fails.

Nothing I’ve tried enabled me to recover that version of my Data.fs.

Fortunately I have a recent back up which I’m able to use. Re-enabling collective/collective.volto.sitesettings causes the problem again. So I recommend being very cautious with using it with Volto 18 – have a backup of your Data.fs! (I’m going to try building the backend without the addon, will followup if that enables use of the Data.fs, but wanted to post this as soon as possible in case anyone else tries it.)

Good news – rebuilding the backend without collective/collective.volto.sitesettings eliminated this failure, enabling full use of the Data.fs. I’m leery of using it, though, will probably stick with my recent copy to avoid questions.

Just in case it’s not clear: I’m still unable to get my built Volto 18 frontend image to show my favicon rather than the default Plone one! The problem I solution I mentioned in the prior thread messages is a dangerous collective.volto-settings apparent incompatibility with Volto 18.

I’d really appreciate help getting my built image to show my favicon! Is this not a problem for anyone else?

Did you see this? Especially the backend part.

@klm you don’t need any add-on. It is documented in:

Thanks once again, @sneridagh. I had tried using the src/public folder in my project addon and the public folder in the project root frontend directory, but not a public folder in the root of my project addon. Add static files from your add-on to your build — Plone Documentation suggested trying that and it worked.

1 Like