How to make/use your own custom Webclip Icons for pages you visit

Air

New Member
Oct 14, 2007
27
0
0
#1
This method is pretty much 95% taken from this link, so credit where credit is due. The instructions are a bit hard to understand though, so I'll try to make it easier for everyone.

Fortunately, this works for both Macs and PCs.


INSTRUCTIONS:
----------------------

Requirements:
- iPhone on 1.1.3 and any version of iTunes that can sync to iPhone
- Adobe Photoshop or any other image editing program that can crop, alter image size, and save .png image files. (Recommended 24-bit .pngs as they are higher quality)
- Apple Safari ( http://www.apple.com/safari/, and yes, you need it.)
- A website or ftp where you can upload images and directly link to them, like Google Pages.

Warning:
- This requires you to sync your Safari bookmarks to your iPhone. You will probably lose all of your iPhone's bookmarks if you don't already sync your Safari bookmarks with your iPhone. Only proceed if you do not mind losing your iPhone's current bookmarks and do not mind re-entering them after the bookmark sync. NOTE: The bookmark sync DOES NOT get rid of your current Webclips though, so don't worry about those.

Easy Steps:
1) First, make sure that you are following these instructions in the Apple Safari web browser.
2) Find an image you wish to make into a Webclip icon. (ex: I prefer to use movies.yahoo.com to look at movie showtimes, so I found an image of a movie reel from Google Image Search and decided to use that.)
3) Open the image with your preferred image editor and crop your desired image into a perfect square. Resize that picture down to 57x57 pixels. Save as a 24-bit .png file. Upload the icon to your webpage or ftp. (ex: I ended up with this icon of a movie reel: http://ctolpin.googlepages.com/Appleicon01.png )
4) Select and copy the javascript code in this .txt file: http://ctolpin.googlepages.com/webclipcode.txt
5) Go to Bookmarks and select "Add Bookmark..."
6) Type in "Webclip Icon URL"
7) Go to Bookmarks again and select "Show all Bookmarks."
8) Right-click your new "Webclip Icon URL" bookmark and select "Edit Address"
9) Paste your clipboard's contents into the field.
10) Plug your iPhone into the computer if it's not connected already.
11) In iTunes, select your iPhone from the right column. Select the Info tab. Scroll down to "Web Browser" and check "Sync bookmarks with: Safari" (obviously, make sure Safari is selected from the dropdown menu).
12) Once your iPhone is synced, use your iPhone to navigate to your intended website target to make into a Webclip. Remember that Webclips save where you zoom in as well! (ex: For me, it was movies.yahoo.com and then entering in my zip code.)
13) Once you've loaded your target website, open up the bookmarks in iPhone's Safari, select Bookmarks Bar, then select Webclip Icon URL.
14) Type in the address of your uploaded icon. (ex: In my case, it is http://ctolpin.googlepages.com/Appleicon01.png)
15) iPhone's Safari will seem like it didn't do anything. However, add that webpage now to your home screen as a Webclip. :cool: Magic.


------

Additional note:
It is easiest to make a bunch of icons at first and to upload them. However, once that "Webclip Icon URL" bookmark is in your iPhone, there is no need to go back and do any of the computer Safari steps again :)


 

Air

New Member
Oct 14, 2007
27
0
0
#4
Awesome :) Half the time, copy+paste with the javascript code did not work correctly for me, so I was getting worried.
 

TomRS

Member
Bronze
Jan 19, 2008
39
0
6
#6
You don't have to sync with Safari. I just bookmarked a random webpage. I called the bookmark "Web Link URL" Then I went into the bookmarks clicked on edit and deleted the address that was there and typed in the code from the text file. It took a while to type it all in, but I didn't loose my bookmarks on my iPhone and now I have a bunch of cool icons. I just linked the images off of a google page. It was super easy.
 

TomRS

Member
Bronze
Jan 19, 2008
39
0
6
#8
Oh, and also, I know this may be obvious for many, but something that I found helpful: Make sure you are trying to put the files on a webpage that has a short address. If you put them deep into a file structure you will have to type in all those characters on your phone for each one. Also try to keep the file name short to make it less annoying to type in all the letters.

And those two sites looked really nice, but I kinda like making my own. It doesn't take too long using photoshop or fireworks and it's nice to have the control to make sure your image is centered. I found that if you have something that you want to have in the middle of the icon, you need about a five pixel border to make sure nothing gets cut off.
 

TomRS

Member
Bronze
Jan 19, 2008
39
0
6
#9
Yeah try it on the iPhone. Slow to get all the % signs and junk, but easy once you get going.
 

Air

New Member
Oct 14, 2007
27
0
0
#10
Those sites are very, very good and easy to use.

The only trouble with those are that you can't save to a specific zoomed spot on the pages you Webclip with that method, and that you rely on those sites to direct link to your saved webpages. If webclip.us goes down and all of your Webclips are tied into it, then none of them will work until webclip.us goes back up.

The javascript method is a lot messier and takes a lot longer, but it doesn't rely on any additional servers to stay up.