File Type Icon Themes

As long as Nova doesn’t provide a native way for changing or extending the file icons, here is a little hacky way to do so:

Add new file icons

Quit Nova.
Go to your applications folder or wherever Nova is installed to and right click Nova.app and choose “Show Package Contents” in the appearing context menu.
In the Nova folder (which is hidden behind Nova.app) you will find under ContentsResources a file called DefaultIcons.json. Copy this file anywhere as a backup, in case you break anything. Open this file with your favorite alternative editor of choice (e.g. CotEditor). You will see that this file maps file types or file endings to specific image identifiers.
If you want to add an icon for a yet unsupported file type like .astro, you just need to extend this list (called fileIcons) by a new entry like so:

{
   "image": "filetype-astro",
   "pathExtensions": ["astro"]
},

Now you need to provide the actual icon. It must be a png in two sizes: 16x16 and 32x32. The 16x16 version must be named <image>.png and the 32x32 version <image>@2x.png, so in our example: filetype-astro.png and filetype-astro@2x.png.
filetype-astro
filetype-astro@2x
Both image versions now just must be copied to the Resources directory where you also found the DefaultIcons.json.
Voilà new icon added.

Change existing file icons

If you want to change an existing file icon you can do so by searching for the respective entry in the DefaultIcons.json file described above. Let’s assume you want to change the icon for .ts-files.
The respective entry is:

{
   "image": "filetype-script-ts",
   "pathExtensions": ["ts"]
},

To now change this icon you will just need to change the assigned image to a custom one like from filetype-script-ts to filetype-script-ts-alt and provide the actual image the same way as described above for adding new icons.
This means adding a 16x16 version called filetype-script-ts-alt.png and a 32x32 version called filetype-script-ts-alt@2x.png to the Resources folder.
Note: Just dropping in a filetype-script-ts.png and filetype-script-ts@2x.png will not work since images seem to be resolved first from the bundled Assets.car file where these images already exist. An alternative would be to use GitHub - jslegendre/ThemeEngine: OS X App to edit compiled .car files and change the images inside of the Assets.car file, but I think this is a lot more “risky” and not very straight forward way to achieve the goal.
Final result:

3 Likes