Creating a WebClip Bookmark Icon

MacRumors · Jan 16, 2008, 11:38 AM

Dan Dickinson posts 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.

Article Link

mainstreetmark · 11:51 AM

Excellent!!

Works great! Try my site:

http://www.itunesregistry.com

overanalyzer · Jan 16, 2008, 12:41 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.

zombitronic · Jan 16, 2008, 12:43 PM

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, 12:53 PM

Wow, thanks for the headsup

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

mainstreetmark · Jan 16, 2008, 01:06 PM

Quote:

Originally Posted by mainstreetmark

Excellent!!

Works great! Try my site:

http://www.itunesregistry.com

PS: transparent = black

Drumjim85 · Jan 16, 2008, 01:24 PM

Quote:

Originally Posted by overanalyzer

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, 01:43 PM

nice, that was easy! thanks for the tip!

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

djdole · Jan 16, 2008, 02: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, 04:47 PM

Quote:

Originally Posted by tethead

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, 04: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, 04: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, 05: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, 07: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, 07: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 17, 2008, 12:39 AM

see sig. I just added support for them today. Kinda cool!

jrbohorquezg · Jan 17, 2008, 12:45 AM

My gallery now has it - http://www.aoigallery.com

Works great!

Mexicam · Jan 17, 2008, 04: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, 02:47 PM

Wikipedia has a great webclip, any other new ones today ?

corranroh · 03:08 AM

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, 03:26 AM

Got one added for my website too, now just trying to work out how to get the favicon to work, haha.

ericelben · 12:04 AM

Facebook and Digg have icons.

JonasLondon · Jan 24, 2008, 08:51 AM

Hi all,

Thanks for a great little tutorial and good links - here's our new

iPhone icon for Undervalued-Shares.com:

http://www.undervalued-shares.com

Jonas

Chris Blount · Jan 28, 2008, 09: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, 02: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 (has a lot of images, may take some time to load the first time).

Jan 16, 2008, 11:38 AM	#1
MacRumors macrumors bot Join Date: Apr 2001	Creating a WebClip Bookmark Icon Dan Dickinson posts 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. Article Link

Jan 16, 2008, 11:44 AM	#2
mainstreetmark macrumors 68000 Join Date: May 2003 Location: Saint Augustine, FL	Excellent!! Works great! Try my site: http://www.itunesregistry.com __________________ iTunesRegistry.com <-- v3.0 Now Playing Last edited by mainstreetmark : Jan 16, 2008 at 11:51 AM.

Jan 16, 2008, 12:41 PM	#3
overanalyzer macrumors 6502a Join Date: Sep 2007 Location: Boston, MA USA	so when's macrumors going to add one? I'm looking forward to having a better icon for the site on my home screen. __________________ MBP 2.4 Core 2 Duo (work/home) / Mac Pro (work) / 24" Al iMac (home) / Mac Mini (home) / 8GB iPhone 3G

Jan 16, 2008, 12:53 PM	#5
domness macrumors 6502a Join Date: Jan 2008 Location: UK	Wow, thanks for the headsup Just added it to my site now. Looks alot better on the springboard __________________ Blog - Twitter \| iPhone 3G OS 3.1b3 \| MacBook Pro 13.3" \| iPhone Developer - iMood, DonkPad, Twitterville

Jan 16, 2008, 02:29 PM	#9
djdole macrumors regular Join Date: Aug 2007	Awesome 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!

Jan 16, 2008, 12:43 PM	#4
zombitronic macrumors 6502a Join Date: Feb 2007	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.

Jan 16, 2008, 01:43 PM	#8
tethead macrumors member Join Date: Apr 2005 Location: NYC	nice, that was easy! thanks for the tip! www.week4paug.net - beware, it's a website for Phishheads!

Jan 16, 2008, 04:47 PM	#11
bacaramac macrumors 6502a Join Date: Dec 2007	Come on MR Come on MacRumors, we need an icon, can you throw us a bone? No rush, but hurry. This is great. __________________ iMac 27" 3.06Ghz 13" Unibody MBP Dual-Band AEBS ATV 40GB 16GB iPhone 3G S⃣ Black and White Touch x 2

Jan 16, 2008, 04:51 PM	#12
aardwolf macrumors member Join Date: May 2007	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.

Jan 16, 2008, 05:42 PM	#13
roland.g macrumors 68040 Join Date: Apr 2005 Location: One mile up and soaring	I think we need a sticky of major sites that have this icons. BTW, thanks arn and MR, looks great. __________________ I know this because Tyler knows this. You are not a beautiful snowflake. You are the same decaying matter as everything else.

Jan 16, 2008, 07:08 PM	#14
OttomanUmpire macrumors newbie Join Date: Jul 2007	Apple, heal thyself 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.

Jan 16, 2008, 07:20 PM	#15
ravenvii macrumors 68040 Join Date: Mar 2004 Location: Melenkurion Skyweir	The regular version of the MacRumors site has the .png, but the mobile version doesn't. Put one up there on the mobile site! __________________ You spoony bard!

Jan 17, 2008, 12:39 AM	#16
macintel4me macrumors 6502 Join Date: Jan 2006	Try my apps :) see sig. I just added support for them today. Kinda cool! __________________ My iPhone 3.0 games:Mancala: FS5, Tic-Tac-Touch

Jan 17, 2008, 12:45 AM	#17
jrbohorquezg macrumors member Join Date: Jul 2002 Location: Chicago	Pretty cool! My gallery now has it - http://www.aoigallery.com Works great! __________________ DP 867 Mhz PowerMac -- 768 Mb Ram -- 60Gb HD -- Ati Radeon 9000 Pro -- 17" Flat Panel Display

Jan 17, 2008, 04:15 PM	#18
Mexicam macrumors newbie Join Date: Jan 2008	Where do I put the Icon in iWeb 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.

Jan 19, 2008, 02:47 PM	#19
Pennine macrumors regular Join Date: Jan 2008 Location: Glossop UK	new webclips Wikipedia has a great webclip, any other new ones today ?

Jan 21, 2008, 06:47 PM	#20
corranroh macrumors newbie Join Date: Jan 2006	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. Last edited by WildCowboy : Jan 22, 2008 at 03:08 AM. Reason: post merge...feel free to maintain a list, but please don't post each time you find a new one

Jan 22, 2008, 03:26 AM	#21
samh004 macrumors 68020 Join Date: Mar 2004 Location: Australia	Got one added for my website too, now just trying to work out how to get the favicon to work, haha. __________________ Website \| Blog

Jan 23, 2008, 11:34 AM	#22
ericelben macrumors newbie Join Date: Jan 2008 Location: Iowa	Facebook Facebook and Digg have icons. Last edited by ericelben : Jan 25, 2008 at 12:04 AM.

Jan 24, 2008, 08:51 AM	#23
JonasLondon macrumors regular Join Date: Sep 2006 Location: London	Cool thanks - added "hi-res" icon in 5 minutes - great! Hi all, Thanks for a great little tutorial and good links - here's our new iPhone icon for Undervalued-Shares.com: http://www.undervalued-shares.com Jonas

Jan 28, 2008, 09:19 AM	#24
Chris Blount macrumors 6502a Join Date: Jan 2008 Location: San Antonio, TX	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.

Jan 29, 2008, 02:04 AM	#25
fotografer macrumors newbie Join Date: Jan 2008	Awesome! 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 (has a lot of images, may take some time to load the first time).

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode