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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |