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.
favicon.ico
), and sometimes two (favicon.ico
and favicon.png
).
The real answer is "a lot of":
favicon.ico
favicon-16x16.png
favicon-32x32.png
android-chrome-36x36.png
android-chrome-48x48.png
android-chrome-72x72.png
android-chrome-96x96.png
android-chrome-144x144.png
android-chrome-192x192.png
android-chrome-256x256.png
android-chrome-384x384.png
android-chrome-512x512.png
mstile-70x70.png
mstile-144x144.png
mstile-150x150.png
mstile-310x310.png
mstile-310x150.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-57x57.png
, for non-retina iPhone with iOS7.apple-touch-icon-72x72.png
apple-touch-icon-57x57.png
, for non-retina iPad with iOS6 or prior.apple-touch-icon-76x76.png
apple-touch-icon-57x57.png
, for non-retina iPad with iOS7.apple-touch-icon-114x114.png
apple-touch-icon-57x57.png
, for retina iPhone with iOS6 or prior.apple-touch-icon-120x120.png
apple-touch-icon-57x57.png
, for retina iPhone with iOS7.apple-touch-icon-144x144.png
apple-touch-icon-57x57.png
, for retina iPad with iOS6 or prior.apple-touch-icon-152x152.png
apple-touch-icon-57x57.png
, for retina iPad with iOS7.apple-touch-icon-180x180.png
apple-touch-icon-57x57.png
,
for iPhone 6 Plus with iOS8.apple-touch-icon.png
apple-touch-icon-57x57.png
, for "default" requests, as some devices may look for this specific file.
This picture may save some 404 errors in your HTTP logs.
See Apple docsapple-touch-icon-precomposed.png
apple-touch-icon.png
, expect that is already have rounded corners (but neither drop shadow nor gloss effect).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:
favicon.ico
at the root of the web site. Granted: this is because we
ask you to not declare favicon.ico
.apple-touch-icon-144x144.png
at 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.browserconfig.xml
at the root of the web site.favicon.ico
in the root directory.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 "even larger icon".
Note: when the Android Chrome icon is the original master picture, this extra icon is not needed, thus not generated.
favicon.ico
not declared in the HTML code?Looking for some sample favicon code, you've probably encountered:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
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 and
Mathias 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.ico
instead 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 contain
several 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 "all sizes", from 16x16 to 256x256
and checked the effects on his Windows 8.1 tablet. The results:
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 iOS7
and 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.png
is 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.
site.webmanifest
?This is the Web application manifest, defined by the W3C and supported by Google. At the time of writing, it is only used by Android Chrome to declare the "Add to home screen" 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 from
v0.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.
No. Even the doubtful <link rel="mask-icon" color="red">
(a link
markup without its href
attribute) is ignored by Safari.
color
not allowed on element link
at this point". 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.
There are two cases to distinguish:
msapplication-square70x70logo
,
msapplication-square150x150logo
, msapplication-square310x310logo
and
msapplication-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.
browserconfig.xml
?Internet Explorer 11 uses browserconfig.xml
to 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
.
This generates 404 errors in your logs if the file is not present.browserconfig.xml
saves a few bytes in the HTML pages. Only IE11 will load these extra data.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 for Windows 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.
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 the favicon checker against it, just for the joy of a "green report". 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!
The compression is lossy, meaning you might notice differences between the original and compressed pictures. Yet the differences are (supposed to be) minimal:
Uncompressed picture (36KB) | Compressed picture (14KB) |
---|---|
You can see slight differences in the gradient part:
No zoom | 4x zoom |
---|---|
When you download the compressed pictures, make sure they match your standards.
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.