Creating a favicon

Question

How can I create and use a favicon for my website?

Possible duplicate of [How to add a browser tab icon (favicon) for a website?](http://stackoverflow.com/questions/4888377/how-to-add-a-browser-tab-icon-favicon-for-a-website) — Michał Perłakowski, Mar 19 '16 at 13:38
@Gothdo This is not a duplicate! The one you point to IS! This one preceded that one by a year and a half! — Dov Miller, Jul 20 '16 at 10:04
I'm voting to close this question as off-topic because this is not about programming but web design. — Kyll, Dec 21 '16 at 15:09
@DovMiller The better question with the better answers is the one that should remain open. — mbomb007, Jan 03 '20 at 19:58

score 109 · Answer 1 · edited Jun 20 '20 at 09:12

109

Searching about favicons, I discovered I needed more than 10 kinds of files to work in all browsers and devices :(

I got pissed and created my own favicon generator, that creates all these files and the correct HTML header for each one of them: faviconit.com

Hope you enjoy it.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 11 '13 at 11:12

Eduardo Russo

4,121
2
22
38

14

Excellent app. This is one of the best favicon generator sites I've seen. – Chris Livdahl Jan 15 '14 at 08:03
3

@EduardoRusso this is simply awesome - thanks! – davnicwil May 17 '15 at 02:17
4

Good job. Works as expected. – Dilshan Jun 23 '15 at 17:53
1

Works better than expected! Tiny bug(?): when using advanced, the path and version are not included in the browserconfig.xml. Still love it, though. :D – mrjink Sep 04 '15 at 09:01
This is fantastic. Much more than I expected. – Mar 21 '16 at 14:27
Thank you i bookmark it. Also you can check https://fav-icon.com and you can create 16x16 , 24x24 or 48x48 dimensions of favicon. – Bbbb Feb 18 '20 at 21:34

Jared Menard · Answer 2 · 2015-05-01T14:43:36.097

If you already have a logo image that you want to transform into a favicon, then you can convert it using http://www.favicomatic.com/. It creates crisp favicons, and I haven't had to edit them after creating them. It will generate favicons at 16x16 and 32x32 and to quote them: "Every damn size, sir!". The site also supports/preserves transparency present in some pngs. Also, their site looks cool and is easy to use.

For example here is a stackoverflow logo: enter image description here

Here are some of the generated favicons:

enter image description here

They also generate the needed html:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

I looked at the first 20 or so google results, and this was by far the best.

I don't know. Your answer made this a five minute job for me. Thanks. — andyb, Sep 21 '15 at 08:28
some people just like to downvote for no reason. SO needs to have policy against it. Btw, do we really need many different size or we 16x16 and 32x32 are just enough as website generates — Emil, Feb 12 '18 at 09:45
I personally don't know what the best practice is here. On my site I think we just use one. These could be helpful for chrome progressive web apps when combined with a manifest.json. — Jared Menard, Feb 12 '18 at 17:05
I found this resource on http://www.favicomatic.com/, it's called the "Favicon Cheat Sheet" https://github.com/audreyr/favicon-cheat-sheet — Jared Menard, Feb 12 '18 at 17:06

score 20 · Answer 3 · answered Oct 10 '09 at 05:35

20

GIMP is a good program for that. Just save the image as PNG, then add

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

on the <HEAD>section of your page.

answered Oct 10 '09 at 05:35

Stefano Borini

138,652
96
297
431

7

Gimp also offers the option of saving it as favicon.ico, which would save the trouble of adding the link. – Oct 10 '09 at 06:01
4

Pity that the old MSIEs (that are still quite popular) won't accept the PNG in place of a "proper" ICO formatted file. – Már Örlygsson Mar 15 '11 at 23:26
To pin websites to the taskbar, Windows requires an ico too. – Necriis Apr 29 '14 at 15:07

score 9 · Answer 4 · answered Oct 10 '09 at 05:41

9

You create a icon file that's 16x16 or 32x32 or 64x64. Name it favicon.ico and place it in the root of your website public folder.

There are websites that will convert other graphic formats to .ico for you. ie. http://tools.dynamicdrive.com/favicon/

answered Oct 10 '09 at 05:41

Jim

5,557
1
20
18

4

*Also:* you can save your favicon file anywhere if you add a `` to the `` block of your pages. – Már Örlygsson Mar 15 '11 at 23:29
1

tools.dynamicdrive.com/favicon will also allow you to merge multiple size in one favico which is great – hdorio Sep 26 '13 at 10:32

score 5 · Answer 5 · answered May 01 '15 at 02:35

5

One of the best online favicon tools is FaviconGenerator.com. Fast, modern design, no fluff.

answered May 01 '15 at 02:35

Matthew S

843
2
12
26

1

[FaviconGenerator.com](http://www.favicongenerator.com/) also provides access to their API from node/grunt/gulp. – Matt Jul 06 '17 at 00:56

Matthew Lock · Answer 6 · 2015-05-20T22:45:53.977

3

I use the open source Paint.net program along with the Icon plugin.

You can then create and save an image in the .ico format with all the different sizes embedded into the .ico file.

edited May 20 '15 at 22:45

answered Aug 02 '12 at 10:07

Matthew Lock

13,144
12
92
130

Hmm, paint.net.amihotornot.com.au as the host for the Icon plugin? Is that legit? – RonaldB Apr 19 '17 at 19:38
@RonaldB yes it's the home of that plugin. Weird domain isn't it – Matthew Lock Apr 19 '17 at 23:26

score 3 · Answer 7 · edited Aug 06 '13 at 01:48

If you want to create .ico files, you can also use GIMP to create favicons. Modern browsers can use normal image files, but originally I think it was just .ico files. It's an open source image editor similar to Photoshop. Create and edit an image of the right size (say 32 x 32), flatten to one layer (Unless you want multiple icons in the same file), and save as a .ico. It'll format it correctly, then use Stefano's <link rel="SHORTCUT ICON" HREF="/favicon.ico"> to use it in your webpage.

score 3 · Answer 8 · answered Dec 21 '16 at 15:04

When creating a favicon, you want to take the following factors into account:

Supported platforms Ten years ago, you only wanted to support desktop browsers and the solution was to generate the classic favicon.ico picture. Nowadays, you want to support iOS (and iOS Safari) and Android (and Android Chrome). Maybe Windows 10 (and Edge) and the new Mac Book Pro Touch Bar, too (macOS Safari). You cannot just use a single "one size fits all" image anymore.
Design As soon as you support multiple platforms, you are facing multiple design guidelines. For example, Google is using transparent icons for its own native apps on Android, while iOS icons cannot be transparent at all. You cannot just use a "single design fits all" approach.
Generated icons and HTML code For two or three years, the reference has been to generate as many icons as possible in order to cover all cases. I am afraid I created this trend all by myself :-/ The problem is that you end up with 20-something lines or HTML, which is way too much. In order to have a satisfying technical solution, you need to balance the amount of generated icons/HTML and the supported platforms.

As usual, you can create all these assets manually. Unless you have very, very specific needs and a budget, this is definitely not the way to go.

The right way for most people is to use a favicon generator that lets you decide of the look of all the icons and takes care of all the details. The only one which does this is Real Favicon Generator. Full disclosure: I am the author of this site.

score 2 · Answer 9 · edited Aug 06 '13 at 01:47

2

I make my favicons either 16 x 16 or 32 x 32 using Photoshop. I save it as gif then and I use IrfanView to convert the gif to an ico.

edited Aug 06 '13 at 01:47

Ry-

218,210
55
464
476

answered Oct 10 '09 at 06:43

Max

15,693
14
81
131

Tarik · Answer 10 · 2009-10-10T06:05:22.730

1

And if you are using asp.net try this way to apply favicon to your page :

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

but you can find more information here : http://doctype.com/

edited Oct 10 '09 at 06:05

answered Oct 10 '09 at 05:54

Tarik

79,711
83
236
349

1

As a note, doctype.com closed as of February 15, 2013. [Read more about it](http://blog.doctype.com/doctype_is_closing_on_the_14th_1). – Krease Feb 18 '14 at 05:26

Creating a favicon

10 Answers10

Linked

Related