What is Nativefier?

Ever had a lot of tabs open on your browser and having trouble getting to the most important ones like Discord and WhatsApp Web? Well, worry no more. There is a simple way to access the important or most used websites via a desktop application. And, this is where Nativefier comes in.

Nativefier is a tool that enables you to convert a website to a simple web application that you can easily access on your desktop or start menu. It uses Electron to wrap the apps in an OS executable form like .exe or .app. The app can be clicked on like a normal app on your system and it opens easily.

And it is not trouble doing so. Nativefier builds the app and you just have to rename the app and even change an icon to the one that would please you.

In this guide, I will show you how to :

  • Install Nativefier with Node.js using npm
  • Build a desktop app from a website using Nativefier
  • Change the Browser Window Icon

Setup Pre-requisites

You have to have Node.js Version 12.9 and above, and npm version 6.9 and above. If you do not have Node.js installed in your system, Use our guide to install it:

Installing Nativefier on Windows system

Visit the link to GitHub Site for Nativefier to get the command to install Nativefier.

You can also copy the command from here npm install -g nativefier.

Open Node.js Command prompt and paste the command as shown then press Enter.

The installations begins immeaditely.

Next step is to identify the directory where you intend to store the app. I chose the Desktop because I want to access the website easily.

Convert Web Page to a Desktop Application using Nativefier

Next up is to use the command nativefier --name "name you intent to save the app as" "website URL".

I want to access TechnixLeo website hence I will use the code nativefier --name "Technixleo" "https://technixleo.com/".

The App is built successfully and the instruction is to open the folder and access the file with the .exe extension.

Opening the folder, I will find the App with the name I gave it as follows.

Once I click on the app. It opens as follows.

Changing the Browser Window Icon

The icon when the app opens in a new window has the default icon by electron. What if I want a different logo? Lets change that.

Create a folder in /resources/app folder path and name it how you want. I created one and named it assets.

Continue to copy the logo you want in the newly created folder in my case the assets folder and name it in a friendly way. I named mine icon. The image can be in ico or .png format.

Find the main.js file from the /resources/app/lib folder and open it with a text editor of your choice.

I opened mine with Notepad++. Find the function getAppIcon to customize the icon on the browser window.

Change the location of the current icon to the one you recently copied in the new folder you created. In my case the path to the icon is /assets/icon.ico which I changed as shown below.

Note that you do not have to type in the whole path from the /root as the __dirname covers all that. You just have to make sure that the folder you create is on the path and you will know this as it is the same folder as package.json is.

If my logo was in PNG format then I would have used the next path specified for PNG and used /assets/icon.png command to change the icon.

Save your changes and reload the App. The icon changes.

And There you have it! The website can be accessed directly from an app that you click direct. No need to go through the browser. It actually saves time and hassle for typing the website from the browser.

It is even classy than a normal web shortcut. You can move the file to the desktop so that you would still not need to open a folder to access it and just click on it directly.

LEAVE A REPLY

Please enter your comment!
Please enter your name here