You are not logged in.
#1 Jan 29, 2008 6:01 am
- Zack Schiller
- Member
- Joined: Mar 28, 2006
[Guide] Tweaking WebClip Icons
WebCips are stored as .webclip files, and all your WebClips are located in /private/var/root/Library/WebClips. A .webclip basically consists of two things:
an info.plist (this stores pan and zoom information, title information, and the url)
an icon.png (which isn't stored in Apple's secret png format)
You can replace that icon with anything you like, anything at all. If you don't want to have to do modification for each and every webclip, you can modify the resources they're generated from. The resources are located in MobileSafari.app and are as follows:
WebClipIconOverlay.png (the gloss, the gradient, on a white mat)
WebClipIconShadow.png (the shadow, unmasked)
WebClipPageMask.png (the mask used to trim the icon)
Then, just re-generate all of your webclips and you're done!
I hope the next version of either Customize or SummerBoard supports WebClip customization.
Offline
#2 Jan 29, 2008 8:08 am
- cwsm

- Member
- Joined: Aug 21, 2007
Re: [Guide] Tweaking WebClip Icons
Thanks!
Is it possible to achieve agua/buuf/sticker webclips with a blank WebClipIconOverlay.png?
Offline
#3 Jan 29, 2008 8:28 am
- Zack Schiller
- Member
- Joined: Mar 28, 2006
Re: [Guide] Tweaking WebClip Icons
cwsm wrote:
Thanks!
Is it possible to achieve agua/buuf/sticker webclips with a blank WebClipIconOverlay.png?
As far as I know... but why would you want a blank WebClipIconOverlay when you can just make it sticker style?
Last edited by Nuclear Potato (Jan 29, 2008 8:29 am)
Offline
#5 Jan 29, 2008 11:51 am
- cwsm

- Member
- Joined: Aug 21, 2007
Re: [Guide] Tweaking WebClip Icons
Nuclear Potato wrote:
cwsm wrote:
Thanks!
Is it possible to achieve agua/buuf/sticker webclips with a blank WebClipIconOverlay.png?As far as I know... but why would you want a blank WebClipIconOverlay when you can just make it sticker style?
Because if you don't replace WebClipIconOverlay.png, iPhone/iPod will add official Apple gloss on top of the WebClip icon.
Offline
#6 Jan 29, 2008 1:44 pm
- Zack Schiller
- Member
- Joined: Mar 28, 2006
Re: [Guide] Tweaking WebClip Icons
cwsm wrote:
Nuclear Potato wrote:
cwsm wrote:
Thanks!
Is it possible to achieve agua/buuf/sticker webclips with a blank WebClipIconOverlay.png?As far as I know... but why would you want a blank WebClipIconOverlay when you can just make it sticker style?
Because if you don't replace WebClipIconOverlay.png, iPhone/iPod will add official Apple gloss on top of the WebClip icon.
What I propose is replacing the overlay with the sticker stroke and the folded sticker sheen, then replacing the mask with a folded sticker shape, then the shadow with the sticker shadow. If you were going to just make the overlay blank, you might as well replace the webclip icon in the .webclip file.
Offline
#7 Jan 29, 2008 2:00 pm
- Hiratai
- Banned
- Joined: Dec 2, 2007
Re: [Guide] Tweaking WebClip Icons
Is there any way to remove the gloss on the icons? I want them to match my Agua theme nicer.
As in the gloss I mean the top half of the icon that kinda shiny.
Offline
#8 Jan 29, 2008 2:03 pm
- Zack Schiller
- Member
- Joined: Mar 28, 2006
Re: [Guide] Tweaking WebClip Icons
Hiratai wrote:
Is there any way to remove the gloss on the icons? I want them to match my Agua theme nicer.
As in the gloss I mean the top half of the icon that kinda shiny.
Remove WebClipIconOverlay.png from MobileSafari.app and then re-generate your webclips.
Offline
#9 Jan 29, 2008 2:10 pm
- Pierre Breteau

- Member
- From: France
- Joined: Mar 17, 2007
Re: [Guide] Tweaking WebClip Icons
Great, thank you, I wish I had a fully layered Agua template psd ![]()
Offline
#10 Jan 29, 2008 6:59 pm
- NetworkShadow

- Retired Staff
- From: Johnson City, TN USA
- Joined: Jan 3, 2005
- Website
Re: [Guide] Tweaking WebClip Icons
applefish wrote:
Great, thank you, I wish I had a fully layered Agua template psd
+1 That would be great. ![]()
Offline
#12 Feb 1, 2008 6:34 pm
- TheSpaz

- Member
- Joined: Jan 3, 2005
Re: [Guide] Tweaking WebClip Icons
I just made a PSD template file out of those files if anyone's interested.
Offline
#13 Feb 1, 2008 7:47 pm
- lapinbionic
- Member
- From: France
- Joined: Jun 18, 2005
Re: [Guide] Tweaking WebClip Icons
It would be great ![]()
Offline
#14 Feb 1, 2008 8:11 pm
- TheSpaz

- Member
- Joined: Jan 3, 2005
Re: [Guide] Tweaking WebClip Icons
http://forums.macrumors.com/showthread.php?p=4878298
There you go!
Offline
#15 Feb 2, 2008 1:11 am
- Pierre Breteau

- Member
- From: France
- Joined: Mar 17, 2007
Re: [Guide] Tweaking WebClip Icons
Thank you! It rocks!
Offline
#16 Feb 2, 2008 8:01 am
- TheSpaz

- Member
- Joined: Jan 3, 2005
Re: [Guide] Tweaking WebClip Icons
applefish wrote:
Thank you! It rocks!
Thanks! It wasn't hard to do... hehe.
Offline
#17 Feb 3, 2008 8:50 am
- lapinbionic
- Member
- From: France
- Joined: Jun 18, 2005
Re: [Guide] Tweaking WebClip Icons
I tried to do a sort of agua inspired webclip overlay, it looks like this :![]()
Place it in Applications/MobileSafari.app/ and replace, don't forget to backup.
http://img263.imageshack.us/img263/9876 … layyq4.png
Last edited by lapinbionic (Feb 3, 2008 8:51 am)
Offline
#18 Feb 3, 2008 1:26 pm
- sandro

- Member
- Joined: May 3, 2007
Re: [Guide] Tweaking WebClip Icons
@lapinbionic
thanks, but whats the difference from the default ones? will try it now ![]()
Offline
#19 Feb 3, 2008 8:05 pm
- lapinbionic
- Member
- From: France
- Joined: Jun 18, 2005
Re: [Guide] Tweaking WebClip Icons
It is less glossy and match more with agua iconset, but it's not perfect.
I hope Louie gonna release one ![]()
Offline
#22 Feb 5, 2008 6:35 pm
Re: [Guide] Tweaking WebClip Icons
Mac Guru wrote:
Anyone?
ok I have been trying to make a Buuf WebClips. it is taking me some time. this is not perfect at all but I'm working on it. I think someone else could probably do a better job. so if you want to give it a try i will tell you what I did... which is probably wrong anyway ... ![]()
from the buuf template. i took the gradient and the grain and merged them together set the opacity to 50. and then I cut that out exactly the same shape as the White part of the icon.
after that I cut out the White part of the icon and paste that on top (hope you understand that part)
so at the end I had the grain the white part of the icon and the icon itself.
save the grain as WebClipIconOverlay.png
NO more red now
thanks Dustin
save the white part of the icon as WebClipPageMask.png
save the icon as WebClipIconShadow.png![]()
I know it looks bad now but it's a start. it looks a little bit better with dark clips. like mmi and mint.
fix 
Last edited by TURN (Mar 23, 2008 9:08 am)
Offline
#23 Feb 5, 2008 6:38 pm
- Fadakar

- Member
- From: Orange County, CA
- Joined: Jan 21, 2008
Re: [Guide] Tweaking WebClip Icons
Is there any way to get rid of the red tint? ![]()
Offline
#24 Feb 5, 2008 6:46 pm
- ConnorCimowsky

- Member
- From: Toronto, Canada
- Joined: Jun 5, 2007
- Website
Re: [Guide] Tweaking WebClip Icons
Desaturate it.
Offline
#25 Feb 5, 2008 6:52 pm
Re: [Guide] Tweaking WebClip Icons
Fadakar wrote:
Is there any way to get rid of the red tint?
One problem... if I take away the color you can not see the grain. but like i said I'm working on it. hopefully I can work that out or someone can help me do it. ![]()
Offline

