These days there is a ridiculous range of devices that can access your website from phone and desktop browsers to phone apps, operating systems and search engine bots. Most of them will require some kind of icon or image to display for your website. Some of them go even further and even allow you to specify splash screens for when your page is loading or an RSS feed URL for the latest updates from your site.

A brain dump of all my knowledge regarding favicon’s and many other ASP.NET MVC features can be found in the ASP.NET MVC Boilerplate project on GitHub. Its a professional ASP.NET MVC template for building secure, fast, robust and adaptable web applications or sites. It provides the minimum amount of code required on top of the default MVC template provided by Microsoft.

This blog post tries to be as comprehensive as possible in explaining the absolute madness that is the internet favicon and its related ‘bits’ for want of a better word. So without further ado, here is a list of files that you need to add to support all the different devices that can access your site:

The list of all files required to support favicon’s and splash screen images on all devices.

Now you can add all these files to the root directory of your site and have a really messy project or you can add the files to a ‘/content/icons’ folder in your project and add the following link and meta tags to the head section of your HTML pages:

<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.

<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->

<!-- <meta name="apple-mobile-web-app-title" content=""> -->

<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->

<!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->

<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->

Now don’t be too scared, there are only 24 lines that you need, the rest is all comments describing what each line is for, which I’ll go through it in the rest of this post.

Now, go ahead take another look above. That is 30 files and almost as many lines of code if you decide to have your files in a nice separate folder. Take a moment to let the insanity of this situation settle in. All we are really trying to do is set an icon for our site!

Performance and Size Trade-Off

This approach does use more bandwidth. Those 24 lines take up around 2.8KB, if you decide to support everything or around 1.4KB if you skip support for Apple splash screens which takes about half the space due to its extremely verbose meta tags.

However, you should be using GZip compression for transferring your HTML pages over the internet (I’ll be covering GZip compression in a subsequent post) so when compressed we are talking around 650 Bytes if you include everything or around 465 Bytes if you remove support for Apple splash screens.

At the end of the day it’s a trade off and I’ll leave making that decision up to you. You can support all of it, none of it or anything in between. 650 Bytes for every page can add up to a fair amount of bandwidth, especially if you have a large number of requests coming into your site. If you had say a million requests, which is not unheard of if you consider that this overhead is added to every page, then you are looking at around 0.6GB of bandwidth and that’s before you add up extra bandwidth usage from the images and Android/Chrome/Windows XML/JSON configuration files.

The manifest.json and browserconfig.xml file are small files around 1KB but they can also be GZIP compressed and more importantly they can be cached by the browser. A bigger problem is the image files. These files are up to 37KB in size, they cannot be compressed as PNG’s are already compressed but they can be downloaded once and then cached. It’s difficult to calculate how often these files will be downloaded and how much bandwidth this will use.

Then again, how do we measure the value of users who feel more engaged with your site because they get a more customized and integrated experience when using your site. It’s a difficult question and the answer will be different for every site.

The Favicon.ico File

Favicon’s were introduced in 1995 by Microsoft with Internet Explorer 5.0. You could add a favicon.ico file to the root of your site and it would get displayed next to the address bar.

Favicons use the ancient .ico image format which began life as a part of Windows 1.0! A lot of people don’t realize that the .ico file can actually contain several images of varying sizes and colour depths. Typically the image sizes can include 16×16, 32×32, 48×48, 64×64, 128×128 and 256×256. Windows or your web browser can then choose the appropriate size they need for display. Most favicons are uncompressed images and although the images are small the file size is not as small as it could be.

Where Are Favicon’s Used

Desktop Browsers

These days favicons are no longer displayed in the address bar of your browser (IE being an exception). Miscreants were abusing this feature and using padlock favicons to trick unsavvy users into thinking the page was secure and had SSL enabled. Most browsers now only show icons on tabs or when a site is favourited. You can see a table of how desktop browsers use Favicons here.

iOS

iOS devices can pin your site to the home screen and you can provide icons in a variety of sizes to support phone and tablets with differing screen resolutions. All the files shown above start with ‘apple-touch-icon’. Increasingly websites are being built to look and feel like everyday phone apps. Apple lets you specify three additional meta tags which allows you to customize what happens after your site is pinned to the home screen:

iOS web app capable meta tags

XHTML

1

2

3

4

5

6

7

8

<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->

<meta name="apple-mobile-web-app-title"content="Your Site Title">

<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode.

Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->

black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->

<meta name="apple-mobile-web-app-status-bar-style"content="black">

The left screen shows a normal web browsing experience on iOS and the right shows a web app capable experience.

If you decide to make your site web app capable by using the meta tag above, you can also set a splash screen which gets shown when your site is first launched. Once again, there are several sizes depending on the screen resolution and all the images start with ‘apple-touch-startup-image’. Find more information about iOS favicons, startup images and meta tags here.

Microsoft Windows 7 Taskbar

If your site is pinned to the Windows 7 taskbar then you can customize the jump list items with additional links to pages on your site. There are lots of other additional features (See image below) but these require JavaScript and some additional work. Also, I’m not really sure how often people pin websites to the taskbar (I personally have never done it), so I’m not sure if its worth it. Check out the Windows 7 Build My Pinned Site page for examples and more information.

Microsoft Windows Phone 8 and Windows 8

Windows Phone 8 and Windows 8 takes a very interesting approach. Pinning a site to the start screen of one of these devices gives you a very large tile. You can specify an icon for your tile and also an RSS feed URL. The RSS feed is polled and new updates are shown on your tile regularly (I’ve implemented this feature on this site, so pin this site to your Windows 8 home screen and give it a try). You can also specify a background colour which is used when showing the RSS feed items. Pretty cool eh!

Now if Microsoft had taken Apple’s approach it would be cluttering up the head section of your site with a lot of meta data. Microsoft splits off its tile configuration into a seperate browserconfig.xml file (See example below). This is a much cleaner approach and very much welcomed. You can add this file to the root of your site or if you want to move it elsewhere, add a meta tag pointing to it (Note that this file was introduced in Windows 8.1 and Windows 8 still uses meta tags in the head of the page. Windows 8 is on its way out, so I probably would not support it).

Android/Chrome

Android/Chrome recently introduced new favicons and browser settings. interestingly, their solution looks very similar to Microsoft’s approach. Microsoft includes all their settings in a browserconfig.xml file which can be included in the root of your site or using a meta tag to refer to it. Android/Chrome has taken a very similar step and introduced a manifest.json file which you can also optionally point to in your HTML as shown below.

Android Favicons HTML

XHTML

1

2

3

<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.

The manifest.json file contains the name of the site, optional page orientation settings and the location of favicon images. Unfortunately, the name of the site is not an optional field but required according to the specification. The rest of the file is dedicated to specifying the location of the various favicon images of varying pixel densities. You can also optionally control the orientation of the site and how it appears on an Android device. One new feature is the ability to set the browser chrome theme colour. This can be done with the theme-color meta tag and examples of the results can be seen below:

Older versions of Android (M31 to M38) don’t use the manifest.json file but are very similar to iOS and even uses some of the iOS icons if they are provided, as iOS icons tend to be a little higher resolution and more widely supported. Android also has the ability to hide the browser chrome to make your site behave like an app. It’s meta tag has a different name:

Other

Favicons are used in a few other places, such as pinning your site to the taskbar in Windows for instance or even on your television.

How Can I Make This Easier

Even if you decide not to make your site web app capable and support just the basic iOS, Android and Windows icons and settings, your still in for a fair amount of work to create all the right images and get all the meta tags just right.

The ASP.NET MVC Boilerplate project template can help you get started quickly as all of the above files and meta tags are built in from the start, all you need to do is delete the ones you don’t want (A lot quicker than starting from scratch).

What a Mess

So what is the future? Higher screen resolutions and a wider variety of devices of different sizes is now the norm and each one seems to need it’s own images. Each manufacturer has added their own meta tags too.

One approach would be to standardize a set of three or four images sizes and then also provide a colour meta tag. The image can then be shown in the center and the colour shown around the image to fill in any gaps. This means that the image does not have to be resized and this approach would also support splash screens and non-rectangular or odd shaped icons. Indeed, this is the approach Microsoft has already taken with their Windows 8.1 Store App splash screens and it works well in my experience.

An even better and web standards based approach is to use SVG favicon’s. These are vector images which do not lose image fidelity even when scaled. Unfortunately, this feature is only currently supported by the Firefox desktop browser. If all browsers implemented this feature we could go back to the days of Internet Explorer 5.0 when we only needed to create a single favicon.ico file. An SVG favicon can be set by adding the following tag:

SVG Favicon Example

XHTML

1

<link rel="icon"type="image/svg+xml"href="favicon.svg"/>

Lets all hope more browsers support this simple approach but don’t hold your breath.

ASP.NET MVC Boilerplate is a professional ASP.NET MVC template for building secure, fast, robust and adaptable web applications or sites. It provides the minimum amount of code required on top of the default MVC template provided by Microsoft.

The main benefits of using this template are:

Security

Performance

Search Engine Optimization (SEO)

Accessibility

Browser Compatibility

Resilience and Error Handling

Easier Debugging and Performance Testing Tools

Patterns and Practices

Atom Feed

Search

Social Media Support

ASP.NET 4.6 MVC 5 and ASP.NET 5 MVC 6 Support

Two templates are provided. One for ASP.NET 4.6 MVC 5 and another ASP.NET 5 MVC 6 template which is currently under development and is missing some features due to ASP.NET 5 still being in Beta. For more information about what’s new in the MVC 6 template, see here.

MVC 5 Technology Map

MVC 6 Technology Map

Why Do I Need It?

The default MVC template that Visual Studio gives you does not make best use of the tools available. It’s insecure, slow, and really has a very basic feature list (That’s the point of it). ASP.NET MVC Boilerplate provides you with a few more pieces of the puzzle to get you started quicker. It makes liberal use of comments and even gives you a check-list of tasks which you need to perform to make it even better.

The rest of this article is going to briefly go through the improvements made over using the default MVC template. I’ll then finish up with instructions on how you can use it. Also, look out for more posts in the future, where I will go through each feature in detail.

Secure By Default

The default MVC template is not as secure as it could be. There are various settings (Mostly in the web.config file) which are insecure by default. For example, it leaks information about which version of IIS you are using and allows external scripts to access cookies by default!

ASP.NET MVC Boilerplate makes everything secure by default but goes further and uses various HTTP headers which are sent to the browser to restrict things further.

It also makes use of the new Content Security Policy (CSP) HTTP Header using the NWebSec NuGet packages. CSP revolutionizes web security and I highly recommend reading the above link.

Setting up SSL/TLS, so that your site runs over HTTPS is made easy with easy step by step instructions and links.

Fast By Default

The default MVC template does a pretty poor job in the performance department. Probably because they don’t make any assumptions about which web server you are using. Most of the world and dog that are writing ASP.NET MVC sites use IIS and there are settings in the web.config file under the system.webServer section which can make a big difference when it comes to performance.

ASP.NET MVC Boilerplate makes no such assumptions. It turns on GZip compression for static and dynamic files being sent to the browsers making them smaller and quicker to download. It also uses Content Delivery Networks (CDN) by default to make common scripts like jQuery quicker to download (You can turn this off of course but the point is ASP.NET MVC Boilerplate is fast by default).

That’s not all! There are a bunch of other tweaks and examples of practices which can help improve the performance of the site. ASP.NET MVC Boilerplate achieves a score of 96/100 on YSlow (Its not possible to get the full 100 as some of it’s criteria contradict each other and site scripts need to be moved to a CDN).

Search Engine Optimization (SEO)

The default ASP.NET MVC template takes no consideration of Search Engine Optimization at all. ASP.NET MVC Boilerplate adds a dynamically generated robots.txt file to tell search engines which pages they can index. It also adds a dynamically generated sitemap.xml file where you can help search engines even further by giving them links to all your pages.

ASP.NET MVC has some very useful settings for appending trailing slashes to URL’s and making all URL’s lower case. Unfortunately, both of these are turned off by default, which is terrible for SEO. This project turns them on by default.

It also includes an MVC filter which helps to redirect non-canonical URL’s (URL’s without a trailing slash or mixed case characters which are considered different URL’s by search engines) to their canonical equivalent.

Accessibility

4% of the world population is estimated to be visually impaired, while 0.55% are blind. Get more statistics here. ASP.NET MVC Boilerplate ensures that your site is accessible by adding aria attributes to your HTML mark-up and special short-cuts for people using screen readers.

Browser Compatibility

Websites need to reach as many people as possible and look good on a range of different devices. ASP.NET MVC Boilerplate supports browsers as old as IE8 (IE8 still has around 4% market share and is mostly used by corporations too lazy to port their old websites to newer browsers).

ASP.NET MVC Boilerplate also supports devices other than desktop browsers as much as possible. It has default icons and splash screens for Windows 8, Android, Apple Devices and a few other device specific settings included by default.

Resilience and Error Handling

At some point your site is probably going to throw an exception and you will need to handle and log that exception to be able to understand and fix it. ASP.NET MVC Boilerplate includes Elmah, the popular error logging addin. It’s all preconfigured and ready to use.

Not only that but standard error pages such as 500 Internal Server Error, 404 Not Found and many others are built in to the template. ASP.NET MVC Boilerplate even includes IIS configuration to protect you from Denial-of-Service (DoS) attacks.

Easier Debugging and Performance Testing Tools

ASP.NET MVC Boilerplate makes use of Glimpse (As advertised by Scott Hansleman). It’s a great tool to use as you are developing, to find performance problems and bugs. Of course, Glimpse is all preconfigured, so you don’t need to lift a finger to install it.

Patterns and Practices

Doing things right does sometimes take a little extra time. Using the Inversion of Control (IOC) pattern for example should be a default. ASP.NET MVC Boilerplate uses the Autofac IOC container by default. Some people get a bit tribal when talking about IOC containers but to be honest, they all work great. I picked Autofac because it has lots of helpers for ASP.NET MVC and Microsoft even uses it for Azure Mobile Services.

ASP.NET MVC Boilerplate also makes use of the popular LESS files for making life easier with CSS. For an example, it can make overriding colours and fonts in the default Bootstrap CSS a cinch.

ASP.NET MVC is a complicated beast. You can end up with lots of magic strings which can be a nightmare when renaming something. There are many ways of eliminating these magic strings but most trade maintainability for slower performance. ASP.NET MVC Boilerplate makes extensive use of constants which are a trade-off between maintainability and performance, giving you the best of both worlds.

Atom Feed

An Atom 1.0 has been included by default. Atom was chosen over RSS because it is the better and newer specification. PubSubHubbub 0.4 support has also been built in, allowing you to push feed updates to subscribers.

Search

There is a lot more to implementing search in your application than it sounds. ASP.NET MVC Boilerplate includes a search feature by default but leaves it open for you to choose how you want to implement it. It also implements Open Search XML right out of the box. Read Scott Hanselman talk about this feature here.

Social Media Support

Open Graph meta tags and Twitter Card meta tags are included by default. Not only that but ASP.NET MVC Boilerplate includes fully documented HTML helpers that allow you to easily generate Open Graph object or Twitter Card met tags easily and correctly.

How can I get it?

That’s easy, just choose one of the following options:

Get the Visual Studio 2013 extension here and in Visual Studio go to File -> New Project -> Web.

Clone the git repository:

git clone https://github.com/RehanSaeed/ASP.NET-MVC-Boilerplate

Release Notes and To-Do List

You can find release notes for each version here and a To-Do list of new features and enhancements coming soon here.

Bugs and Issues

Future of the project

At some point, I will try to create a Visual Studio Deployment package (VSIX) and list this project template on the Visual Studio extensions site. To use the template, it will be as easy as choosing ASP.NET MVC Boilerplate from the online templates in the File -> New Project -> Online Template menu. Unbelievably, it’s actually pretty complicated to create one of these. I found the Export Template Wizard Visual Studio extension which can do this easily but it’s not been updated since Visual Studio 2010.

I am also taking a look at creating separate Visual Studio templates which include ASP.NET Web API and OAuth authentication. This is of course an open source project, I fully expect contributions and suggestions from the community.

Version 1.1.4 of Elysium Extra has just been released! If you’ve never heard of it, Elysium Extra is a Windows Presentation Foundation (WPF) SDK which provides a wide variety of controls and styles. Here are the relevant links to get started with the project:

At the time of writing the NuGet package has been downloaded 900 times which is pretty exciting given that its been live for only a few months and the project had no theming support in its early life.

The Future of WPF

WPF has not been getting a lot of love recently. You only have to trek the internet to see all the old WPF projects which have died or gone into hibernation with little or no new updates. I’ve also seen a lot of ‘troll like’ comments in Microsoft comment boards asking why no more updates for WPF have been forthcoming.

My personal opinion is that WPF is a very mature product and does not need as many new ‘features’. Even still, there have been minor updates by Microsoft fairly recently as part of .NET 4.5. Let us not forget that Visual Studio is written in WPF and the technology is being maintained. There is a lot of noise being made about upstart XAML technologies like Windows Phone and Windows Store apps (I’ve written a few myself and they’re great too) so sometimes it’s easy to overlook WPF.

What’s New

Theming Support

The latest version of Elysium Extra adds full theming support. There is now a Dark and Light theme (A bit like Windows Store Apps). You can even change the Accent and Contrast colours dynamically on the fly. I’ve taken a screenshot of the sample application in the Dark them with a nice red accent colour:

So how do you change the theme? Well you can do it in XAML by changing your App.xaml file like so:

App.xaml File Theme Settings

XHTML

1

2

3

4

5

6

7

8

9

<extra:ElysiumApplication x:Class="[YOUR NAMESPACE GOES HERE].App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:extra="http://schemas.extra.com/ui"

AccentColor="Red"

ContrastColor="LightBlue"

SemitransparentContrastColor="LightCoral"

Theme="Dark"

StartupUri="MainWindow.xaml"/>

In the above sample code, I’m setting the theme to dark and changing the three theme related colours. This is all totally optional of course. You can even change the theme in code behind instead like so:

Setting Theme Settings in Code

C#

1

2

3

4

5

6

7

8

9

10

publicpartialclassApp

{

publicApp()

{

this.Theme=Theme.Dark;

this.AccentColor=Colors.Red;

this.ContrastColor=Colors.LightBlue;

this.SemitransparentContrastColor=Colors.LightCoral;

}

}

One final feature that I think is very cool is that individual controls can now have a different theme from the rest of the application. You can take a look at the example below where there are two text boxes but one of them has the theme explicitly set to Dark.

Control Specific Theme Example

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<extra:Window x:Class="WpfApplication1.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:extra="http://schemas.extra.com/ui"

Height="100"

Title="Main Window"

Width="200">

<StackPanel>

<TextBox Margin="5"

Text="Hello World"/>

<TextBox extra:ThemeManager.Theme="Dark"

Margin="5"

Text="Hello World"/>

</StackPanel>

</extra:Window>

Performance

In the previous version of Elysium Extra, we were making judicious use of ResourceDictionary merging to allow us to split up our XAML files, so that each control has it’s own separate XAML file. This led to a large amount of duplication of objects in memory because the contents of various ResourceDictionary’s were being instantiated multiple times.

There are a few different approaches to this WPF problem. One that most library writers take (including Microsoft) is to only have a single massive XAML file containing all styles and templates. I hope you like scrolling and never being able to find anything because this is very difficult to maintain. Another approach that the original Elysium project took was to split your xaml files but then use .tt template files to generate a single ResourceDictionary which I thought was an elegant approach.

Elysium Extra has taken a different route. There is a new SharedResourceDictionary type which only instantiates its contents once. You can use this type yourself too in the same way you use ResourceDictionary. It’s very useful if you are merging a dictionaries from more than one location. Here is an example take from Elysium Extra itself where we are merging two resource dictionaries:

Whats Next

So far, there are two contributing developers working on Elysium Extra (Myself and zsKengren who has contributed new controls which are still to be added to the library) and 22 people following the project according to CodePlex. That is not nearly enough and I would like to see more community activity.

Elysium Extra is a totally open source project. You can look at the source code and even use bits of it in your own projects freely. I occasionally get people contacting me telling me that they want to use the project or even how it has really helped them. That’s great feedback and long may it continue!