Custom iOS icons, Winterboard, and you
One of the best aspects of theming on iDevices is getting a custom set of icons for your home screen. It also happens to be one of the more tedious tasks, from collecting icons for all your apps to understanding how to correctly apply them to your device. There are two methods for this that are currently in common use, however very often we see outdated practices being employed. This article will try and clear up the topic and discuss the method that I often use, and the benefits it has.
The Summerboard method
First, let’s discuss the Summerboard method. This is very common, but it is now obsolete and causes several issues. It also happens to be very easy, hence why it is still in use. This method uses a folder called Icons in the theme directory (for example /Library/Themes/iOS’86.theme/Icons). In this folder we add in any icons we want to theme, and that is about all there is to it. Easy, right?
The first issue is with the simplicity of using the Icons folder. Each icon you add to this folder must be named the same as the app name that you see on the home screen, and there must also be a copy of that icon with the @2x affix (for retina devices). So that means if we want to use an icon for the Mail app we would need two icons in the Icons folder — Mail.png and Mail@2x.png. Now this isn’t too bad, however the naming of icons causes issues with localisation. That is, the Mail app isn’t necessarily called Mail for another user if they are in a different region or using a different language.
Another problem is that for these icons to apply, Summerboard mode must be turned on in the Winterboard settings. This would be fine, however it causes inconsistencies with many themes. When Summerboard mode is on, for example, the text size of app names on the home screen can increase. We can also only theme home screen icons when using the Summerboard method. Any other icons, such as those in the settings app or spotlight search, cannot be themed unless we use the newer Winterboard method for icon theming.
Lastly, icons that are themed using the Summerboard method can disappear when opening a folder. In the image below the Photos icon has been themed using the Summerboard method. Notice that it reverts back to the default icon when opening a folder.
The Winterboard method
The Winterboard method is the up to date and most effective way to theme icons. It is more complicated than the Summerboard method, but the results are worth the effort. This method has no issues with localisation, does not require Summerboard mode, the icons do not disappear upon opening a folder, and we can theme all icons from the home screen to the lock screen and notifications center.
Using this method we need to find some information about our icons, such as the icon name, size and bundle ID. This is easy enough to find by accessing the file system using iFile or something similar. If we want to theme a native or Cydia app icon then we need to navigate to:
/var/stash/Applications/<em>Appname</em>.appOr, if the app was installed via the app store, navigate to:
/var/mobile/Applications/<em>Appstring</em>/<em>Appname</em>.appThe appstring folder will be a string of letters and numerals, you can either check inside the folder to see what app it is or in iFile open settings > File Manager > Application Names > On.
Once inside the app folder, open up Info.plist (in property list viewer). CFBundleIconFiles (for app store apps) will tell us the name/s of any icons the app uses, and CFBundleIdentifier will tell us the bundle ID. For native and Cydia apps, the icon names are usually along the lines of Icon@2x.png and Icon-Small@2x.png, and can be found in the same directory as Info.plist. Once you have identified the names of the icons you want to theme, check the dimensions of each icon as well and be sure that the themed icons match. We should now have the following set of information, let’s use Fruit Ninja as an example:
Icons: Icon-Small@2x.png (58x58), Icon@2x.png (114x114)
Bundle ID: com.Halfrbick.FruitWe have picked out two retina icons that we want to theme, checked their dimensions and found the bundle ID. Now we can add them into a Winterboard theme on our device. Create a folder with the name as the bundle ID and add the themed icons into this folder. Then that folder can be added to the theme Bundles folder, for example:
/Library/Themes/<em>Themename</em>.theme/Bundles/com.Halfbrick.FruitThat’s it, all that is left is to apply the theme via Winterboard and respring. Try your hand at the Winterboard method and help the jailbreak community move away from the dated Summerboard method. In the next article I will be discussing iOS icons in further detail.
