Adding a favicon to a site

I forgot to make a favicon when I created the theme for this site, so let’s fix this. A favicon is the small icon that appears beside the title in the tab, and that is shown when the user bookmarks your site. According to the W3C, the favicon should be a .PNG, .GIF or. ICO image that’s 32×32 pixels or 16×16 pixels. So I created a .PNG image that is 32×32 pixels so it will look nice scaled down, and is a nice starting size if some browsers display it bigger. I also added the following tag to the head of each page :

<link rel="icon" type="image/png" href="" />

Unfortunately, Internet Explorer only supports .ICO for favicons, even Internet Explorer 10, so I had to also add the following in the head:

<link rel="shortcut icon" type="image/x-icon" href="" />

Depending on the browser and the order of the declarations, the .PNG or the .ICO will be used, but since it’s the same image it’s good enough for me and respects the standard. Everything now works in Internet Explorer, Chrome and Firefox on the desktop, but it will not work with mobile devices. When a the web site is added to the home screen in iOS or Android, the favicon will not be shown. iOS looks for a link tag in the head of the page with the rel=apple-touch-icon, which adds the 3D effect in iOS 6 or earlier (iOS 7 icons stays flat), or rel=apple-touch-icon-precomposed that displays the image without embellishments. Android phones will also recognise apple-touch-icon and apple-touch-icon-precomposed for the home screen images, so this is enough for both platforms. If you want to support older phones, Android 2.1 will only recognize apple-touch-icon-precomposed. I wanted to keep the same flat look as my theme, so I used the –precomposed attribute and the same icon as earlier :

<link rel="apple-touch-icon-precomposed" href="" />

Using the same icon will make it stretched on every device, since the default size is 60×60. You can add icons specific for each platform with apple-touch-icon if you need a bit more control :

<link rel="apple-touch-icon-precomposed" href="" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="" />

.LESS Web.config/DotlessConfiguration options

Many options of the .LESS CSS parser can be set directly from the Web.config file, but many of them are not clearly described. Here is my attempt to document them :


Sets the name of the file reader class to use (must implement the dotless.Core.Input.IFileReader interface). Default value is dotless.Core.Input.FileReader.


Indicates if the CSS produced by the .LESS parser should be minified afterwards. You may wish to minify the files for performance reasons, but if you already use the System.Web.Optimization framework for minification you can leave it off.  Default value is false.


Sets the debug mode that prints comments in the console output. Default value is false.


Indicates if the CSS generated from the LESS file should be cached for 7 days by the web browser by setting the HTTP headers, otherwise the CSS file will always be reloaded by the browser. Default value is true.


Indicates if .LESS is running in a web application or from the command line. Depending on the rest of the configuration and the custom logger or file reader you may have used, you web application may work correctly even if the web mode is off. Default value is false.


When .LESS is running as a web application, indicates if the paths should be mapped to the location of the website. Otherwise, the paths are relative to to the current directory to allow files outside the web directory structure. Default value is true.


Dotless does not need the session but it may be enabled with this option to use the session in plugins. The possible values are Enabled, QueryParam (see next section) and Disabled, and the default value is Disabled.


When the sessionMode is QueryParam, a parameter must be added to the query string so the session can be used. The name of the parameter can be specified using this option, and the default value is sstate.


Sets the name of the logger to use to log parsing errors (must implement the dotless.Core.Loggers.ILogger interface). It does not work with the Web.config as of .LESS version 1.3.1, but it can be set manually from the DotlessConfiguration object. Default value is null, but two loggers are available : the dotless.Core.Loggers.ConsoleLogger that logs to the Visual Studio console output and the dotless.Core.Loggers.DiagnosticsLogger that logs to the trace listeners used by the current application.


Sets the level at which the parser errors are logged. The possible values are Info, Debug, Warn and Error, and the default value is Error. Please note that no logger is set by default.


.LESS optimizes the parsing of the .LESS file by separating it into chunks and parsing each chunk instead of the whole file at once. If the value is 0, the operation is not optimized, and if the value is larger than 0 the optimization is used. Default value is 1.


Contains the list of .LESS plugins used by the application. Plugins are used to add new functions to .LESS and are created as classes implementing the IFunctionPlugin interface.By default, no plugins are added. To add a plugin :

  <plugin name="PluginClassName" assembly="PluginAssemblyName" />


Indicates if the urls in the imported files should be adjusted depending on the location of the LESS file importing it. Default value is false.


Indicates that when the file imported by the @import directive is a CSS file,  the content of the files should be put in directly in output without trying to parse it as a LESS file instead of keeping the import directive. Default value is false.


Indicates if all imported files should be processed as LESS files even if they end with the .css extension, otherwise only the .less files are processed as LESS. Default value is false.


Indicates if .LESS should handle the compression of the response according to the Accept-Encoding header of the request, otherwise it is not compressed and may be compressed by setting IIS options (the same response should not be compressed twice,). The options gzip, deflate and identity are supported for the Accept-Encoding header. The default value is true and the default encoding used is gzip if no compatible compression method is found in the header.


Indicates if the parameters for the query string should be ignored by .LESS, or if the parameters should be defined as a variable inside the LESS file requested by the ParameterDecorator. For example, if parameters are enabled, style.less?param=value will be added as @param: value; in the LESS file (the value should be URL encoded). Default value is false.


Indicates that variables being redefined should be disabled, so less will search from the bottom to the top of the file. This is used to make .LESS behave like Less.js when handling variables. Default value is false.


Indicates that the first comment starting by /** in the LESS file should be kept even after minification. Default value is false.


If you need to use options that do not work from the Web.config, the Less.Parse method can take a DotlessConfiguration object as a parameter. In my case, I already use System.Web.Optimization for minification and bundling of the CSS files, so I created my own bundle transformation class that implements the IBundleTransform interface and calls the parser.