Make and use themes with WinterBoard

Section 3: Changing program icons

Updated: August 25, 2010

Attention

If you have not read the two prerequisite tutorials: Using YummyFTP and OpenSSH to create themes, and Understanding a theme's directory structure, then you should prior to performing any of the instructions in the following tutorial.





I am updating all WinterBoard tutorials to reflect the differences in creating graphics for the iPhone 4, and iPhone 3G / 3G S. It's important you pay attention to file names (they are different, the iPhone 4 uses an @2x designator just before the .png extension, and dimensions (iPhone 4 graphics are generally double in size from their iPhone 3G / 3G S counterparts). When creating iPhone 4 graphics you should refer to the original graphic on the iPhone 4 or in its firmware file to verify your image is the correct size.

There are two methods for changing program icons: the WinterBoard way, and the old SummerBoard way - which WinterBoard still recognizes. SummerBoard used to be the defacto method of running themes on the iPhone when only the first generation iPhone existed.

Application icons are generally between 114 by 114 to 120 by 120 pixels on the iPhone 4, and 57 by 57 to 60 x 60 pixels in size for the iPhone 3G / 3G S. They are PNG format. If you replace any graphic with your own custom graphic, make sure you are saving the file as a PNG, and that it retains the same dimensions as the original. You can try experimenting with dimensions, but your restults may be mixed. You don't have to swap out the stock icons if you don't want to. If no icons are present in your custom folder, then the stock icon(s) will be used.

These are the names you must use to replace the original application icons: App Store.png Calculator.png, Calendar.png, Camera.png, Clock.png, Compass.png, Contacts.png, iPod.png, iTunes.png, Mail.png, Maps.png, Messages.png, Notes.png, Phone.png, Photos.png, Safari.png, Settings.png, Stocks.png, Voice Memos.png, Weather.png and YouTube.png. As long as you name your icon the exact same thing as the name of the application, you can replace anything.

Method 1.

The WinterBoard way is a more proper way, but more time consuming. This method exists so that graphics other than the program's launching icon can be changed. Create the following folders: My first theme/Folders/AppStore.app   A word about making .app folders. When you add .app, the folder must be right clicked, then you must select Show Package Contents if you want to add or remove files. If this is too much hassle, then don't add .app to the folder name until you are done placing whatever you'd like in this folder. Note: I've removed the elements from the previous My first theme folder from Section 2.


The iPhone 4 version of the App Store app icon is 118 by 120, and is named icon@2x.png I've made mine gray as an example




The iPhone 3G / 3G S have a 59 by 60 sized icon, and it is named icon.png. I've made mine gray as an example.




Place this icon(s) into the AppStore.app folder. Place the My first theme folder in your iPhone's Themes folder. The new folder will overwrite the existing folder if it is still there from the Section 2 tutorial. Note: I've deleted all the stock WinterBoard themes except for White Icon Labels.




Launch Settings and select WinterBoard and go to your themes lists. Since your My first theme is already selected, press it once to remove the check mark next to it, then press it again to add the check mark again. This is so WinterBoard will reload the new changes. Then press your home button.




Here's the new icon on my iPhone 4. Note: I will be shrinking down iPhone 4 screen shots to save page space and reduce loading time from now on.




...and on my iPhone 3G.

Method 2.

Here's how to do the same thing using the SummerBoard method. Create the folders My first theme/Icons   Place your icon.png(s) into the Icons folder.

Name your icon after the name of the application you wish to replace. Note that App Store.png has a space in it. It won't work without this space, because that's how the text name for the application appears on the SpringBoard.

Place the My first theme folder from your desktop back into your iPhone's Themes folder. Launch Settings, go to WinterBoard and deselect the My first theme, then reselect it and press the home button.