How-To: WinterBoard Theme Icons

This is a pretty quick post to explain how to make custom icons for your WinterBoard theme. This quick guide is written for iOS 10, so steps may be different for your device.

Extracting Icons

The original icons for your iOS app can be extracted from the .apk file located in your iTunes/iTunes Media/Mobile Applications folder. If you don’t see an app in here that you are using, make sure to sync or download your app through iTunes first. Rename the .apk file to a .zip file and extract it. Open the Payload folder and the [AppName].app folder that it contains. Inside this folder, you will see several icons named AppIcon.png. We will convert and work with these icons for our theme.

You can also extract your icons by using SSH and accessing your iPhone using SCP. Applications are located in the folder (on iOS 10):

/private/var/containers/Bundle/Application/

Inside the application folder you will see an [AppName].app folder (just like in the method above). Transfer these to your PC and then proceed to the next step.

Converting Icons

All icons from your iPhone have been converted to run more efficiently. You will need to convert them back to an editable format that you can use in Photoshop or other image-editing software. In order to do this, download iOSPngConverter (below) and convert the .png files that you want to use.

iOSPngConverter_v1.1.zip

Creating Your IconBundles Folder

In WinterBoard, we need to install IconBundles in order to easily be able to update our icons for each app. Open Cydia, install IconBundles, and respring.

We need to create a folder in our root theme folder named IconBundles. Inside here, we will place our icons using the following icon names:

App bundle name +

@2x.png
@3x.png
~ipad.png
~ipad@2x.png

For example:

com.facebook.Facebook@2x.png
com.facebook.Facebook@3x.png
com.facebook.Facebook~ipad.png
com.facebook.Facebook~ipad@2x.png

In order to find our bundle name, the easiest way to find the bundle name is to open the iTunesMetadata.plist located inside your extracted .apk folder. Press ctrl+f (in notepad) and locate the line that says “softwareVersionBundleId” your bundle should be beside it and is usually named com.companyname.appname. You need the bundle name for every icon that you change.

Note: You don’t need the ipad icons if you are only making a theme for an iPhone.

Masking Your Icons

If you are using IconBundles (like we did in the previous step), you can mask all your icons automatically. In order to do this, you need to create a new Info.plist and paste the following into it (to set your IB-MaskIcons to true):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>IB-MaskIcons</key>
	<true/>
</dict>
</plist>

Note: Do not do this if your icons have a transparent background (or are already masked).

Uploading the Theme

I’m currently using Yalu Beta 7 for this guide. You need to begin by installing DropbearSSH. This will allow you to move the theme folder from your computer to your phone.

Begin by opening Cydia, going to sources, and adding the new source:

http://cydia.ichitaso.com

Once Cydia has refreshed, you need to search for and install DropBearSSH. This app can be toggled in the terminal using the “sshtoggle” command. After you have toggled DropBearSSH, you’ll need to open up an SCP client. I’m using WinSCP to connect to my iPhone. For the host, enter the IP address of your iPhone assigned by your WiFi network. Enter ‘root’ for username and enter your root password. If you haven’t changed your root password (you need to), enter ‘alpine’.

Once you have connected to your phone, you need to navigate to your themes folder. It is located under:

/private/var/db/stash

One of the folders in the stash folder will contain a folder named Themes. You need to upload your theme folder here. After your theme has finished uploading, open up Winterboard, select your theme, and respring. Your modified icons should now show up.

Things are being changed!

I’ve decided to begin to modernize ItzRa.in a bit. The old theme was originally developed back in 2012. While parts of it were modernized, the core of the website was vastly outdated. On top of this, the website used stripped down mobile site to deliver content to phones (back when it worked). This worked well when everyone was on a 2G connection, but I decided that I needed to update to a responsive site. On top of that, I wanted a built-in blog for all the random things that I run across (mostly computer related). While it will be great for everyone that is having trouble on a topic, I mainly wanted it for my own forgetfulness!

With that said, ItzRa.in will still host my projects as I move through development. Currently, I’m in the process of developing the theme and layout. The portfolio and about sections are currently down. On the bright side, the contact page is working 100%. I have also included an SSL certificate, so make sure that you are using the https version of the website. I’ll update later as I manage to get things working.