CODEWITHSUNDEEP
browsercompatibility
mbillard
mbillard

Reputation: 38842

Preferred way to use favicons?

I was trying to add a favicon to a website earlier and looked for a better way to implement this than to dump a favicon.ico file in the root of the website.

I found this nice little guide: How to Add a Favicon. However, the preferred method did not work in IE (7) and the second method is the old fashioned way (which I resigned myself to use).

Is there a third method that works across all the most popular browsers?

Upvotes: 9

Views: 4430

Answers (6)

npfoss
npfoss

Reputation: 490

There are a million different ways these icons are used (different browsers, different platforms, mobile site-pinning, smart TVs, etc, etc), so there's really no longer a simple answer. For a great explanation see this S.O. answer, but the short answer is:

Use this site which lets you upload a png/jpg and then does all the hard work for you: https://realfavicongenerator.net/

Upvotes: 0

Akira
Akira

Reputation: 1496

You can use HTML to specify the favicon, but that will only work on pages that have this HTML. A better way to do this is by adding the following to your httpd.conf (Apache):

AddType image/x-icon .ico

Upvotes: 2

mbillard
mbillard

Reputation: 38842

Well, the file is in the root so it does not show whether the tag works or if the browser just got the icon from the usual location (the root).

Edit: I'll try it and see if it works.

Edit 2: Using both tags make it work even for any file name as long as the file is an icon for IE7: I tried using .png files and it only worked with Firefox.

Upvotes: 0

GateKiller
GateKiller

Reputation: 75869

I think the most reliable method is the simply added the favicon.ico file to the root of your website.

I don't think there is any need for a meta tag unless you want to manually override the default favicon, but I was unable to find any research to support my argument.

Upvotes: 1

Stan
Stan

Reputation: 426

This is what I always use: 

<link rel="icon" href="favicon.ico" type="image/x-icon" />  
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

The second one is for IE. The first one is for other browsers.

Upvotes: 15

Brandon Wood
Brandon Wood

Reputation: 5337

This is how they're doing it right here on Stack Overflow:

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

Upvotes: 0

Related Questions