Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

2.3 Add a Custom Name and Icon

You can’t send an app out into the wild without the right branding! In this lesson, learn how to give your app a custom name and icon.

Related Links

2.3 Add a Custom Name and Icon

Hey this is Kaz Bracey. Welcome back to Webapp to Mac app out using MWJS. In this lesson we are going to go through the process of changing the icon for the app that we've been working on, and also the name for the app. Alright now, if you look inside your current app, and then you look in the resources folder here, you'll see that we have this file named nw.icns. Now that file provides the icon for our app. And in order to set a customized icon, we're going to need to create a .icns file, an icon file of our own. So what we're gonna need is a 512 by 512 icon image. and I have one that I previously created here. And right now this 512 by 512 image is a png. So in order for this to work as an app icon we're going to need to convert it into an icns file and that's where this little app you see on the right side of your screen comes into play. And this app, img2icns, or Image2icons, I'm not quite sure how you pronounce it. Now this is a free app. I'll give you a link to where you can download it in the notes below. And you can use this app to very quickly convert an image into an icon. So, to do so, all we need to do is grab our image and drop it onto the app. Then, click on this top right image, here. And, now we can have our icon file output into the same folder. So, now there's our icon file, all ready to go. So, now all we need to do is copy that file. And then just paste it straight into our app, into our resources folder So that it overrides the nw.icns file that we already have. And right now If you go back up and you look at your app, you'll see that it still has the old icon showing. And that is because Mac will hold onto icon apps. It will cache them for a million years. It's very, very difficult to clear our Mac cache. There are commands that you can use, but I found that the easiest way to go about having a new icon show up is just to make sure that you rename your app after you put your icon image Into your app. So right now, the little compass icon? That's cached for an app called NWJS. But once we rename our app to something else, there won't be any cache for that newly named app. So let's go ahead and rename this and we'll just call it task manager. And there we go instantly. Our icon is showing up. Now, renaming the app file itself is only one part of changing the app's name into a custom name. Because, right now, if we run our app, you can see it still says NWJS at the top, here. So, what we need to do is go back into our app. And then find this file here, info.plist and open that up for editing. Okay, so here is our info.plist file there are two fields that we're looking for in this file that we need to change. The first is CFBundleDisplayName. And that's this field here. So then we wanna change the string that comes just after it that's associated with CF bundle display name to task manager. And then the next one we wanna change is CF bundle name, so we'll go Ctrl + F and search for CF bundle. Name nd we'll also change that to task manager. Then we'll save and close that down. So now this time when we run our app now, we have the correct name showing up in the menu. And we have our custom icon showing in the doc. So just to recap, start off by making a 512 by 512 image, typically a PNG. And convert that into an ICNS file. Copy that into your resources folder, replacing the existing NW.ICNS file. And then make sure that you do all of that before you give a custom name to your app. So that way you wont run into issues of not seeing your icon updating because you won't have anything cached, against the custom name for your app. So to rename your app, rename the app file itself first, and then edit the info.plist file that's inside your app. So now there's only one more step that we need to take, and that is, to add in some app menus. And right now, you'll notice that the only menu we have along the top here, is this, that just says task manager, and there's no drop down. When you click on it and this does cause some limitations because without an edit menu this means that it's not possible to copy and paste anything within this app. And without a dropdown from that Task Manager menu item up there, there's also no way to use a keyboard shortcut to quit, so command q will do nothing. So in the next lesson, we're gonna add in our menus to make sure that copying and pasting can be done. And we can use keyboard shortcuts to quit the app. I'll see you there.

Back to the top