133

Question

  • What is the best practice for creating a favicon on a web site?
  • and is an .ico file with both 16x16 and 32x32 images better than a .png file with 16x16 only?
  • Could the right method preferred today not be working in reasonably old browsers?

Method 1

Placing a file named favicon.ico in the main directory is one way. The browser always requests that file. You can see that in the apache log files.

Method 2

HTML tag in the <head> section:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
bytecode77
  • 14,163
  • 30
  • 110
  • 141

4 Answers4

194

There are several ways to create a favicon. The best way for you depends on various factors:

  • The time you can spend on this task. For many people, this is "as quick as possible".
  • The efforts you are willing to make. Like, drawing a 16x16 icon by hand for better results.
  • Specific constraints, like supporting a specific browser with odd specs.

First method: Use a favicon generator

If you want to get the job done well and quickly, you can use a favicon generator. This one creates the pictures and HTML code for all major desktop and mobiles browsers. Full disclosure: I'm the author of this site.

Advantages of such solution: it's quick and all compatibility considerations were already addressed for you.

Second method: Create a favicon.ico (desktop browsers only)

As you suggest, you can create a favicon.ico file which contains 16x16 and 32x32 pictures (note that Microsoft recommends 16x16, 32x32 and 48x48).

Then, declare it in your HTML code:

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

This method will work with all desktop browsers, old and new. But most mobile browsers will ignore the favicon.

About your suggestion of placing the favicon.ico file in the root and not declaring it: beware, although this technique works on most browsers, it is not 100% reliable. For example Windows Safari cannot find it (granted: this browser is somehow deprecated on Windows, but you get the point). This technique is useful when combined with PNG icons (for modern browsers).

Third method: Create a favicon.ico, a PNG icon and an Apple Touch icon (all browsers)

In your question, you do not mention the mobile browsers. Most of them will ignore the favicon.ico file. Although your site may be dedicated to desktop browsers, chances are that you don't want to ignore mobile browsers altogether.

You can achieve a good compatibility with:

  • favicon.ico, see above.
  • A 192x192 PNG icon for Android Chrome
  • A 180x180 Apple Touch icon (for iPhone 6 Plus; other device will scale it down as needed).

Declare them with 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

This is not the full story, but it's good enough in most cases.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • 12
    Actually, the still often used is not a valid option. It is not even standard and only IE supports it. And as of IE 9, IE support the default 'look at root' method. So it is not a way to support all browsers, but just a way to support IE < 9. Rely on the (now standard) 'place in root' method or, if you insist, add: (Even though this isnt standard either) – HappyMe Sep 08 '16 at 14:58
  • 11
    The favicon mechanism has definitely evolved over the years. I noticed today the spec at MDN now says: _The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore._ Meaning use `` rather than `` https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types – broc.seib Jun 05 '18 at 14:42
  • 1
    Thank you @broc.seib for the feedback. At time of writing this comment, I lost track of why it was "shortcut icon" and not "icon". Sure, Mozilla has its voice in this story. But we must not forget why this declaration is here in the first place: to support legacy browsers, such as IE 8. Most recent browsers use PNG icons, which are cleaner and lighter than ICO. My plan for RealFavicon is to remove this declaration completely. Before this, I need to run tests on IE 7, 8 and 9. – philippe_b Jun 05 '18 at 17:00
  • Not to mention, that if you "view source" on this page, on Stack Overflow, `ref="shortcut icon"` is exactly what they use. – Steven Ventimiglia Jan 03 '19 at 19:57
  • Am I missing something (history) or this doesn't answer the actual question - what's the difference between `/favicon.ico` vs ``? – laggingreflex Mar 08 '19 at 04:29
  • 2
    @laggingreflex `/favicon.ico` is the preferred method. This is what you get when visiting `www.google.com`. Yet, you may not want to pollute your root directory with an icon. In that case, the markup works just fine. – philippe_b Mar 08 '19 at 22:56
  • @christo8989 What's happening? Did you check your markups and make sure the URLs (eg. http://localhost/favicon.ico) were working? – philippe_b Oct 04 '19 at 16:33
  • @philippe_b I didn’t but method 2 works and I figure following stackoverflow’s code is good enough. I don’t want to spend too much time on it. – christo8989 Oct 04 '19 at 17:55
  • @christo8989 Good! The job was done and that's what matters. – philippe_b Oct 06 '19 at 16:21
  • "The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore." Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#attr-icon – Fawaz Ahmed Jun 03 '22 at 12:02
5

As SVG favicon has gained support in major browsers, another option would be to switch to SVG:

<link rel="icon" sizes="any" type="image/svg+xml" href="favicon.svg">
<!-- Fallback favicon in case a browser does not support the SVG version -->
<link rel="alternate icon" type="image/x-icon" href="favicon.ico">

The SVG can also be URL-encoded (like below) or, like other formats, be encoded to Base64 (for example, using this online tool). The benefit is that, you avoid one HTTP request:

<link rel="icon" sizes="any" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5e400' d='m6 21 2-7-6-5h7l3-7 3 7h7l-6 5 2 7-6-4z'/%3E%3C/svg%3E%0A">

This CSS-Tricks article explains some of the benefits of switching to SVG, most notably:

  • Future-proofing (guarantee that our favicon looks crisp on future devices)
  • Easier to modify (for example, changing a color)
  • Dark mode support
  • Could be animated (using SMIL) (AFAIK, only Firefox supports animated favicons)

This post provides a good answer whether/where it is safe to use an SVG image for favicon.

And here are some famous sites that are using SVG favicons (inspect a page with your browser):

Mahozad
  • 18,032
  • 13
  • 118
  • 133
3
  1. you can work with this website for generate favin.ico
  2. I recommend use .ico format because the png don't work with method 1 and ico could have more detail!
  3. both method work with all browser but when it's automatically work what you want type a code for it? so i think method 1 is better.
Matthias
  • 7,432
  • 6
  • 55
  • 88
a828h
  • 146
  • 9
1

I used https://iconifier.net I uploaded my image, downloaded images zip file, added images to my server, followed the directions on the site including adding the links to my index.html and it worked. My favicon now shows on my iPhone in Safari when 'Add to home screen'

Hblegg
  • 189
  • 2
  • 10