{"id":131,"date":"2011-01-07T15:39:29","date_gmt":"2011-01-07T04:39:29","guid":{"rendered":"http:\/\/blog.quppa.net\/2011\/01\/07\/small-icon-size-dpi-in-windows\/"},"modified":"2011-01-07T15:39:29","modified_gmt":"2011-01-07T04:39:29","slug":"small-icon-size-dpi-in-windows","status":"publish","type":"post","link":"https:\/\/www.quppa.net\/blog\/2011\/01\/07\/small-icon-size-dpi-in-windows\/","title":{"rendered":"Small Icon Size & DPI in Windows"},"content":{"rendered":"

The GetSystemMetrics function<\/a> in Windows retrieves system metrics and configuration settings. One such metric is the recommended size (width and height) of \u2018small icons\u2019:<\/p>\n

\n

Small icons typically appear in window captions and in small icon view.<\/p>\n<\/blockquote>\n

Another place where small icons show up is the notification area.<\/p>\n

MSDN contains a guide to Creating DPI-Aware Applications<\/a>. It notes the challenge posed by raster graphics<\/a> and different DPIs. Unlike vector graphics<\/a>, which can scale without a loss in quality, distinct raster images must be created for different resolutions in order to avoid unpleasant scaling artefacts. (In fact, this is perhaps overstating the benefits of vector graphics: the level of detail suitable for a high-resolution image is not necessarily suitable for a low-resolution image, so using the same vector for all sizes doesn\u2019t always make sense.) Windows icons, as of Windows 7, contain only raster graphics.<\/p>\n

<\/h1>\n

Small Icon Sizes<\/h1>\n

The small icon size varies according to the system DPI and OS version:<\/p>\n\n\n\n\n\n\n\n
DPI Setting<\/td>\nWindows 7, XP<\/td>\nWindows Vista<\/td>\n<\/tr>\n
96 (Default, 100%)<\/td>\n16×16<\/td>\n16×16<\/td>\n<\/tr>\n
120 (125%)<\/td>\n20×20<\/td>\n22×22<\/td>\n<\/tr>\n
144 (150%)<\/td>\n24×24<\/td>\n26×26<\/td>\n<\/tr>\n
192 (200%)<\/td>\n32×32<\/td>\n36×36<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The sizes for Windows Vista (apart from the size at 96 DPI) don\u2019t make much sense \u2013 they don\u2019t match up with the DPI scaling ratio. It is possible that this was a mistake, hence the change in Windows 7.<\/p>\n

So, if you want to make sure your small icon (e.g. notify icon) looks beautiful under the widest possible range of systems, you should ideally include the images with the sizes 16×16<\/strong>, 20×20<\/strong>, 22×22<\/strong>, 24×24<\/strong>, 26×26<\/strong>, 32×32<\/strong> and 36×36<\/strong>. If that sounds like a lot of work (it shouldn\u2019t be with a high quality tool like Axialis IconWorkshop<\/a>), Microsoft\u2019s own recommendation<\/a> is to include 16×16<\/strong> and 32×32<\/strong> pixel icons. Keep in mind, though, that scaling either of those sizes to 20×20 or 22×22 pixels can result in a rather awful-looking icon. While it is still rare to see anything but the default setting of 96 DPI, this will not be the case forever<\/a>.<\/p>\n

WinForms Icon Sizes<\/h1>\n

When using the System.Drawing.Icon class<\/a>, it is a good idea to use one of the constructors that takes the icon size as a parameter.<\/p>\n

Windows Forms conveniently exposes a property called SmallIconSize<\/a> in the SystemInformation class<\/a>. This property gives us a System.Drawing.Size<\/a> corresponding to values listed above, which we can put straight into our icon constructor:<\/p>\n

System.Drawing.Icon icon = new System.Drawing.Icon(iconstream, System.Windows.Forms.SystemInformation.SmallIconSize);<\/pre>\n
The equivalent properties in WPF are SystemParameters.SmallIconWidth<\/a> and SystemParameters.SmallIconHeight<\/a>.<\/p>\n
Both WPF and WinForms wrap around the Win32 GetSystemMetrics function<\/a> taking the arguments SM_CXSMICON (small icon width) and SM_CYSMICON (small icon height).<\/p>\n","protected":false},"excerpt":{"rendered":"
The GetSystemMetrics function in Windows retrieves system metrics and configuration settings. One such metric is the recommended size (width and height) of \u2018small icons\u2019: Small icons typically appear in window captions and in small icon view. Another place where small icons show up is the notification area. MSDN contains a guide to Creating DPI-Aware Applications. … Continue reading “Small Icon Size & DPI in Windows”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[48,87,88,132,133,134,170,179,185],"class_list":["post-131","post","type-post","status-publish","format-standard","hentry","category-programming","tag-dpi","tag-notification-area","tag-notifyicon","tag-sm_cxsmicon","tag-sm_cysmicon","tag-smalliconsize","tag-win32","tag-winforms","tag-wpf"],"_links":{"self":[{"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/posts\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":0,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/posts\/131\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/media?parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/categories?post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quppa.net\/blog\/wp-json\/wp\/v2\/tags?post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}