Having the ability to add your own custom icon to your iDevice is undoubtably one of the major reasons people decide to jailbreak their iPhone, iPod or iPad in the first place. People have the option to do this in a couple ways. To either purchase themes by amazing theme developers that they like. Or if they don’t see anything they like they can have the ability to create and add their own custom icon to fit their own style. While we cover a ton of great themes every thursday today were going to discuss the beginning steps of creating your own theme. How to create your own custom iOS icons.
Edit and Add Your Own Custom icon with iFile.
iFile is a great ssh client for your iDevice that will allow you to manage the files you need in order to edit the icon settings on your iOS device. It works on all iOS devices and is available in the Cydia store for $4.99. There are a couple other ssh tools out there that you can use instead or if you want you can even use programs like iExplorer for $32 to do this on your computer which will make the process a bit quicker albeit expensive.
For the rest of this explanation we are going to be using iFile to edit our own custom icons.
I am going to assume that you have some basic photoshop skills and not worry about showing you those steps. My goal will to show you how to replace any icon with your own custom one. Like the one I created for the phone app that you can see in the screen shot to the right.
Here are a few Photoshop things you should know before we get started.
- Save your finished icon files as .png
- You will need to have a version that is 118×120
- And one that is 58×58
- If you are making tons of icons for a whole theme, you’ll want to order the icons your creating in folders
- Save the .png files to your camera roll either with drop box or iPhoto or however you want.
To change your icon you need to use an ssh client to navigate to the location in which icons are stored. Icons are stored under var/stash/applications.kmgwpy. Then each application that you have on your iDevice will be listed in alphabetical order. Like shown in the picture below.
You will want to navigate to which ever application you want to change the icon to. For the purpose of this tutorial we want to find the Mobilephone.app. So we will scroll down to find Mobilephone.app and click the blue arrow.
Once you’re inside the app that you want to edit. Scroll on down until you see Icon-Small@2x~appname.png and icon@2x~appname.png.
A couple things to note.
Apps such as the phone have tons of features inside of them, each one of those features have a .png file attached to it if it is a graphical element. So just look for the one that is an icon, and you can check to make sure it’s right by looking for its smaller version and its normal version. Generally it will look like the following.
You can see an example of this structure in the picture above.
To verify that this is the correct file you want to edit click on it and then tap web preview. The icon should load as a screenshot on your device. If this is the correct image you want to edit than you’re ready to move on to the next step.
This is where having an application like iExplorer comes in handy. With it you can copy and paste the names of the files quickly and easily in two different screens. But since were using iFile here is the simplest way to do this.
- Click on the blue button and copy the name of the file.
- Tap done
- Swipe and delete the file. (We no longer need it.)
- Tap the bottom right page button – This will open up a new window
- Navigate to your photos photoroll. We put them in the photoroll so you will find them by navigating to var/mobile/media/DCIM/100Apple either in iFile or iExplorer
- Annoying fact – photos are stored as IMG_0001.JPG
- So if you have tons of photos, you may want to make sure they are either the first or the last photos in your photoroll
- Tap the blue button and change the name of your photo to the photo you posted.
- ***Remember*** There are two different photo sizes 118×120 and 58×58. The 58×58 photo is Icon-Small@2x~appname.png while the standard icon is icon@2x~appname.png. So make sure you label the files correctly other wise you will have the wrong sized icons.
- Now copy and paste your icon file with its new name by tapping edit on the top right>then tapping on the file>then tapping the clipboard icon on the bottom right. It will ask you if you want to copy/link cut or cancel. (You can do this with multiple files as shown in the photo below if you would like.)
- choose copy and tap done
- Now we will paste it over the old icon by tapping the bottom right button again to bring up a new window that will still have our folder open to the mobilephone.app directory.
- Tap edit and then hit the clipboard one more time.
- Tap paste and voila. You’ve changed the icon. (If you didn’t delete it yet, rename it and delete the old one and try again or rewrite over it)
- Repeat those steps again for the other icon size
- Respring your device and see the change. As shown in the first photo and in the photo below.
No doubt this process is indeed easier with a program like iExplorer however it is still manageable on your iDevice through iFile and these are the steps on how to do it. Having this skill set and knowing how to edit these files will give you the ability to edit any .png file on your iDevice so that way you can customize things to your own liking. I am sure you ran into several different .png files inside of whatever icon you wanted to tweak/fix and when you viewed them you saw oh whoops thats the icon for Facetime, or that’s the default skin for the dialer. Well know you know how to edit those if you wish. With that little bit of knowledge you can literally change the way anything looks on your iPhone.
This is a building block on creating your own icons or fixing icons that were not put in the correct skins when you applied a theme. Often times you will try to download a new theme and perhaps an icon isn’t themed correctly. That is most likely because a letter in the “Icon-Small@2x~appname.png” is not capitolized or it is and shouldn’t be. Now you can fix those icons or even alter them a bit to customize the theme to your liking even more.
If you haven’t read my last post that inspired these steps my goal is to keep a simple tutorial that will walk you through creating the following effect you see in the image below.
In this post you learned how to create your own icon and place it in a folder either via iFile or iExplorer. You will need those same skills to create a tab/folder to customize your folder. Which is the most difficult skills needed. Other than that you just need an assortment of Cydia Tweaks to create custom folders/actions/ and align them on the edges and get them flush on the wall. These steps I will include in my next post coming soon…
To stay updated with this series follow me on twitter or like my facebook page as the posts will be announced there when they are ready. You can also feel free to ask me some basic questions about tweaks/how to get it flush if thats the only step your missing.
Check out the post that inspired this series…