Why do my program’s notifications sometimes show a small icon, and sometimes a large icon?

A customer wanted to know why their program's notifications sometimes show a small icon, like this:

✉︎ You've got mail.
✉︎ 🔊︎ 🔋︎ …

And sometimes it shows a large icon, like this:

🎂️ It's Bob's birthday today.
✉︎ 🔊︎ 🔋︎ …

And why does it sometimes show the program name?

If the program does not specify an icon for its notification, then the system will use the icon from the notification area to identify the source of the notification. That's what you see in the first example.

On the other hand, if the program specifies a custom icon for its notification, then we show that custom icon, but we show it a bit larger, so that it looks different from any icon that already exists in the notification area. And since there is nothing to tie the notification visually to the icon in the notification area that generated it, we label the notification with the program so the user knows where it came from.

Comments (25)
  1. IInspectable says:

    Can’t decide, which I find more impressive: The attention to detail in this UI, or the source code of this blog entry.

    1. Antonio Rodríguez says:

      Well, this time, Raymond has relied in external pictures instead of showing us his remarkable ability to draw using standard HTML.
      But I bet drawing that birthday cake in HTML would have been too difficult even for Raymond.

      1. Uli Gerhardt says:

        Seems more like the usual HTML wizardry plus a few special Unicode characters.

      2. Uli Gerhardt says:

        For me (with Firefox) it looks like the usual HTML wizardry plus some Unicode characters.

      3. I didn’t ask for those pictures. It appears that WordPress automatically replaces Unicode emoji characters with images. This screws up some of my diagrams, though, like this one.

        1. Kelden says:

          For me it’s pure HTML. No emoji characters are replaced with images.

          1. Kelden says:

            Looks like umatrix or ublock origin blocks the scripts which replaces the characters with images.

        2. parkrrrr says:

          If you are allowed to edit your theme, there appears to be a simple “fix” for the emoji-replacement code, but of course that fix assumes that every browser viewing your blog entry has appropriate Unicode support. One of the functions of the WP code is apparently supposed to be automatic detection of support for various “new” features of Unicode, and fallback for browsers that don’t have it.

        3. It shows emoji on Firefox and images on Edge. WordPress must not trust Edge yet, even though it works fine, or MSDN’s copy needs an update.

          1. parkrrrr says:

            The code checks for the browser’s ability to render five things: flags, diversity, simple, unicode8, and unicode9. These tests are performed by rendering specific test characters to a canvas and then checking whether the resulting renderings met certain criteria. (For example, “diversity” renders a Santa Claus, then a Santa Claus with a type 6 skin-tone modifier, and checks to see whether the resulting image is different.)

            If all of those things are supported by the browser, the rest of the code is short-circuited. That’s as far as I read in the (ugly, obfuscated) code before giving up, so it’s possible that the actual algorithm is more nuanced than the first-pass “only use Unicode if the browser supports anything I can throw at it” test.

          2. It’s showing images for me and I’m on Firefox, so….

          3. Medinoc says:

            On Firefox 50.1 (Windows 7), I see external pictures when Javascript is enabled, fancy color emojis when Javascript is disabled.
            On IE11, I see external pictures when Javascript is enabled, simple monochrome emojis when Javascript is disabled.

          4. Medinoc says:

            Oh, and Chrome 55 acts like IE11.

          5. Klimax says:

            RSS feed in IE 11 shows two emojis and two PNG images. In IE11 proper only SVG images.

          6. Entegy says:

            Edge doesn’t fully support emoji in a sense. The page must be marked with a UTF-8 character set for Edge to display full colour emoji.

            Go to Emojipedia, then find a page on Reddit with emoji to see the difference in Edge.

            Yes, I’ve filed a bug for this!

          7. Medinoc says:

            It doesn’t just depend on browser version, but Windows version as well: On Windows 10, the same Firefox 55.1 displays fancy color emojis regardless of whether Javascript is enabled… Different fancy color emojis from the ones it displays in Windows 7.
            Edge on Windows 10 still shows pictures when Javascript is enabled, and disabling Javascript on Edge is too much of a pain in the ass for further testing.
            IE11 behaves the same in Windows 7 and 10, except that the “Active Scripting” set of radio buttons has mysteriously disappeared from the security options.

          8. parkrrrr says:

            Again, all of these differences are because the WP emoji substitution code is checking for support of features, not for browser or OS version, just like Raymond is always telling us to do. Win10 vs Win7 differences are almost certainly font differences, which lead to differences in support of those features.

      4. Jedak says:

        Umm…what external images. The envelope, speaker, battery and birthday cake are just font characters. Specifically, U+2709, U+1F50A, U+1F50B, and U+1F382 respectively, if you view the source.

      5. Kipters says:

        Look again, it’s an emoji!

        1. Ivan K says:

          You made me look. It is indeed an emoji (on Chrome 55), but it is rendered on my screen as an image. I can select and copy the ‘image’ like text and paste it into notepad. But I can also right-click, copy image, and paste into mspaint (150x150px).

  2. ixe013 says:

    And where does the “Name” come from, like “Contoso” in this example? Is it made up of the executable name (I doubt it) or some VERSIONINFO resource field?

    1. Lawrence says:

      I believe that’s the value populated by the szTip field in NotifyIconData, when you’re creating the notification icon.

    2. Kipters says:

      If you’re using the new Toast APIs from WinRT, it’s the DisplayName from the AppX Manifest

  3. Yukkuri says:

    He didn’t ask for those pictures; they asked for him.

  4. I think I figured out how to disable the emojification. We’ll see how well it sticks.

Comments are closed.

Skip to main content