Меню

Apple touch icon генератор

Favicon Generator. For real.

All browsers

All platforms

Your favorite technologies

Your favicon is not correct

Your master picture

Missing pictures

You have chosen to use a specific picture fot the iOS Web clip, but you haven’t uploaded any picture. Please upload a picture or choose another option.

You have chosen to use a specific picture fot the Windows 8 tile, but you haven’t uploaded any picture. Please upload a picture or choose another option.

Missing path

You have chosen to not place your files in the root of your web site. Please specify a path.

Why put the favicon pictures in the root directory

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:

  • Internet Explorer looks for favicon.ico at the root of the web site. Granted: this is because we ask you to not declare favicon.ico .
  • iOS devices look for files such as apple-touch-icon-144×144.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.
  • By default, Internet Explorer 11 looks for browserconfig.xml at the root of the web site.
  • Several services, such as Yandex, look for favicon.ico in the root directory.

Favicon compression

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.

Check your favicon

Check your existing favicon with our online tool and see what can be improved.

Why RealFaviconGenerator

No hard decision

With so many platforms and icons, it’s hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.

Done in 5 minutes

You spent hours on design, colors, graphics. How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.

Compelling design, a platform at a time

Each platform comes with its own design requirements. You can’t just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.

Instant feedback

How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like.

Источник

Apple touch icon генератор

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.

Why so many files? Most of the time, favicon is considered to be just one file ( favicon.ico ), and sometimes two ( favicon.ico and favicon.png ). The real answer is «a lot of»: favicon.ico Used by IE, and also by some other browsers if we are not careful. favicon-16×16.png The classic favicon, displayed in the tabs. favicon-32×32.png For Safari on Mac OS. android-chrome-36×36.png For Android Chrome M39+ with 0.75 screen density. android-chrome-48×48.png For Android Chrome M39+ with 1.0 screen density. android-chrome-72×72.png For Android Chrome M39+ with 1.5 screen density. android-chrome-96×96.png For Android Chrome M39+ with 2.0 screen density. android-chrome-144×144.png For Android Chrome M39+ with 3.0 screen density. android-chrome-192×192.png For Android Chrome M39+ with 4.0 screen density. android-chrome-256×256.png For Android Chrome M47+ Splash screen with 1.5 screen density. android-chrome-384×384.png For Android Chrome M47+ Splash screen with 3.0 screen density. android-chrome-512×512.png For Android Chrome M47+ Splash screen with 4.0 screen density. mstile-70×70.png For Windows 8 / IE11. mstile-144×144.png For Windows 8 / IE10. mstile-150×150.png For Windows 8 / IE11. mstile-310×310.png For Windows 8 / IE11. mstile-310×150.png For Windows 8 / IE11. apple-touch-icon-57×57.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 57×57 resolution is convenient for non-retina iPhone with iOS6 or prior. Learn more in Apple docs. apple-touch-icon-60×60.png Same as apple-touch-icon-57×57.png , for non-retina iPhone with iOS7. apple-touch-icon-72×72.png Same as apple-touch-icon-57×57.png , for non-retina iPad with iOS6 or prior. apple-touch-icon-76×76.png Same as apple-touch-icon-57×57.png , for non-retina iPad with iOS7. apple-touch-icon-114×114.png Same as apple-touch-icon-57×57.png , for retina iPhone with iOS6 or prior. apple-touch-icon-120×120.png Same as apple-touch-icon-57×57.png , for retina iPhone with iOS7. apple-touch-icon-144×144.png Same as apple-touch-icon-57×57.png , for retina iPad with iOS6 or prior. apple-touch-icon-152×152.png Same as apple-touch-icon-57×57.png , for retina iPad with iOS7. apple-touch-icon-180×180.png Same as apple-touch-icon-57×57.png , for iPhone 6 Plus with iOS8. apple-touch-icon.png Same as apple-touch-icon-57×57.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 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). Why do you recommend to put all files at the root of the web site?

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:

  • Internet Explorer looks for favicon.ico at the root of the web site. Granted: this is because we ask you to not declare favicon.ico .
  • iOS devices look for files such as apple-touch-icon-144×144.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.
  • By default, Internet Explorer 11 looks for browserconfig.xml at the root of the web site.
  • Several services, such as Yandex, look for favicon.ico in the root directory.

What is the extra 194×194 icon in the generated package?

Sometimes, RealFaviconGenerator creates a 194×194 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 192×192 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.

Desktop, classic browsers

Looking for some sample favicon code, you’ve probably encountered:

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.

Really? But W3C says this is a bad thing!

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.

Why is 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:

  • 16×16 picture
  • 32×32 picture
  • 48×48 picture

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.

Does favicon.ico contain all the necessary sizes?

The generated favicon.ico contains the icon in 16×16, 32×32 and 48×48. You may wonder what happens in extreme cases, like a 300% zoom in Windows 8.1 in HiDPI. It appears that 32×32 is enough.

Arnaud Lefort created a favicon.ico file which contains «all sizes», from 16×16 to 256×256 and checked the effects on his Windows 8.1 tablet. The results:

  • Classic style
    • 100% zoom
      • Favicon: 16×16
      • Toolbar: 24×24
      • Snap: 32×32
    • 125% zoom
      • Favicon: 24×24
      • Toolbar: 32×32
      • Snap: 32×32
    • 150% zoom
      • Favicon: 24×24
      • Toolbar: 32×32
      • Snap: 32×32
    • 200% zoom
      • Favicon: 24×24
      • Toolbar: 32×32
      • Snap: 32×32
    • 300% zoom
      • Favicon: 16×16
      • Toolbar: 24×24
      • Snap: 32×32
  • Modern / Metro syle
    • 100% zoom: 32×32
    • 150% zoom: 32×32

He also tried high resolution on MacOS with Chrome, Opera 15+, Opera 12.16, Safari, OmniWeb and iCab: none of them used a resolution higher than 32×32.

iOS Safari

apple-touch-icon.png is sometimes designed as a 57×57 picture (non-retina iPhone on iOS6). It is actually safer to design as a 180×180 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).

Why do you generate a precomposed favicon for iOS?

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.

Why 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.

Why do my server logs show a lot of 404 errors related to /apple-touch-icon-precomposed.png , /apple-touch-icon-120×120-precomposed.png , /apple-touch-icon-152×152-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:

  • 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.

Does the iOS touch icon declarations order matter?

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

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.

Why is the 192×192 PNG icon not declared in the HTML code?

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
(a link markup without its href attribute) is ignored by Safari.

When using the W3C Validator, I get the error «Attribute 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.
). 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:

  • Windows 8.0 / Internet Explorer 10: A single 144×144 picture. Easy.
  • Windows 8.1 / Internet Explorer 11: There are 4 pictures, named msapplication-square70x70logo , msapplication-square150x150logo , msapplication-square310x310logo and msapplication-wide310x150logo . They should be 70×70, 150×150, 310×310 and 310×150 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 128×128, 270×270, 558×558 and 558×270.

What is 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:

  • 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.xml saves a few bytes in the HTML pages. Only IE11 will load these extra data.

Since all tiles are declared in browserconfig.xml , why not mstile-144×144.png ?

mstile-144×144.png was defined for Windows 8.0, whereas browserconfig.xml was introduced by Windows 8.1. mstile-144×144.png is somehow deprecated.

You suggest Windows 8 tile colors. Where do they come from?

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 used to generate 5 tile icons for Windows. Now there is only one. Why?

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:

  • A small, square icon.
  • A medium, square icon. This icon is always generated by RFG.
  • A big, square icon.
  • A rectangular, wide icon.

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 228×228 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 144×144 tile picture and color. This is surprising but the result is pretty good.

I have just installed my new favicon, and RealFaviconGenerator’s checker report errors. Why?

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:

  • You have chosen to not put the favicon files in the root your web site. Although this works 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 260×260, 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.

If you don’t fall in one of these cases, please let us know.

How good is the compression?

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.

Are there known troubleshootings?

Unfortunately, yes. Some browsers tend to load all declared PNG favicons, not only the most suitable ones:

  • Firefox (desktop only): this is bug 751712.
  • Chrome: this is bug 324820, related to bug 112941.

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.

Why is the service in beta?

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.

Why are certain PNG pictures missing?

Some PNG pictures are not generated by RealFaviconGenerator.net:

  • 48×48: Supported, but apparently not used by any browser or platform.
  • 64×64: Supported, but apparently not used by any browser or platform.
  • 128×128: Chrome Web Store. Unless you turn your web application into a genuine Chrome application, this icon is not used.
  • 160×160: RealFaviconGenerator used to generate a 160×160 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.

Unneeded favicons can cause extra traffic, so better avoid them.

Where is Opera 15+ Speed Dial icon?

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.

RFG used to generate a 96×96 PNG icon named favicon-96×96.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.

Источник

Adblock
detector