PDA

View Full Version : Creating a WebClip Bookmark Icon




MacRumors
Jan 16, 2008, 10:38 AM
http://www.macrumors.com/images/macrumorsthreadlogo.gif (http://www.macrumors.com)

Dan Dickinson posts (http://vjarmy.com/archives/2008/01/howto_iphone_webclip_icons.php) instructions on how to create your own custom WebClip Icon for your website:

- Create a 57x57 PNG.
- Name it "apple-touch-icon.png"
- Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)

More instructions for web designers available at Apple's iPhone Dev Center (http://developer.apple.com/iphone/devcenter/designingcontent.html).

Article Link (http://www.macrumors.com/iphone/2008/01/16/creating-a-webclip-bookmark-icon/)



mainstreetmark
Jan 16, 2008, 10:44 AM
Excellent!!


Works great! Try my site:

http://www.itunesregistry.com

overanalyzer
Jan 16, 2008, 11:41 AM
so when's macrumors going to add one? I'm looking forward to having a better icon for the site on my home screen. :)

zombitronic
Jan 16, 2008, 11:43 AM
Cool. Kinda like a favicon.

Google.com must have one of these, since no matter where you scroll to, you get a nice, centered Google logo as your icon.

domness
Jan 16, 2008, 11:53 AM
Wow, thanks for the headsup :)

Just added it to my site now. Looks alot better on the springboard :D

mainstreetmark
Jan 16, 2008, 12:06 PM
Excellent!!


Works great! Try my site:

http://www.itunesregistry.com

PS: transparent = black

Drumjim85
Jan 16, 2008, 12:24 PM
so when's macrumors going to add one? I'm looking forward to having a better icon for the site on my home screen. :)

exactly ... come on Macrumors!!!!

tethead
Jan 16, 2008, 12:43 PM
nice, that was easy! thanks for the tip!

www.week4paug.net - beware, it's a website for Phishheads!

djdole
Jan 16, 2008, 01:29 PM
I had noticed that Google already did this with their iPhone search/gmail/calendar/reader sites...
I just didn't know exactly how to implement it. Props for the mad investigatory skills!

msmith2112
Jan 16, 2008, 03:47 PM
nice, that was easy! thanks for the tip!

www.week4paug.net - beware, it's a website for Phishheads!

Cool man! You ever log on to Phantasy Tour?

bacaramac
Jan 16, 2008, 03:47 PM
Come on MacRumors, we need an icon, can you throw us a bone?

No rush, but hurry. This is great.

aardwolf
Jan 16, 2008, 03:51 PM
I thought it wasn't working for me, but it turns out you have to wait on the screen where it asks you to name it. If you click save too quickly, it will not pull back the PNG.

roland.g
Jan 16, 2008, 04:42 PM
I think we need a sticky of major sites that have this icons.

BTW, thanks arn and MR, looks great.

OttomanUmpire
Jan 16, 2008, 06:08 PM
As of 2 minutes ago, Apple didn't even have one of these in place. What's that about? Nobody let their graphics department in on the secret? Is it "in the air"? Am I missing something?

Although this is probably obvious, a fast way to check this from a browser is to type in "www.[domain].com/apple-touch-icon.png" -- it will return the icon if it's there.

ravenvii
Jan 16, 2008, 06:20 PM
The regular version of the MacRumors site has the .png, but the mobile version doesn't.

Put one up there on the mobile site!

macintel4me
Jan 16, 2008, 11:39 PM
see sig. I just added support for them today. Kinda cool!

jrbohorquezg
Jan 16, 2008, 11:45 PM
My gallery now has it - http://www.aoigallery.com

Works great!

Mexicam
Jan 17, 2008, 03:15 PM
I'm new to web site design and I just read this thread. I am using iWeb by Apple to make my webpage. i want to ad this icon for my website, but where do i put the icon that i made in iWeb. What folder???

Thanks.

Pennine
Jan 19, 2008, 01:47 PM
Wikipedia has a great webclip, any other new ones today ?

corranroh
Jan 21, 2008, 05:47 PM
Engadget, Gizmodo, iLounge, and Meebo now have icons.

CNN now has an icon.

Ars Technica and Flickr now have icons.

BBC (beta) now has an icon.

samh004
Jan 22, 2008, 02:26 AM
Got one added (http://www.samheathfield.com/apple-touch-icon.png) for my website too, now just trying to work out how to get the favicon to work, haha.

ericelben
Jan 23, 2008, 10:34 AM
Facebook and Digg have icons.

JonasLondon
Jan 24, 2008, 07:51 AM
Hi all,

Thanks for a great little tutorial and good links - here's our new :apple:iPhone icon for Undervalued-Shares.com:

http://www.undervalued-shares.com/apple-touch-icon.png
http://www.undervalued-shares.com

Jonas :apple:

Chris Blount
Jan 28, 2008, 08:19 AM
Got mine up: http://www.dbstalk.com

Had to go back and look for a nice clean version of my logo. It looks really sharp and clear. Thanks for the info.

fotografer
Jan 29, 2008, 01:04 AM
I didn't even know I could make one of these! But now my site is a little more iPhone friendly (always glad to do so)! Thanks for the head's up!

If you want to check mine out, go to www.NickCarverPhotography.com (http://www.nickcarverphotography.com) (has a lot of images, may take some time to load the first time).

chriscoyne
Feb 3, 2008, 12:59 PM
You can also go to a Site called www.clipalizer.com From from your computer....from the Site screen - The Name of Clip. The URL...be sure to include the Http:// Create you Webclip and browese and add the clip.

Clipalizer then comes back with a Clipalizer ULR. Go to your iPhone put in the URL given. Hit the "+" sign ..select add to home page follow on-screen next step. Wait a sec for your Webclip to load. Add and your done.

You can look and copy other peoples WebClips in the gallery.

chris

overanalyzer
Feb 3, 2008, 02:37 PM
You can also go to a Site called www.clipalizer.com From from your computer....from the Site screen - The Name of Clip. The URL...be sure to include the Http:// Create you Webclip and browese and add the clip.

Clipalizer then comes back with a Clipalizer ULR. Go to your iPhone put in the URL given. Hit the "+" sign ..select add to home page follow on-screen next step. Wait a sec for your Webclip to load. Add and your done.

You can look and copy other peoples WebClips in the gallery.

chris

Indeed...see the MacRumors.com posting from 2 weeks ago :)
http://www.macrumors.com/iphone/2008/01/19/clipalizer-custom-webclip-icons-for-any-website/