Adding Real Favicon Generator To Your Angular App

For just about all of my Angular applications I’ve used Real Favicon Generator (RFG) to generate the files for my Favicon icon. It’s a great tool, and I highly suggest using it and donating to it. However, their guide only shows you how to add your favicon to a Node or HTML5 application/site. If you are using Angular there are a few more steps involved, so I’ve found a quick and painless way to use both the Node and HTML5 tools. I’ll also show you how to add Progressive Web App (PWA) meta tags so that you can add your newly created icons to your mobile home-screen. Lets get to it.

Head over to the Real Favicon Generator site and upload your icon. Note that your icon should have even/square dimensions and be at least 260px wide/high.
Set your icon settings; which basically allows you to play with the margin size, background size and what it will look like as a PWA icon on your mobile devices.
Once the Real Favicon Generator does its thing, you’ll want to click on the “Node CLI” tab as seen in the image below.
Now you’ll want to install the Real Favicon Generator CLI globally which helps to generate the files for you. So run:
```
 npm install -g cli-real-favicon
```
Now that the CLI is installed, run this command from the root of your Angular app:
```
 touch faviconDescription.json && mkdir src/assets/outputDir
```
*This creates a generator file and output directory where the generator files are going to be placed in.
Now you’ll want to copy that source code on the RFG site into the newly created faviconDescription.json file. You’ll notice that there will be TODO: Path to your master picture.

You’ll need to add your original icon that you uploaded to RFG into the newly created src/assets/outputDir directory. I named my image favicon.png so my path looks like this:

 {
     "masterPicture": "src/assets/outputDir/favicon.png", // Update this line (Should be the same if you rename your image to favicon.png)
     "iconsPath": "/",
     "design": {
     ...
     ...

Now that you have copied and pasted that code and updated the "masterPicture" path to your image path, you’ll want to run this RFG CLI command to generate your new icons. So run this in your terminal:
```
 real-favicon generate faviconDescription.json faviconData.json src/assets/outputDir
```
Before reaching out to me with an error, please double and triple-check that you followed my instructions carefully. (1) Did you add your original pic to the output directory? (2) Did you copy the correct path?... I've tested this multiple times so I'm confident that it's working as expected. Nevertheless, if after checking your code and you still cannot get it to work, feel free to contact me.
If everything went correctly you should now see your icons in your src/assets/outputDir directory.

Now go into your angular.json file and make sure it has the path to your favicon in the assets like so:

 "assets": [
     "src/assets/outputDir/favicon.ico", // Add This line
     "src/assets",
     "src/sitemap.xml",
     "src/robots.txt"
 ],

Finally!!!!!!! One last step, go into your index.html file and add your meta tags. Mine looks like what’s below. If you copy and paste my code just remember to update the color HEX’s to be what you choose for your icon. You can find those HEX colors on the HTML5 tab on the RFG site. I’ve added some PWA tags too so when you add your site to your mobile devices’ home screen, and launch the app, it will run like a PWA application and will use your new icon.

    <!-- * Favicon * -->
    <link rel="icon" type="image/x-icon" href="./assets/outputDir/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/outputDir/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/outputDir/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/outputDir/favicon-16x16.png">
    <link rel="manifest" href="./assets/outputDir/site.webmanifest">
    <link rel="mask-icon" href="./assets/outputDir/safari-pinned-tab.svg" color="#d4327b">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-config" content="./assets/outputDir/browserconfig.xml">
    <meta name="theme-color" content="#fcfcfc">
    <!-- * PWA * -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="msapplication-starturl" content="/">

If you run into any issues or have any questions please let me know in the comments.

Colin Stodd

Adding Real Favicon Generator To Your Angular App

code

Colin Stodd

Angular,Tutorial,Real Favicon Generator

19 Feb 2019 (Published)

24 Apr 2024 (Updated)