Support Center

About Koken

This Help Center provides support for Koken, a free content management system designed for photographers, artists and designers.

Add a favicon to your site

Add a favicon to your site

Last Updated: Sep 19, 2014 02:32PM EDT

A favicon is a "favorites" icon. They're the small icons you see in your web browser's tabs, bookmarks, location bar, and other places. This tutorial will explain how to add a favicon to your Koken site.

Download and install the HTML Injector plugin

Before we talk about creating icons you'll need to install the free HTML Injector plugin. This plugin allows you to insert code before the </head> and/or </body> tags in any theme. It will be necessary in order to incorporate favicons into your site. Download and install the plugin per the instructions provided. When finished, come on back.

Creating a favicon

As your parents say, things used to be so much simpler. Every browser loaded a single 16 x 16 image file and everyone was happy. Today there are devices with high resolution screens as well as Apple app icons to contend with. You will need the classic 16 x 16 icon plus a bunch more to look your absolute best.

Fortunately, there's a great browser-based tool called Iconifier that makes it easy. Simply create a large graphic using an image editor like Photoshop or GIMP, export it as a transparent PNG, then upload the graphic to Iconifier. The app will create a downloadable zip containing all the icon files you need plus the requisite HTML code. Download and unpack the zip file and copy the HTML code to your clipboard.

Upload favicons

Next step is to upload the icon files you unzipped to your site. To do this, use your FTP client to connect to the server where Koken is installed. Upload each of the files to the root of your domain. For example, "".

Add icon code to HTML Injector

Copy the HTML code provided by Iconifier if it isn't already on your clipboard. Next, click on Settings at the top of Koken then Plugins in the left column. Click the Enable next to the "HTML Injector" plugin, then click the Setup button that appears.

You will then be in the settings screen for the HTML Injector plugin. Click inside the Head textarea and paste the contents of your clipboard. When finished click the Save button at the bottom.

View your site

Your site should now be linking to your favicon files! View your site and try bookmarking it in your browser to see if your favicon appears. If all went well you should see your icon being used.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found