Favicon Standard - 2024 - svg, ico, png and dimensions? [duplicate]

Asked 23/2, 2018 at 21:27 Answered 30/6, 2021 at 6:40

197

What favicon dimensions, file formats and meta/link tags should be used as of 2022? This includes apple icon, windows, android and other devices people use today.

I use Opera and I can see it supports svg format. Is it the best solution to use svg nowadays? Is there any option "one file fits all"?

I've been browsing many websites and checked different "favicon generators". All of them are years old and work mostly with png files.

For example: What code should be used for ico and svg?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

or should dimensions be specified if ico contains more sizes? I didn't find one good answer.

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Please provide dimensions, file formats and meta/link tags of what favicons should be used.

Adelladella answered 23/2, 2018 at 21:27 Comment(7)

realfavicongenerator.net is updated regularly (realfavicongenerator.net/change_log) – Janey 24/2, 2018 at 2:57

favicon.pro – Suspensor 29/9, 2018 at 19:42

Personally I would only use one large PNG image: in 2019 all modern browsers support PNG and can resize that. We should absolutely stop this crazy proliferation of favicons and boycott browsers that don't comply with the standard. In the future also a single SVG image would be ok, but at the moment it is not widely supported. – Borstal 20/10, 2019 at 10:48

Does this answer your question? What is the best practice for creating a favicon on a web site? – Neoprene 3/8, 2021 at 14:11

@Neoprene no it doesn't answer my question. – Adelladella 3/8, 2021 at 14:52

Actually it does. – Underglaze 17/8, 2021 at 15:4

@JakubMuda, it's the same question. The fact that it was asked several years ago and that the accepted answer is several years old is irrelevant: new answers can be added on that question (and some have been). Please note that we have an official code of conduct here. In my opinion, "don't be stupid" is not consistent with that code of conduct. Be nice. – Burdine 17/8, 2021 at 20:18

305

Disclaimer: I'm the author of RealFaviconGenerator, which I expect to be up-to-date (mostly, see below). So don't be surprised if this answer matches what RFG generates.

The one-size-fits-all myth

There is no "one size fits all" icon. You can't create a single SVG icon and expect it to work everywhere.

From a technical point of view, a single SVG icon would be a good thing. But from a UI and UX point of view, this is not a desirable outcome. Compare iOS and Android. On iOS, all home screen icons are squares with rounded corners (iOS fills transparent regions of Touch icons with black). On Android, home screen icons often use non-square shapes and transparency (including Google app icons). Submit a single touch icon and Android Chrome will use it. But you won't be able to match Android icon guidelines, whereas a dedicated icon could.

So I advice to deliberately avoid using a single icon. Rather target each platform individually, when possible (this is not always the case).

Icons, platform per platform

iOS Safari

iOS Safari expects a touch icon. As of today, this is a 180x180 PNG image. This image should not use transparency and its corners will be automatically rounded when added to home screen. Declared with:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

Over the years, this icon has become the "default high resolution icon" for many browsers. So you will find it elsewhere, when adding to bookmark, etc.

Android Chrome

Android Chrome relies on the Web App Manifest. Although this manifest is not dedicated to Android Chrome, it is currently its main supporter. So at the moment, it is still quite safe to consider the icons from the Web App Manifest to be for Android Chrome.

As the name suggests, the Web App Manifest is for, well, web apps. But any web site can use it as a way to reference some icons.

Android expects a 192x192 PNG icon, transparency allowed and encouraged.

The manifest is declared with:

<link rel="manifest" href="/icons/site.webmanifest">

Edge and IE 12

Microsoft introduced the browserconfig, an XML document which lists various icons that fit the Metro UI.

The file and background color are declared with:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Classic desktop browsers

Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE... This is were things are a little more blurry. Historically, there was a single favicon.ico file, still supported. However, most recent browsers rather pick PNG icons, which are lighter. Plus some browsers are not able to select the proper icon in the ICO file (this format can embed several versions of an icon), leading a low resolution icon being wrongly used.

One could be tempted to drop the old favicon.ico entirely. Although I would like to make this leap in RFG, I didn't run the necessary tests to evaluate the impact on the old browsers.

Thus the combo I still recommend today, with favicon.ico embedding 16x16, 32x32 and 48x48 icons:

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

Other browsers

Other browsers may have dedicated icons. For example Coast by Opera is looking for a 228x228 icon. The need to focus on these browsers is not obvious. They usually use the touch icon or other icons when they cannot find "their" icon.

Conclusion

As announced at the beginning, this is exactly what RealFaviconGenerator creates.

Fibrosis answered 25/2, 2018 at 0:28 Comment(23)

You say this answer mirrors what RFG does, but the site's "Insert the following code in the <head> section of your pages:" section of its installation instructions, does not include <link rel="shortcut icon" href="/icons/favicon.ico"> (as listed above in this answer). Is that a recent change, or is something missing? – Ohl 28/5, 2018 at 23:7

@Ohl No recent change. This is because of a twist: if you place your icons in the root directory (eg. /favicon.ico), IE will find it by convention. Thus, no declaration in this particular case. Generate a favicon again with /path/to/icons as the path and this time the declaration will be present. – Fibrosis 29/5, 2018 at 6:20

@Fibrosis Ah, right, that makes sense! Thanks for clarifying. – Ohl 29/5, 2018 at 11:57

msapplication-config, msapplication-TileColor, browserconfig are obsolete. Everything is moving towards manifest.json and PWAs. – Cordon 17/6, 2018 at 0:57

@RobertBaker That's right. It's still under dev so for now browserconfig is still the way to go. – Fibrosis 17/6, 2018 at 16:28

Any estimate when Real Favigon Generator will be updated? – Adelladella 27/6, 2018 at 5:36

You mean the possible removal of favicon.ico? I need a day to get and install Win XP and Vista so I can test various packages... This summer? – Fibrosis 27/6, 2018 at 6:10

@Fibrosis If you're including a browserconfig.xml, can you just specify the tile color in there and omit the tile color meta tag (or both meta tags, if you're serving the browserconfig.xml from the root)? – Phenetole 7/3, 2019 at 17:3

Should the icons extend all the way to the border, or should there be a margin? For example, when someone saves a bookmark to a phone, depending on the phone it might save it as a circle. Should I compensate for this or is it done automatically? – Abrahamsen 9/7, 2019 at 3:28

@GCM As far as I know, the behavior you describe (ie. crop icon to a circle) is an Android thing, correct? For this particular platform, yes, you should make sure your icon is still good looking when cropped. RealFaviconGenerator should offer such a view to let you easily check if your icon is circle-ready. – Fibrosis 9/7, 2019 at 7:28

people like you don't get the love they deserve. I'm here to give you a wet, sloppy, grandmother with too much lipstick kiss on your forehead. Used your generator, a charm me good man, a charm. S.O. police be damned, i'm saying thanks! – Aphelion 5/10, 2019 at 16:49

Everyone should donate to this person if they can, this is an amazingly useful tool that reduces what would normally take two days to learn and implement, into about 15 minutes of work from start to final upload. – Genotype 28/2, 2020 at 5:39

@Genotype Couldn't agree more! :-D :-D :-D – Fibrosis 28/2, 2020 at 12:13

If you are still using out of service contract XP and Vista, you don't deserve nice icons anymore. – Heterocercal 6/4, 2022 at 22:22

@Fibrosis : What is the differeance between the Classic Favicon Generator (realfavicongenerator.net) and the SVG Favicon Generator (realfavicongenerator.net/svg-favicon) and which one should be used? – Mump 20/9, 2022 at 10:14

@Mump Good question! Both exist because I didn't take the time (yet) to refactor RealFaviconGenerator. In the end, there should be a single generator, and it should look like the SVG favicon generator. Unfortunately, for now, you're supposed to use both :( , although the SVG favicon still remains quite advanced. – Fibrosis 8/10, 2022 at 17:46

@Fibrosis I came here just for the exact same question as the one you answer in the last comment :-) So can we just add the SVG favicon before the classic set and all's good? – Duro 27/3, 2023 at 14:59

If there are changes maybe you can update the answer? – Adelladella 30/3, 2023 at 12:4

Coast by Opera was discontinued and removed from the Apple App Store in August 2017 en.wikipedia.org/wiki/Opera_Coast – Gerardogeratology 3/4, 2023 at 18:29

what would be the size of /icons/favicon.ico? – Proceeding 3/5, 2023 at 10:27

@JoãoPimentelFerreira Microsoft recommends 16x16, 32x32 and 48x48. – Fibrosis 22/5, 2023 at 17:17

This answer badly needs an update since your own site now has an SVG generator that generates a package containing only an SVG and a PNG. Is this the new recommended way? – Marilynnmarimba 3/10, 2023 at 22:20

Yes please @Fibrosis we do need an update on this post! 2024 best practices. – Commoner 15/2 at 11:17

I had the exact same question a few weeks back. It is surprisingly hard to find reliable up-to-date information about favicons on the internet. In fact MDN and W3C both link to Wikipedia for more info about favicons. The Wikipedia article, however, is quite short and not very helpful. It took me several hours to research what the optimal icons for modern browsers are.

This is what I learnt:

There is no "one file to rule them all" solution. However, for modern browsers, it is actually not that much you need.

The standard favicon size in browsers is still 16x16 points corresponding to 32x32 pixels on high resolution screens.
There is no need to still include a favicon.ico file in your root directory unless you want to support IE 10 or older.
SVG would be nice, but is not supported by all browsers. So the easiest solution is still to just use PNG images.
Google explicitly says they don't support 16x16 or 32x32 icons. For Google results, you need to include at least one icon that is a multiple of 48x48.
For when users pin your website on their phone's launch screen you need a 192x192 icon for Android, 167x167 for iPad and 180x180 for iPhone (while the link tags for iPhone are special — see below)
In theory, you could provide a single 192x192 (or higher multiple of 48) icon which would be scaled down by browsers and all other services, but especially for the 16x16 point version, these scaling results will probably be worse than what you get when you scale it yourself with a professional image editor or even provide special versions for these low resolution icons.
You can also add a web manifest file that includes more meta info like theme colors. But that is only supported on Android and brings little benefit unless you really expect a large share of your users to pin your website on their home screen (in my humble opinion that is very unlikely for most websites).

My recommendation would be to use the following in your header:

<!-- For all browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

<!-- For Google and Android -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">

<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">

I have also written a blog post with a bit more prose and more background information.

Ingraham answered 30/6, 2021 at 6:40 Comment(0)

It is also worth mentioning that together with favicon some other tags should be added like OG tags, Twitter cards or MS-application. It all serves the same purpose - visual identification of your brand and should also be included.

Twitter card can be found HERE

I add following tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

I found that many users make images 1300px by 650px and jpg/png formats.

After adding all tags they should be validated HERE

Facebook OG has more option but general are as follows:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook recommend specific ratio of the image and the file size is limited to 8Mb. To keep similar images with twitter card I recommend dimensions 1240px by 650px and jpg/png format. Facebook and twitter do not accept svg...

I found that some global brands use this tag on their websites. One had dimensions 150x150 pixels and png format. This image may be used by browsers to display in search results.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator covers also Microsoft favicons. There are many other meta tags for MS-application to optimize bow the page and other infos such as image are displayed. This topic is also worth reading.

I hope this is usefull for someone and expands the topic of branding your website.

Adelladella answered 24/3, 2018 at 1:31 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++