How-to: Customize app icons | webOS Nation
 
 

How-to: Customize app icons 55

by Mark Jensen Sun, 03 Oct 2010 9:18 am EDT

Customize your app icons

Palm’s webOS icons are some of the cleanest and best-looking in the mobile space. That said, have you ever come across an app you loved but couldn’t quite come to terms with what the developer was (or wasn’t) thinking when it came to the icon for that app? Or have you just felt the need to add a little customization to the look of your launcher by adding your own icons? If you’ve answered “yes” to any of these questions then this how-to is for you.

Customizing, switching, and experimenting with the icons on your webOS device isn’t the most complicated process out there, but it’s not a simple one- or two-step processed. Consider this to be an “advanced tip,” if you will, as there are additional requirements apart from just having the phone needed to make customized app icons happen. You’ll need Internalz and the accompanying File Manager Service to make this happen (both are available through WebOS Quick Install, Preware, or your other favorite homebrew install method). It also requires a little Homebrew know-how, but is otherwise, rather simple. For the sake illustrating this technique we’ll replace the icon from the very popular homebrew Music (Remix) with the icon from the very cute Cutest Kitten from the Palm app catalog. Both apps, for what it’s worth, feature excellent icons - this is just an illustration of icon swapping and customizing.

Step 1: Get an icon

Music (Remix) icon Cutest Kitten icon Find an icon you like from one of various sources. In most cases any app available for download from official Palm App Catalog or from the Homebrew app gallery are candidates for icon mixing and matching. Just make sure the app with the icon you intend to use as your “replacement icon” has been installed on your device. (I recommend icons from other webOS ready apps as they are already correctly sized and formatted for icons, although most any properly sized png file will work, so if you want to go custom that’s always an option.)

Step 2: Copy the icon

Fire up Internalz, navigate through the file trees to find the app folder which contains the icon you want to use as your new replacement icon. Note that while this may sound difficult to locate the app folders and their icons, all downloaded and installed apps on a webOS devices are stored in the same location. So once you’ve found one app folder, you’ve found them all. To quickly locate app folders using Internalz file manager tap the home icon in the upper right of the main Internalz app screen, and then navigate the folder trees as follows; /media, /cryptofs, /apps, /usr, /palm, /applications. Each forward slash “/” just represents a new folder in the navigation tree.

Step 2

Step 3: Replace the icon

Once the replacement icon you want to use for another app is located, tap the png file, which will bring up a menu. Tap the “copy” option and you will be asked what folder you want to copy the png file to. Using the same navigation tree, navigate to the app folder for the app whose icon you are going to replace and select it. You will (probably) see a message that asks if you want to “Overwrite” the existing icon.png file. Select “yes.” Don’t worry, you’re only overwriting the file of the same name/extension in the app folder. The icon.png file has no effect on the function of the app itself.

Step 3

Step 4: Restart

Customized icon Restart your device (luna restart or a full power off/on restart) and voilà! Your new customized replacement icon will appear with the app of your choosing.

Lastly, don’t worry, very little can go wrong in this process. If by chance you install an incompatible png file or unintentionally do something wrong along the way you will get Palm’s “half moon-no icon” icon. Just try the process again. If all else fails, a worse case scenario would only require you to reinstall the app with the missing icon. We should note that you will have to repeat this process after any app update, as the new version of the app will overwrite your custom icon with the stock icon.

It may seem a little complex, but after experimenting just a little you will never have to settle for a lack-luster icon ever again. For the record, as much as I like cute kittens I’ll be switching back to the stock Music (Remix) icon, as it happens to be one of my favorite icons.

Note: Typically icon files are all named the same. Within an app’s main folder you will usually see a file called “icon.png,” with an occasional “default-icon.png” and less common with the app name-icon or totally original file name altogether. All icons, however, are png files and are located in the main app folder for any given app (not subfolders). If you’re not sure if a png file is the correct icon file, you can always check to see if you have the right file by tapping the file and selecting “open” which will display the png file image just like any photo image is previewed.

Category:

55 Comments

YAWN Nobody cares

"This post should be downranked to oblivion. Don't bother clicking to see it."

Ditto

Please, why don't you both tell us what tips, articles, and contributions you've made to PreCentral and the Pre community. I wait eagerly for your awesomeness to shine.
...waiting
...waiting
...waiting
That's what I thought.

I think cobrakon was referring to the YAWN comment, which I agree was plain stupid.

lol

Nonsense. Of course people care. This is precisely the sort of tweak that has made Precentral such a valuable resource for the webOS community. Keep it coming, guys!

Nonsense. Of course people care. This is precisely the sort of tweak that has made Precentral such a valuable resource for the webOS community. Keep it coming, guys!

PreCentral, or vBulletin needs some filters or 'Block' features.

This way I don't have to see some certain negative, worthless, non-contributing, arroagant, unresourceful, pointless, and... well... sleepy? (yawn?) comments.


By the way, I found this to be very helpful post/article.

On the contrary, I was thinking about doing this just the other day, thanks for the tip.

this kind of info is why I came to precentral in the first place. So thank you.

Eh, I've done it frequently, so....I care!!!! Also, a few devs will have different icons in various sizes (48,60, etc). I think the 60 is for the launcher and the 48 for notifications...? That's how it is on Twee, whose icon I was not fond of (or sound, also easy to change in Internalz).

Also, if you want to view an image right away instead of having to tap and click open, click on the icon next to the filename and it will open automatically.

64x64 - launcher
48x48 - icon used in app catalog
32x32 - icon used in mojo-generated scenes (like the help scene)
24x24 - notification icon

Thanks for the tip "arthurthornton"! Always wondered why all the different icon files.

@underscore FOR REAL MAN you know how many times i've switched themes and looked and looked for one that most icons are custom especially the music player remix 2.0 one! i lot thanks P|C now i can pick w/e theme i want and just change the icons.... WOOOOHHHH!!!

thanks for the awesome tip. actaully one of the better ones out there. dkmrules nobody what have to say.

What app is the cat with yarn icon for?

Sweeeet!!! How did I not know this!!! changing th sucky ones.

If the app is updated does the icon get replaced with the original? I remember trying to change names of apps through Internalz and everytime time an app was updated my work was undone. (Advanced Configuration for App Launcher patch fixed that though.)

did not know i can do this. thanks for the tip. now i can better customize the web shortcuts found on my launcher. thanks

btw: keep them coming

"voil

At least he didn't write "walla!" :)

Thanks for the article. I enjoy knowing info like this.

This was very informative.
I truly appreciate this tip.
I don't understand why people are saying "yawn" and other negative comments.

It is support like this that makes me all the more happy to have a pre. The WebOs community rocks.
Thanks Mark Jensen and all of P|C

that's funny one of the few really informative tips and it's the one that someone complains about.

I just renamed a few apps and changed my scores on angry birds >:D

nice tip - thanks!

This is great I just found all the .png files (55) that i used for Touch Launcher on PalmOS. Just replace replaced a few icons. most of the TL icons are iPhone inspired. but the app Pretext really needed a good icon.

I would have never imagined a cute kitten icon being used for Music Player (Remix)!

But seriously, it is cool that you can alter the icons for each app. It would be nice if this was built into the OS similar to how you can change icons in Windows. And it would also be nice to be able to change an app's launcher title.

... Or a webOS app. :)

Well if the app is about cute, cuddly kittens, then I think that icon is appropriate.

what I want to know is where to find some good icon .pngs that I can stick in there. Swapping them seems kind of pointless and confusing. I guess I could download a theme that changes icons, copy the icons to a separate folder and then move them in after I delete the theme. Is there a good place to find appropriately sized .pngs though?

Awesome post, thanks!

I just found all 122 .png icons from my touch launcher days. I am still trying to find the site I downloaded them from originally.

I've also found that these steps can be used to customize things other than icons.
I've bought NFSU and didn't like the original music of the game. The songs are soooo annoying. And those same songs repeat over and over and over again. I couldn't handle it so I played the game with no music for a while. If your in the same boat, than you know what I mean.
Using Internalz, I navigated through all those folders and found those songs. I deleted them. I replaced them with my
music. The song names have to be spelled exactly as the original or else the game will no longer work. Just a precaution.
An easier solution is to use FFplayer.
In my opinion, this tip is very awesome.

This is one of the best tips yet!!!! I just google searched for new ones for auction mate and nfl scoreboard and replace them!! This is something I have been wondering how to do!! Thanks for the tip

this is a good tip!!! all the apps that got ported over from the iphone have square icons which made the whole launcher page look inconsistent with webos icon style.

p.s how comes developers dont make the icon according to Webos icon style.

good tip and "mostly" good comments. Thanks for the effort.

Thank you! I am in the process of creating a theme for the first time and this is definitely a huge help for me to know! Now if only you could make a tip about changing the device's universal font...

Great tip. Thank you!

Thanks! I just changed Twee's default icon to this awesome one I found: http://tinyurl.com/242td4b

Thanks! I just changed Twee's default icon to this awesome one I found: http://tinyurl.com/242td4b

thanks

nice I was wondering how to do that thanks

it would be great if someone could develop an app which gives you the ability to change/replace an icons just like the way we change themes.

Great tip!

Great tip!

Thanks for a great tip!

Very nice.
If you enable master mode in internalz you can also do the same with the icons of the built-in applications such as e-mail, browser etc.
Just got to /usr/palm/applications
Remember you can rename a file by selecting info and then editing the filename.
I renamed the original icon to orig.png and then changed the replacement to icon.png; so it's easy to switch back if necessary.

Got some good icons from http://www.iconspedia.com/

Good article... Even better comment here! Just goes to show when you start a topic worth discussing, good ideas from the webOS community start coming out of the woodwork.

I knew about using Internalz for replacing and switching around icons but I didn't know you could do the same with the built-in webOS icons. This is great. For me, I don't want to replace them, I want to use them on other apps to make those apps have more of a stock webOS look and feel.

Thanks for the post P/C and thanks rEVILospud for the additional info!

No problem.
I have had some fun with the e-mail and browser icons; as well as the CineShowTime App, as it's icon was naff.
See below screencapture.

I don't know about anyone else, but in my opinion preware is a pain to deal with. There is to much hassel with it and when i did the last update, of webos, my phone really operated fast, faster than when it was new...which was cool. But it seems that after reinstalling preware my phone slowed down again. I am all for the pre and webos over the android system and thier phones. the pre is as versitile as the Iphone.

qq4all, so above it says that the app has to already be installed otp for it to be used as a replacement icon.. so then there would be two apps otp with the same icon? plz advise.. i hate the default sms icon on my pre, and cant wait to replace it.. is this possible as well, or does it only replace an app icon.. btw loving my pre and all of the available patchwork..i intend to customize it within an inch of its life. :)

It is obviously easier to use an icon from an app that is already installed, as it is already on the phone.
You can just as easily download another 64x64 png icon and save it on your phone and do exactly the same thing.
There's a few suitable messaging ones here: http://www.iconspedia.com/search/chat/

When is webOS 2.0 supposed to be coming out? It will be interesting to see if Internalz carries over to the new and improved OS for these kinds of customized tweaks.

I have changed the e-mail icon to Thunderbird and the browser to Firefox using this method.
Screencapture: http://www.zumodrive.com/share/7EPiNTc0OD

Arggh I'm just bad at this. It is little bit of a pain to find all the apps and replace the icons. Wish there was a way that if you orange/grey button (or Alt I guess) +tap on the icon, you know when it pulls up the info for the app to delete, if you can just tap the icon and let you select what image you want to use to replace that icon.