Ctrl.blog

Tile colors

The first thing to realize is that you’ve virtually no control over how your tile will look in Edge. There’s no documentation on how tiles work. 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.

Edge attempts to find the primary color of the favicon, assuming there’s one dominant color. This color is then shifted plus or minus 0-7° hue and 0-7 % brightness in the Hue/Saturation/Brightness (HSB) color space. This color will be used as the primary color for the tile.

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. The only way to get good results with site tiles in Edge is to test that your favicon yields an acceptable result.

The default fallback color for favicons where no primary color can be identified is either H0, S1 %, B95 % (#f2f0f0) or H0, S2 %, B90 % (#e5e1e1). Sites without favicons get the generic window-favicon on a pure white background, which looks better than the tiles assigned to many sites with detailed favicons.

If you’re thinking to yourself, “Wait — didn’t Internet Explorer 11 introduce something called msapplication-TileImage and TileColor?” Yes, you’re right. These are still used when pinning a website to the Start menu/screen in Windows 8 and 10. However, these aren’t used anywhere inside the browser even though Edge now prominently features tiles inside the browser.

Testing in Edge

Read the instructions carefully. You’ll need to make some tweaks in the system registry but you’ll be fine if you follow each step exactly.

1. Close all but one tab in Edge and open Settings
2. Clear all browsing data (you may leave only passwords, use a secondary system user-account for testing to avoid losing data)
3. Type in your test URL and press Enter
4. Close all Edge Windows
5. Wait 30 seconds for Edge to quit. It will run for a few seconds in the background even without any open windows.
6. Press Windows+R, type “regedit”, and press Enter
7. Inside the Registry Editor, locate the folder “HKEY_CLASSES_ROOT\Local Settings\Software\Microsoft\Windows\CurrentVersion\AppContainer\Storage\microsoft.microsoftedge_8wekyb3d8bbwe\MicrosoftEdge\TabbedBrowsing” (The ‘8wekyb3d8bbwe’ ID is different on different versions of Edge, so use the gibberish name you see on your system instead.)
8. Right-click on this folder and Delete it. Be very careful to only delete this folder.
9. Expand the folder “TypedUrl” located in the same parent folder as the previous folder, and locate your test URL in the list. Note the number in the column in front of it labeled “url#”.
10. Expand “TypedUrlCount” and find the column with the matching label as your test URL.
11. Double-click on it and change the value to “9”. Don’t insert just any arbitrarily large number here! Click OK.
12. Close the Registry Editor window
13. Reopen Edge. Open any webpage and make sure no empty New Tab pages are open in the background.
14. Leave the computer idle for three minutes for Edge to populate the New Tab page in the background.
15. Open a new tab and you should see your page in the list.
16. Repeat every step in this list if you make changes and want to test the result!

If your Top Sites are still populated by suggestions from Microsoft, you must remove these first by hovering over the tiles and clicking the remove buttons.

Pro-tip: Create up to eight test documents and load them all up, in the same way, to test multiple variations a little less painfully.

Edge on devices

Microsoft Edge for Xbox One doesn’t use any icon assets on any primary user-interface surfaces. Instead, it relies on screenshots generated one full second after the load event has fired. For the best screenshots, avoid placing large advertising banners at the top of the page.

Use a vertical skyscraper instead for consoles and TVs as horizontal space is limited and scrolling is often cumbersome. Notably, msapplication tiles were supported on the Xbox One home screen before the November update with Windows 10. Be aware that it may come back in a future update.

Edge on Windows 10 Mobile does have a Top Sites list, but Edge only uses icons in the favorites list. Not in the tab viewer nor to represent Top Sites. Windows Mobile does support msapplication tiles when pinning websites to the Home screen.