Hi
I’m trying to add favicons to my theme. In the old days, I could simply just edit the head.blade.php file. Now everything seems to be more complex (at least for me)
I have this in my bud config:
.assets([
{
from: app.path("@src/images"),
to: app.path("@dist/@file"),
},
{
from: app.path("@src/images/favicons"),
to: app.path("@dist/favicons/@file"),
},
])
Bud then creates /public/favicons. But all the filenames in here are hashed.
Som when I try to reference the filenames like this in setup.php (which not working because the blade syntax isn’t working here):
For my favicon/app icon needs I use the RealFaviconGenerator WordPress plugin:
WordPress now has its own Favicon/Site icon setting that can be set in the backend/admin web UI, however, it doesn’t has as many different variants and isn’t as customizability as the RealFaviconGenerator (plugin).
There had been one caveat with the RealFaviconGenerator plugin, though, which also answers how to handle Favicons in WordPress core natively:
Programmatically, WordPress has for some time now a dedicated filter for the favicon (get_site_icon_url):
That filter is used by the core logic for intercepting HTTP requests to the favicon, among other favicon-related things.
If you want to go the programmatic route, you can use the asset(...) function in Sage 10 to get an URL to the favicon (e.g. that can be passed to the aforementioned get_site_icon_url filter):
use function Roots\asset;
// [...]
$favicon_url = asset('favicon.ico')->uri();
// [...]
Hi Strasis
OK. I tried the plugin-solution and it worked.
But Where should I add the $favicon_url snippet if I wanted to do it without a plugin?
I just get en error if I put it in setup.app **Fatal error** : Uncaught Error: Call to undefined function app() in /Users/bo/sites/radar/vendor/roots/acorn/src/Roots/helpers.php:20 Stack trace: #0 /Users/bo/sites/radar/vendor/roots/acorn/src/Roots/globals.php(6): Roots\asset('favicon.ico') #1 /Users/bo/sites/radar/web/app/themes/radar/app/setup.php(281): asset('favicon.ico') #2 /Users/bo/sites/radar/web/wp/wp-includes/template.php(770): require_once('/Users/bo/sites...') #3 /Users/bo/sites/radar/web/wp/wp-includes/template.php(716): load_template('/Users/bo/sites...', true, Array) #4 /Users/bo/sites/radar/web/app/themes/radar/functions.php(59): locate_template('app/setup.php', true, true) #5 /Users/bo/sites/radar/vendor/illuminate/collections/Traits/EnumeratesValues.php(245): {closure}('app/setup.php', 0) #6 /Users/bo/sites/radar/web/app/themes/radar/functions.php(65): Illuminate\Support\Collection->each(Object(Closure)) #7 /Users/bo/sites/radar/web/wp/wp-settings.php(566): include('/Users/bo/sites...') #8 /Users/bo/sites/radar/web/wp-config.php(9): require_once('/Users/ in **/Users/bo/sites/radar/vendor/roots/acorn/src/Roots/helpers.php** on line **20**
The problem comes with browserconfig.xml and site.webmanifest that contain a link to the icon, which is hashed, and I cannot use the asset function with.
Ideally, the favicons should be the only images not hashed so we can reference them without using asset function. What would be the way to do this?
But you could generate the browserconfig.xml and site.webmanifest files dynamically, hence still being able to use the asset(...) function to resolve the asset hashes.
The alternative would be avoiding filename hashes alltogether, but those are used for cache busting.
After checking possible steps involving adding extensions to webpack and bud, I concluded the simple solution is to place the favicon folder in the root of Wordpress and just reference everything there without hash. The icons are optimized by realfavicongenerator anyway.
Realfavicongenerator even recommends to place favicon.ico and apple-touch-icon.png in the root of the website as it’s a fallback, so I think I will stick to this practice unless I see it’s overly simplistic in the long run.
I was working on this today and came up with the following script that generates an icon.json manifest file with hashed icon file paths from manifest.json. This is running in a sage-inspired custom theme using Bud.js. Would love to see a bud-powered solution.