Step 1: Create a new custom package
Create a new package in the
You should have a directory like this:
Step 2: Copy the favicon code from default-theme
/client/ folder in the package, and add a
Step 3: Create the favicon bundle files for different platforms
For best results, you may want to create favicons for different devices. You can create favicon bundles with various online tools, e.g. https://realfavicongenerator.net
Step 4: Adjust basePath to your webserver
Depending on how you intend to serve your static favicons, you can adjust the
basePath variable in favicons to the public URL, where your favicons live. If you don't want to go the extra mile and deliver them through a dedicated webserver, a CDN or AWS S3, you can also put them into your application's
/public folder and let Meteor serve them.
const basePath = "/resources/favicons/";
with favicon bundle files living in
Step 5: Make sure to import favicons.js
The above described method yields duplicated favicons links in the HTML head. Although this will result in a few extra bytes transmitted, it shouldn't generally be a problem, as the browser will actually use the favicon that it sees last.