FAQ
favicon.ico- Used by IE, and also by some other browsers if we are not careful.
favicon-16x16.png- The classic favicon, displayed in the tabs.
favicon-32x32.png- For Safari on Mac OS.
android-chrome-36x36.png- For Android Chrome M39+ with 0.75 screen density.
android-chrome-48x48.png- For Android Chrome M39+ with 1.0 screen density.
android-chrome-72x72.png- For Android Chrome M39+ with 1.5 screen density.
android-chrome-96x96.png- For Android Chrome M39+ with 2.0 screen density.
android-chrome-144x144.png- For Android Chrome M39+ with 3.0 screen density.
android-chrome-192x192.png- For Android Chrome M39+ with 4.0 screen density.
android-chrome-256x256.png- For Android Chrome M47+ Splash screen with 1.5 screen density.
android-chrome-384x384.png- For Android Chrome M47+ Splash screen with 3.0 screen density.
android-chrome-512x512.png- For Android Chrome M47+ Splash screen with 4.0 screen density.
mstile-70x70.png- For Windows 8 / IE11.
mstile-144x144.png- For Windows 8 / IE10.
mstile-150x150.png- For Windows 8 / IE11.
mstile-310x310.png- For Windows 8 / IE11.
mstile-310x150.png- For Windows 8 / IE11.
apple-touch-icon-57x57.png- iPhone and iPad users can turn web pages into icons on their home screen. Such link appears as a regular iOS native application. When this happens, the device looks for a specific picture. The 57x57 resolution is convenient for non-retina iPhone with iOS6 or prior. Learn more in Apple docs.
apple-touch-icon-60x60.png- Same as
apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. apple-touch-icon-72x72.png- Same as
apple-touch-icon-57x57.png, for non-retina iPad with iOS6 or prior. apple-touch-icon-76x76.png- Same as
apple-touch-icon-57x57.png, for non-retina iPad with iOS7. apple-touch-icon-114x114.png- Same as
apple-touch-icon-57x57.png, for retina iPhone with iOS6 or prior. apple-touch-icon-120x120.png- Same as
apple-touch-icon-57x57.png, for retina iPhone with iOS7. apple-touch-icon-144x144.png- Same as
apple-touch-icon-57x57.png, for retina iPad with iOS6 or prior. apple-touch-icon-152x152.png- Same as
apple-touch-icon-57x57.png, for retina iPad with iOS7. apple-touch-icon-180x180.png- Same as
apple-touch-icon-57x57.png, for iPhone 6 Plus with iOS8. apple-touch-icon.png- Same as
apple-touch-icon-57x57.png, for &aquot;default&aquot; requests, as some devices may look for this specific file. This picture may save some 404 errors in your HTTP logs. See Apple docs apple-touch-icon-precomposed.png- Same as
apple-touch-icon.png, expect that is already have rounded corners (but neither drop shadow nor gloss effect). - Internet Explorer looks for
favicon.icoat the root of the web site. Granted: this is because we ask you to not declarefavicon.ico. - iOS devices look for files such as
apple-touch-icon-144x144.pngat the root of the web site,as described by Apple. This issue can be mitigated by declaring the icons in the HTML code (this is necessary for Android anyway), but following Apple conventions is probably the best move. - By default, Internet Explorer 11 looks for
browserconfig.xmlat the root of the web site. - Several services, such as Yandex, look for
favicon.icoin the root directory. - 16x16 picture
- 32x32 picture
- 48x48 picture
- Classic style
- 100% zoom
- Favicon: 16x16
- Toolbar: 24x24
- Snap: 32x32
- 125% zoom
- Favicon: 24x24
- Toolbar: 32x32
- Snap: 32x32
- 150% zoom
- Favicon: 24x24
- Toolbar: 32x32
- Snap: 32x32
- 200% zoom
- Favicon: 24x24
- Toolbar: 32x32
- Snap: 32x32
- 300% zoom
- Favicon: 16x16
- Toolbar: 24x24
- Snap: 32x32
- 100% zoom
- Modern / Metro syle
- 100% zoom: 32x32
- 150% zoom: 32x32
- Ignore the 404 errors. This issue is harmless as long as the iOS device eventually finds an icon, which is the case with the package generated by RealFaviconGenerator (the high resolution Touch icon is declared in the HTML). This is what RealFaviconGenerator offers by default.
- Generate all icons. When creating your icons with RealFaviconGenerator, in the Favicon for iOS section, Assets tab, check all checkboxes so all icons are generated. Also, choose to place your icons in the root directory of your site. This solution has the unfortunate side effect of poluting your root directory with a lot of files. This is why it is usually not prefered. However, if you are using a tool such as Gulp or Grunt, you can manage to copy these files at compile/deployment time, in order to fix the 404 issue while keeping your project tidy.
- Windows 8.0 / Internet Explorer 10: A single 144x144 picture. Easy.
- Windows 8.1 / Internet Explorer 11: There are 4 pictures, named
msapplication-square70x70logo,msapplication-square150x150logo,msapplication-square310x310logoandmsapplication-wide310x150logo. They should be 70x70, 150x150, 310x310 and 310x150 right? Almost. In fact Microsoft recommends to use larger pictures.This is to present high resolution pictures to the user even when the desktop is scaled up. Therefore the recommended sizes are 128x128, 270x270, 558x558 and 558x270. - Whatever you put in the HTML pages, IE11 will look for
browserconfig.xml. This generates 404 errors in your logs if the file is not present. - Putting the settings in
browserconfig.xmlsaves a few bytes in the HTML pages. Only IE11 will load these extra data. - A small, square icon.
- A medium, square icon. This icon is always generated by RFG.
- A big, square icon.
- A rectangular, wide icon.
- You have chosen to not put the favicon files in the root your web site. Although thisworks well,this is not what we recommend. And the checker doesn't forgive so easily. Bad checker!
- You have submitted a medium-sized master picture. If the picture is smaller than 260x260, the favicon pictures with highest resolutions are not generated. In this case, the result is okay (your site still has decent resolutions pictures to offer) but not perfect.
- Firefox (desktop only): this is bug 751712.
- Chrome: this is bug 324820, related tobug 112941.
- 48x48: Supported, but apparently not used by any browser or platform.
- 64x64: Supported, but apparently not used by any browser or platform.
- 128x128: Chrome Web Store. Unless you turn your web application into a genuine Chrome application, this icon is not used.
- 160x160: RealFaviconGenerator used to generate a 160x160 PNG icon for Opera 12 Speed Dial. However,as some browsers tend to load multiple icons, this icon is sometimes loaded for nothing. Plus (old) Opera 12 is able to deal with other icon sizes.
General
There are a lot of favicon generators around. They all generate a single favicon.ico file and leave you there.
In order to support most browsers and platforms, you need more than a dozen pictures. That's right. And the HTML code is not straightforward. In fact, most code snipets you can find on the Web are wrong.
You are a web designer or a developer. You have spent countless hours on your brand new web project. Now you need a favicon. It must support majors browers and, in fact, as many browsers as possible. But you don't have time to waste on such mundane task. RealFaviconGenerator help you do just that: submit your high definition picture and get your numerous favicons and HTML code that works.
The Windows Metro UI is a thing from Windows 8. This version of Windows is no longer supported by Microsoft since January 10, 2023. The same goes for browserconfig.xml, which was related with Internet Explorer.
Forget this icon and XML file. These are things from the past.
The mask icon is an icon defined by Apple, to be displayed in the MacBook Touch Bar. However, Apple discontinued the Touch Bar in 2021. Starting from this date, new MacBook models do not have a Touch Bar anymore.
There is no use supporting the Touch Bar anymore. Apple cancelled it for a reason.
favicon.ico), and sometimes two (favicon.ico and favicon.png). The real answer is &aquot;a lot of&aquot;:When generating a favicon with RealFaviconGenerator, the instructions ask you to place all files at the root of your web site. You may want to place them in a sub-directory, for example in http://mywebsite.com/icons/, just to make things clearer. However, there are three drawbacks with this approach:
Sometimes, RealFaviconGenerator creates a 194x194 PNG icon.
Some browsers, such as Android Firefox, tend to load the largest PNG icon they find. This behavior is arguable and it has at least a drawback: it can conflict with the 192x192 icon dedicated to Android Chrome. Suppose you designed the Android Chrome icon with a drop shadow. You don't expect to see this picture in other browsers. The workaround to this issue is to generate an &aquot;even larger icon&aquot;.
Note: when the Android Chrome icon is the original master picture, this extra icon is not needed, thus not generated.
Desktop, classic browsers
favicon.ico not declared in the HTML code?Looking for some sample favicon code, you've probably encountered:
<link rel=&aquot;shortcut icon&aquot; type=&aquot;image/x-icon&aquot; href=&aquot;favicon.ico&aquot;>When your favicon is in the root directory, RealFaviconGenerator does not generate this code. This is because it somehow confuses some other browsers like Chrome. And since IE looks for a file named favicon.ico anyway, the best solution is to not even talk about it. This is described by Jonathan T. Neal andMathias Bynens.
Yes, W3C discourages the usage of a predefined URI. If you follow this recommandation, you will get into troubles with browsers which wrongly choose favicon.icoinstead of the nice PNG versions gently prepared just for them. It is way better and pragmatic to trick them with this little hack.
favicon.ico about 10KB?Usually, favicon.ico is about 1KB or 2KB. RealFaviconGenerator creates a 10KB file. This is because this file is supposed to containseveral versions of the favicon:
Note that favicon.ico is only used by IE (as long as you use the code returned by RealFaviconGenerator). So the other browsers and platforms, such as Chrome on Windows or Safari on iOS, are not affected by this overweight icon.
favicon.ico contain all the necessary sizes?The generated favicon.ico contains the icon in 16x16, 32x32 and 48x48. You may wonder what happens in extreme cases, like a 300% zoom in Windows 8.1 in HiDPI. It appears that 32x32 is enough.
Arnaud Lefort created a favicon.ico file which contains &aquot;all sizes&aquot;, from 16x16 to 256x256 and checked the effects on his Windows 8.1 tablet. The results:
iOS Safari
apple-touch-icon.png a 180x180 picture?apple-touch-icon.png is sometimes designed as a 57x57 picture (non-retina iPhone on iOS6). It is actually safer to design as a 180x180 picture (iPhone 6 Plus with iOS8) and let the platform resize it as needed. This is how Apple is doing it for his own web site (credits: Mathias Bynens).
The precomposed icons (eg. apple-touch-icon-precomposed.png as opposed to apple-touch-icon.png) are deprecated since the release of iOS7and older versions can perfectly cope with their absence. They just take the non-precomposed icon and apply the necessary effect(s).
However, some old and/or exotic platforms may look for it without notice. Therefore, it is safer to have it on board.
apple-touch-icon-precomposed.png has rounded corners?The precomposed icon is usually used to bypass iOS preprocessing. In other words: to apply non-rounded corners. But RealFaviconGenerator still rounds the corners of apple-touch-icon-precomposed.png, which is somehow misleading.
In the package generated by RealFaviconGenerator, apple-touch-icon-precomposed.pngis not dedicated to iOS but to exotic platforms. How does such platform behave when it finds this icon? It probably uses it as is, as an iPhone would do. Yet, RealFaviconGenerator is for busy people who want a quick-an-easy favicon, without tricky options or existancial questions. Therefore, when you design your brand new icon, RealFaviconGenerator always presents you an icon with rounded corners in the iOS/Android preview. Rounded corners are what RealFaviconGenerator promises and it tries to achieve this at all cost. Thus, an atypical, rounded corners precomposed picture.
/apple-touch-icon-precomposed.png,/apple-touch-icon-120x120-precomposed.png,/apple-touch-icon-152x152-precomposed.png and similar URLs?This is normal. On iOS, Safari looks for these icons by convention, and it does so even if a Touch icon is explicitely declared in the HTML page.
There are two ways to deal with this issue:
In theory, no. All iOS touch icon declarations come with a size, so the device can choose the icon that fits it best. In practice, iPhone and iPad prior iOS 4.2 just consider the last icon declaration. And pre-2.3 Android does... the opposite. Such device takes the first declared icon.
RealFaviconGenerator declares the lowest resolution first and highest resolution icon last. As a consequence, pre-4.2 devices get the best resolution and resize it. This values icon quality over bandwith. On the contrary, old Android devices get the lowest resolution icon.
There is no right answer here. In the future, RealFaviconGenerator may change this order to favor another approach.
Android Chrome
site.webmanifest?This is the Web application manifest, defined by the W3C andsupported by Google. At the time of writing, it is only used by Android Chrometo declare the &aquot;Add to home screen&aquot; icon and other settings.
site.webmanifest used to have density descriptors, but they disappeared. Why?The density descriptos were initially documented by Google, thus introducted in RFG. However,these descriptors were wrongly used and actually not necessary. This is why they are not created starting fromv0.13.
Android Chrome uses a manifest file. However, before version M39, it used to pick a 192x192 PNG icon declared in the HTML.
This declaration is useless in modern Android Chrome instances. Even on Android 4.1.1 Jelly Bean, the most recent version of Chrome is available,making the manifest compatible with 95% of the Android devices around. Plus Chrome is not available on Android 2.x (Froyo and Gingerbread) anyway. This is why RealFaviconGenerator does not generate it by default since package 0.13.
macOS Safari
No. Even the doubtful <link rel=&aquot;mask-icon&aquot; color=&aquot;red&aquot;> (a link markup without its href attribute) is ignored by Safari.
color not allowed on element link at this point&aquot;. What to do about this?Apple specifications for the Mask Icon are not compliant with W3C. It's that simple. This issue is completely harmless. Browers simply ignore this declaration. By the way it is only supported by macOS Safari.
If W3C validation is a concern, the only workaround is to remove the whole Mask Icon declaration (ie. <link ...>). Simply removing the color attribute does not work. If the attribute is not present, macOS Safari ignores the Mask Icon entirely, making it completely useless.
Windows 8 and 10 with Internet Explorer and Edge
There are two cases to distinguish:
Internet Explorer 11 uses browserconfig.xmlto find the tile pictures and color. It is possible to indicate these information in the HTML code, but having this file has two benefits:
browserconfig.xml, why not mstile-144x144.png?mstile-144x144.png was defined for Windows 8.0, whereas browserconfig.xml was introduced by Windows 8.1.mstile-144x144.png is somehow deprecated.
These are some of the colors listed by Colorlib. I was able to check that these colors match Windows 8 well. However, the only official reference from Microsoft is apparently forWindows Phone (see slide 55) and do not match Windows 8.
RFG still generate 5 icons. However, there are optional. You can get them all when creating your favicon by checking the right checkboxes.
msapplication-TileImage is for Windows 8.0 and IE 10 only, which account for only 3% of the desktop market (compared to 25% for Windows 8.1 and Windows 10 combined). So this icon is not really useful and somehow deprecated.
Windows 8.1 and 10 with IE 11 and Edge support 4 icons:
When they add your site to their homescreen, your visitors are presented all the available icons, letting them pick the one that fit their device best. Although this is a nice feature, the Metro interface is probably not widespread enough to justify the systematic creation of 4 icons. A single one is a good default.
Misc
Coast by Opera needs a 228x228 picture. However, due to Firefox and Chrome issues, it can be harmful to have too large pictures, especially if they are dedicated to non-mainstream browsers such as Coast.
An issue already exists and RealFaviconGenerator will eventually create this picture. For now, when Coast encounters the code generated by RealFaviconGenerator, it take the Windows 8 144x144 tile picture and color. This is surprising but the result is pretty good.
Here is the story. You have generated your favicon, installed it and now you are running thefavicon checker against it, just for the joy of a &aquot;green report&aquot;. But the checker reports some warnings.
There are two legitimate reasons for this:
If you don't fall in one of these cases, please let us know.
RealFaviconGenerator can compress the generated pictures. You usually get a 50%-80% compression rate. Not bad!The compression works well on all tested platforms. Even better!
Fill an issue on Github. Thank you for reporting!
Unfortunately, yes. Some browsers tend to load all declared PNG favicons, not only the most suitable ones:
This result in extra bandwidth consumption. Although the effect is limited (we are talking about a few KB), this is an issue that ought to be fixed in future versions of RealFaviconGenerator.net.
Favicon sounds like simple stuff, but it is not. A picture can work great on a platform but not on another. There are a lot of misleading or outdated information around. For these reasons, RealFaviconGenerator cannot be considered as final. It first need to be completed and refined, hopefully with the help of community feedback.
Some PNG pictures are not generated by RealFaviconGenerator.net:
Unneeded favicons can cause extra traffic, so better avoid them.
For the moment, there is apparently no way for a web site to indicate to Opera 15+ which icon to use for the Speed Dial.
favicon-96x96.png. Why did it disappear?This icon was for Google TV, which is seldom used. Moreover, this icon was sometimes wrongly loaded and used by Firefox. Starting from v0.13, it is not created anymore.