Manage FavIcons in EPiServer

I needed to be able to manage favicons from within EPiServer. There are a lot of icons, a configuration json, xml for devices. You could of course create the all online, add them to your website, etc …. But to do that every time ….. 

Inspired by the great work of Rehan Saeed I created some functionality for it.

The code is not very spectacular, so if you are interested in the plumbing you can find it on GitHub as always.

So how does it work….

Add the following attribute to the content type you use for settings

[ContainsSettings]

You can add the following properties with attributes to that type

[WebsiteIcon]
[UIHint(UIHint.Image)]
public virtual ContentReference Favicon { get; set; }

[MobileAppIcon]
[UIHint(UIHint.Image)]
public virtual ContentReference AppIcon { get; set; } >> use if your site is webapp capable

[ThemeColor]
public virtual string ThemeColor { get; set; } >> defaults to "#1E1E1E"

[TileColor]
public virtual string TileColor { get; set; } >> defaults to "#1E1E1E"

[ApplicationName]
public virtual string ApplicationName { get; set; } >> defaults to the name in the site definition

[ApplicationShortName]
public virtual string ApplicationShortName { get; set; } >> defaults to the name in the site definition

When publishing the content item that contains your settings, the favicons will be generated and stored either in the site or global assets, depending on what you defined in the settings of the website in admin mode.  I have used ImageResizer for the resizing as it is very flexible and fast.

The browserconfig.xml and Mainifest.json files are created virtually through an mvc controller and cached. (Note: I used attribute routing, so make sure you use a version of MVC that supports it, and enable it RouteTable.Routes.MapMvcAttributeRoutes();).

The values are stored in a settings object that has a cache dependency on the content item you use for your settings.

Add the following to your header in your _Root.cshtml file to render the markup:

@{ Html.RenderPartial("Favicons");}

You can get the package from NuGet.

Happy Holidays.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s