Adding iPhone favicons via iWeb

Question

Adding iPhone favicons via iWeb

I publish my iPhone friendly website using iWeb '09.
I use a domain name via GoDaddy.
I added a 57p x57p 'apple-touch-icon.png' to the root folder

I can see the favicon at www."rootfolder".com/apple-touch-icon.png

The favicon does not appear when I try to "add to home screen" on my iPhone.

Why?

MacPro DualQuad, Mac OS X (10.6.4)

Posted on Jun 24, 2010 5:45 PM

Reply

Answer 1

Top-ranking reply

Roddy

Level 6

17,265 points

Jun 24, 2010 6:03 PM in response to tarheelbornbred

You need to convert your PNG to ICO. See....

http://www.iwebformusicians.com/WebMusic/URLs-Favicons.html

"I may receive some form of compensation, financial or otherwise, from my recommendation or link."

Reply

Answer 2

Jun 25, 2010 5:19 AM in response to Roddy

Still not working, the new .ico file is there.

Reply

Answer 3

Jun 25, 2010 6:38 AM in response to Roddy

Nope.
http://en.wikipedia.org/wiki/Favicon

Reply

Answer 4

Jun 25, 2010 6:38 AM in response to tarheelbornbred

I just read the Apple Safari Web Clips guidelines and it clearly states the .png format.
I am pretty sure that I have everything in the right format and in the right place,
for example:

www.johndkretschmer.com/apple-touch-icon.png

But the Web Clip image (favicon) does not work on my iPhone.

Could this have something to do with the domain name being different from the iWeb address?

Reply

Answer 5

Jun 25, 2010 6:40 AM in response to QuickTimeKirk

Yep. I get it.

Can I add the header code through iWeb?

Reply

Answer 6

Jun 25, 2010 6:47 AM in response to tarheelbornbred

iWeb has no way of editing anything other than the <body> tag.
You'll need to hand edit to add to the <head> tag for your custom favicon.

Reply

Answer 7

Wyodor

Level 6

19,930 points

Jun 25, 2010 6:48 AM in response to tarheelbornbred

There's nothing wrong with your icon for the iPhone :

[Create an Icon for Your Web Application or Webpage| http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/i PhoneWebAppHIG/MetricsLayout/MetricsLayout.html#//apple_ref/doc/uid/TP40007900-C H6-SW31 ]
[Specifying a Webpage Icon for Web Clip| http://developer.apple.com/safari/library/documentation/AppleApplications/Refere nce/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html# //apple_ref/doc/uid/TP40002051-CH3-SW4 ]

The Web Clip icon is not the same as a Favicon you see in the addressfield of a browser.

You can use the same Web Clip icon as a favicon. Duplicate it and rename it favicon.ico.

No need to add code to iWeb either. Any modern browser will find it in the root of the webserver.

It does not work when you use web.me.com/username (or any service where the user directory is not root), as the Web/Sites folder on iDisk is not root in that case. You have to add the code to the <head> of the page :

<link rel="shortcut icon" href="favicon.ico" />

Why your Web Clip does not work on a iPhone is beyond me. Perhaps clearing the cache of Mobile Safari will help.

Reply

Answer 8

Jun 25, 2010 7:38 AM in response to Wyodor

I am not interested in the favicon (url) just the Web Clip icon for the iPhone.

Still not working . . .

Reply

Answer 9

Wyodor

Level 6

19,930 points

Jun 25, 2010 8:00 AM in response to tarheelbornbred

This is your website :

http://web.me.com/outlawjosiewells/

So it doesn't work.

Remember : "root".

Reply

Answer 10

Wyodor

Level 6

19,930 points

Jun 25, 2010 8:19 AM in response to Wyodor

Paste this in a HTML Snippet and see if that works :

<script language="JavaScript" type="text/javascript">
<!--
var headID = parent.document.getElementsByTagName("head")[0];
var newLink = parent.document.createElement('link');
newLink.rel = 'apple-touch-icon';
newLink.href = '/outlawjosiewells/apple-touch-icon.png';
headID.appendChild(newLink);
// -->
</script>

Reply

Answer 11

Jun 28, 2010 12:40 PM in response to Wyodor

I am trying all of the above. But it just doesn't seem to work.

Urrrggggh.

Reply

Answer 12

''

Level 2

195 points

Jun 28, 2010 2:22 PM in response to tarheelbornbred

You must edit the .html file of the page after publishing from iWeb.

Reply

Answer 13

thesaund

Level 1

0 points

Jun 29, 2010 11:25 PM in response to tarheelbornbred

The PNG is not required to be at the root. Dashcode specifically reroutes users from the root to /Mobile if it finds you are on an iPhone, so Apple were never expecting these files to be found at the root of the site.

What does dictate the icon however is this tag: <link rel="apple-touch-icon" href="Images/WebClipIcon.png"> you can see the full path being used.

Chances are, your PNG is actually at www.rootfolder.com/Mobile/apple-touch-icon.png.
I also had to update the HTML that Dashcode produced to refer to the image correctly.
The original tag above needed to become: <link rel="apple-touch-icon" href="/Mobile/Images/WebClipIcon.png">

The first version should actually have worked as a relative link since it doesn't start with a slash, but providing an absolute link (led with a slash) was much easier.

By the way, the Apple dev tools (including Dashcode) are free (with a registration no doubt - no need for the paid one though) and quite frankly for building sites, iWeb is a total fail whereas Dashcode is fantastic.

Reply

Answer 14

Jul 5, 2010 4:54 AM in response to thesaund

Thank you. Dashcode it is. Excellent advise. I saw the "Favicon" addressed in the tutorial, I hope that it coverds the iPhone "web Clip" as well.

Reply