The default fallback color for favicons where no primary color can be identified is either H0, S1%, B95% (#f2f0f0) or H0, S2%, B90% ( #e5e1e1).
The only way to get good results with site tiles in Edge is to test that your favicon yields an acceptable result. The same process is applied to the border around and the background behind the favicon, except that here the saturation is also shifted -50 to -57% creating a much bright chroma compared to the surrounding color giving the favicon a grayish background with a hint on the brand color on which the favicon can pop. This color will be used as the primary color for the tile.
Windows 10 update microsoft edge icon plus#
This color is then shifted plus or minus 0-7° hue and 0-7% brightness in the Hue/Saturation/Brightness ( HSB) color space. The tile may get a different color profile within some parameters every time it’s generated so be sure to test your favicon multiple times.Įdge attempts to find the primary color of the favicon, assuming there’s one dominant color. There’s no documentation on how tiles work.
The first thing to realize is that you’ve virtually no control over how your tile will look in Edge. This will also create good results with Firefox and Chrome on the desktop and mobile. Edge only support one icon file resource associated with any given address, so the traditional multi-sized favicon.ico is the only option available. You can not use Scalable Vector Graphic ( SVG) nor multiple pointing to different files. That includes placing it below any rel=icon-mask and rel=apple-touch-icon elements. So, you need to include your multi-sized favicon as the first and last element to support all browsers!
Some other web browsers - I’m looking at you Firefox on Linux and Android - may choose the last icon instead of the first element. ico above all other elements to support Edge and many legacy browsers.Įdge will always use the first link element it detects that contains ‘icon’. When including the favicon in your HTML, be sure to include your multi-size. Edge scales down the 64×64 px icon instead. Note that 48×48 pixel icons are never used in Edge, even on high-resolution displays. Note that smaller icons can be scaled up if no larger icons are provided but this will look pretty awful. Additionally, you need to include 32×32 pixels and 64×64 px which are the sizes that will be used on Top Sites tiles. The icon needs to be provided in 16×16 pixels for the tab bar, 24×24 px for the bookmarks bar and the tab bar on high-resolution displays. Never assume your favicon will have a white background! It will be displayed in more places in modern browser UIs than just against a white address field. The file resource should have a transparent background or a solid color. Update ( ): This article only covers the old EdgeHTML version of Microsoft Edge, and not the new Chromium-based version.įor the best result with Edge and Internet Explorer, you’ll need a multi-sized favicon packaged in the. Part two covers the unusually complicated method required to test your icon in Edge. This article is divided in two parts: Part one covers the technical requirements of the icon file resource and how tiles are assigned colors in Edge. But would your website look any good if it got included on a user’s Top Sites list? This is prime real estate in the browser than all websites dream of conquering. Edge displays the user’s Top Sites by default on the new tab page.
0 kommentar(er)
