Creating a WebClip Bookmark Icon

MacRumors · Jan 16, 2008, 10: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 · 10:51 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

mainstreetmark · Jan 16, 2008, 12:06 PM

Quote:

Originally Posted by mainstreetmark

Excellent!!

Works great! Try my site:

http://www.itunesregistry.com

PS: transparent = black

Drumjim85 · Jan 16, 2008, 12: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, 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

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

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

ericelben · 11:04 PM

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

iPhone icon for Undervalued-Shares.com:

http://www.undervalued-shares.com

Jonas

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 (has a lot of images, may take some time to load the first time).

Jan 16, 2008, 10: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
	0

Jan 16, 2008, 10:44 AM	#2
mainstreetmark macrumors 68020 Join Date: May 2003 Location: Saint Augustine, FL	Excellent!! Works great! Try my site: http://www.itunesregistry.com __________________ iTunesRegistry.com <--don't bother, it's dead. Last edited by mainstreetmark; Jan 16, 2008 at 10:51 AM.
	0

Jan 16, 2008, 11:41 AM	#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. __________________ 15" MacBook Pro Retina (2.6GHz/512GB/16GB) / 27" Thunderbolt Display / iPad 3 / iPhone 5 / G4 Mac Mini / Apple TV 3
	0

Jan 16, 2008, 11:53 AM	#5
domness macrumors 6502a Join Date: Jan 2008 Location: Sheffield, UK	Wow, thanks for the headsup Just added it to my site now. Looks alot better on the springboard __________________ Blog - Twitter \| iPhone 5 \| iMac \| MacBook Pro 2012 15" i7 \| iPad 3 \| iOS/Mac/Web Developer
	0

Jan 16, 2008, 01: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!
	0

Jan 16, 2008, 11:43 AM	#4
zombitronic macrumors 65816 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.
	0

Jan 16, 2008, 12: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!
	0

Jan 16, 2008, 03:47 PM	#11
bacaramac macrumors 65816 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 2TB Time Capsule AppleTV3 x 2 16GB iPhone 5 White/Silver AT&T iPod Touch 4th Gen White and 5th Gen Yellow iPad mini White/Silver 16GB WiFi
	0

Jan 16, 2008, 03:51 PM	#12
aardwolf macrumors 6502 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.
	0

Jan 16, 2008, 04:42 PM	#13
roland.g macrumors 601 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.
	0

Jan 16, 2008, 06: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.
	0

Jan 16, 2008, 06:20 PM	#15
ravenvii macrumors 603 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! __________________ 01011001 01101111 01110101 00100000 01110011 01110000 01101111 01101111 01101110 01111001 00100000 01100010 01100001 01110010 01100100 00100001
	0

Jan 16, 2008, 11:39 PM	#16
macintel4me macrumors 6502 Join Date: Jan 2006	Try my apps :) see sig. I just added support for them today. Kinda cool!
	0

Jan 16, 2008, 11:45 PM	#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
	0

Jan 17, 2008, 03: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.
	0

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

Jan 21, 2008, 05: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 02:08 AM. Reason: post merge...feel free to maintain a list, but please don't post each time you find a new one
	0

Jan 22, 2008, 02: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
	0

Jan 23, 2008, 10:34 AM	#22
ericelben macrumors member Join Date: Jan 2008 Location: Iowa	Facebook Facebook and Digg have icons. Last edited by ericelben; Jan 24, 2008 at 11:04 PM.
	0

Jan 24, 2008, 07: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
	0

Jan 28, 2008, 08:19 AM	#24
Chris Blount macrumors 65816 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.
	0

Jan 29, 2008, 01: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).
	0

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

Similar Threads
thread	Thread Starter	Forum	Replies	Last Post
safari bookmark icons - globes instead of site icons	coreypiko	MacBook Pro	2	Oct 4, 2011 04:38 PM
Updated LIST of known WEBCLIP Bookmark Icons	SFC Archer	iPhone	186	Apr 11, 2008 03:19 PM
Can I create universal (multi-browser) bookmarks	jmort	Mac OS X	0	Jun 15, 2005 02:28 PM
What does a blue bookmark icon mean?	jsw	Mac Applications and Mac App Store	3	Jul 26, 2004 08:30 PM