THE SQL Server Blog Spot on the Web

Welcome to SQLblog.com - The SQL Server blog spot on the web Sign in | |
in Search

The Bit Bucket (Greg Low): IDisposable

Ramblings of Greg Low (SQL Server MVP, MCM and Microsoft RD) - SQL Down Under

Adding Good Favicons to your MVC Based Website

When you visit websites, you may or may not have noticed the small icons that appear in the title bar areas. These are called Favicons. Here’s an example of one in Chrome:

SNAGHTML451ec3

In Internet Explorer, they appear in several places:

image     image

They are only a small visible aspect of your website but they greatly improve how professional the site looks in a browser. In IE, they also appear when you open a new page:

image

So, how do you create these, and how do you add them to your site?

I had tried creating them using a variety of icon editors including the excellent IcoFX. However, I could never create really good looking Favicons as I must be a little art-challenged. I’m sure it’s a left-brain/right-brain thing. I’d try to draw them but I’d end up giving up and using something boring like this:

image

It’s quite hard to create a small version of your company’s logo, etc.

On one of the local mailing lists, our buddy Andrew Coates from Microsoft, pointed out one of their sites that I’d never seen before. It’s awesome for creating favicons by scaling existing images. Here’s how I created the one in the images above:

First Step – Transparent PNG

The first step was to make sure I had a transparent png file that contained the logo that I wanted to use. Even though you could use a white background, it looks much better if it’s transparent. (Skip this if you already have one). To create that, I used Paint.Net (yet another awesome free tool). I loaded the existing logo that had a white background like so:

image

In many of these tools, it’s not so obvious how to make the background transparent. In Paint.Net, all I needed to do was to select the paint bucket as a tool, then use the “More” option in the color palette, and move the Transparency-Alpha setting fully to the left:

image

Notice that the primary color now looks transparent. Then I just used the paint bucket tool to change the white to transparent.

image

Then I saved the file.

Step 2 – Create the Favicon

The site that Andrew recommended was http://ie.microsoft.com/testdrive/Browser/IconEditor/Default.html. Navigate to that site. We then want the icon editor:

image

Next choose to Import:

image

Use the Upload button to bring in the transparent png that was created earlier, and then move and resize the guide window until you get as much of the logo that you want displayed:

image

When it looks good, make sure that all four icon sizes are selected via the checkboxes and then click OK. You’ll then see your logo in the main window, and you can choose to export it:

image

Save the file that is downloaded as favicon.ico.

Step 3 – Add the Favicon to your MVC Project

Copy the icon file into the root  folder in your MVC project, and make sure you have included the file in the project. James Green pointed out to me that many older browsers still go looking for the specific filename favicon.ico and in the root folder of the website, so it sounds like good advice to always place them there.

Finally, add a reference to the icon file in your _Layout.cshtml file in the head section:

image

And you’re done. Enjoy!

Published Friday, February 28, 2014 6:14 PM by Greg Low

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

 

James Green (AU) said:

Nice post Greg.  I would suggest favicons have never been more important than now when 50+ Chrome tabs is the new Bookmarks...

All I wanted to add is that some browsers will try a GET to ~/favicon.ico anyway, so I advise that naming & placing it at the site root for that reason.

Also, favicons are often cached by browsers past what the HTTP Headers ask for (I suspect so they are persisted for use in Bookmarks etc) so keep that in mind when versioning / troubleshooting them.  Adding a trivial query string parameter such as ?v=2 to the path is a quick way around that.

February 28, 2014 6:43 AM
 

Allen McGuire said:

Or, just drop it in the root, called favicon.ico?

February 28, 2014 8:38 AM
 

Greg Low said:

Thanks James and Allen, I've modified it to suit. That sounds like a great recommendation.

February 28, 2014 5:50 PM

Leave a Comment

(required) 
(required) 
Submit

This Blog

Syndication

Tags

No tags have been created or used yet.
Powered by Community Server (Commercial Edition), by Telligent Systems
  Privacy Statement