Favicon SVG not possible

How To
1

I am not sure - what is the best way to use an SVG as favicon?
Downloading it as a theme website icon is not possible.
Thanks for any hint.

2

I found that the best way is to use https://www.favicon-generator.org/ to generate your favicon pack, extract all files to your site’s root folder, then go to Bricks > Settings > Custom Code, and here, in the Header scripts section, add the code you were shown in the Favicon Generator site.

You should have in there something like this:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
3 Likes
3

Hi,
thanks for the given direction (sorry for my late reply; a lot of tasks currently).
Yes - similar I used with Oxygen.
So the answer is to set it as well manually…

4

You can also set it via the default WP Customizer. However, I found that it doesn’t always work as intended.

I don’t believe this is a Brick’s problem, but a WP problem.

In my case, it was showing correctly in Chrome but not in Safari. In Edge, it was showing in the wp-admin area however, on the front, it was not. So I ended up setting it up via the method described above instead, and that works for all browsers correctly.