Recommend not to use any HTML for the main favicon

[mathiasbynens]

See http://mathiasbynens.be/notes/rel-shortcut-icon.

Also, recommend default file names for touch icons, as per http://mathiasbynens.be/notes/touch-icons.

[audreyfeldroy]

Thanks for submitting this :)

I noticed an inconsistency that I'm curious to hear your and others' thoughts about:

1. You say that shortcut icon is "considered harmful" because it:

   a. "doesn’t show up in section 4.12.5 of the HTML5 specification on ‘link types’" b. is "proprietary to Internet Explorer".

2. By the same reasoning, isn't relying implicitly on the name apple-touch-icon-precomposed just as harmful because it:

   a. doesn't show up in HTML5 specification section 4.12.5.5, Link type "icon" (only /favicon.ico is mentioned) b. is proprietary to Apple

@mathiasbynens Really sorry to bother you about this. I genuinely do want to collaborate and have a lot of respect for all that you've done in this area, so your thoughts would be much appreciated.

[grayghostvisuals]

I've been following the HTML5 Boilerplate and leaving out the favicon link all together. The favicon is picked up automatically, but I do use an .ico and .png in my root directory to cover both scenarios. Works on all browsers -even IE8. :thumbsup:

[mathiasbynens]

@audreyr

By the same reasoning, isn't relying implicitly on the name apple-touch-icon-precomposed just as harmful […]

Yes. The difference is that for favicon.ico you don’t need the HTML anyway, so it’s a no-brainer. For touch icons, you do (if you want broad support, at least).

@grayghostvisuals “Both scenarios”? Simply placing a /favicon.ico on the server enables the favicon in every browser.

[grayghostvisuals]

@mathiasbynens I guess I'm just being OCD for those that won't display a .png. I have noticed most of our current browsers support .png favicons w/out the link ref and honestly it's a bit easier to make a .png over an .ico.

Start @ 2:42 http://css-tricks.com/video-screencasts/122-the-state-of-favicons/

[audreyfeldroy]

@mathiasbynens Okay, thanks. This pull request to stop recommending HTML for the main favicon is generally good. I can merge this in if you:

• Add a bulleted list of what browsers "every relevant desktop browser" refers to
• Remove the apple-touch-icon-precomposed bit, since it conflicts with the sections below. (Happy to discuss this in a separate pull request, but let's keep things atomic in this "Recommend not to use any HTML for the main favicon" pull request)
• Remove the "obsessive" link. (Side note: I am open to something roughly along these lines and have been thinking that adding in RST-style footnote citations for each section would be helpful. But again, this is out of scope of "Recommend not to use any HTML for the main favicon")

Again, I like this overall. But I know this is a lot to ask, so if you don't have time to resubmit, I can make the changes and credit you as the git commit author.

@grayghostvisuals I think it's actually better to provide only favicon.ico and not favicon.png:

• An .ico is a container for multiple .bmp or .png files. If you specify 1 default favicon.png, and if that favicon.png overrides the favicon.ico, you are giving up control over how the favicon looks at different resolutions and allowing the browser to do all resizing. For example, you might want the 64x64 version to contain text and the 16x16 version to not display the text at all, since at 16x16 it would be unreadable anyway.
• There is no favicon.png in the HTML5 specification, just /favicon.ico. From http://www.w3.org/TR/html5/links.html#rel-icon:
  • 'In the absence of a link with the icon keyword, for Documents obtained over HTTP or HTTPS, user agents may instead attempt to fetch and use an icon with the absolute URL obtained by resolving the URL "/favicon.ico" against the document's address, as if the page had declared that icon using the icon keyword.'

[mathiasbynens]

I won’t have time for this so feel free to edit my changes as you like! (Also I’m not really familiar with RST. So awkward compared to Markdown!)

Add a bulleted list of what browsers "every relevant desktop browser" refers to

Every browser/version all the way back to IE6, except for SeaMonkey. (It has a setting for /favicon.ico that is disabled by default, as explained in the post.)

[audreyfeldroy]

Cool, thanks @mathiasbynens, really appreciate everything!

[audreyfeldroy]

Just FYI this is merged but I'm still working on formatting. I may have to move this to Markdown like you said.

[grayghostvisuals]

@audreyr Thanks :beers: