April 17, 2015

How to add a favicon.ico to Ghost(Pro)

First of all you will need your desired icon in the .ico format. Next you have to embed it into your theme. This is well described in Ghost‘s User guide tutorial “How do I add a Favicon to my blog?“.

The “.ico”-format was originally developed by Microsoft. You can read more about it on wikipedia: “ICO (file format“.

You definitely need a simple favicon.ico for your homepage, but these days there are many gadgets out and you will need more icons for different purposes. For instance everyone can put a link to your homepage on an iPhone/iPad screen. But for those devices with their modern retina displays, the standard favicon.ico format will look very blurred.

I recommend to visit the Favicon & App Icon Generator. This little online tool will convert an image file to all kind and sizes of App Icons and include the favicon.ico.

Please download the zip file and unzip the content into the asset root folder of your theme.

In the next step you have to modify the code proposal from to fulfill the needs of Ghost(Pro) / Ghost.org. It’s only about including the “{{asset}} statement. The file should look like the following (please note that I move the images into a subfolder “img” under the assets folder in my theme. If you are moving the files into the root folder of “assets” you have to delete “/img”. ):

<link rel="apple-touch-icon" sizes="57x57" href={{asset "/img/apple-icon-57x57.png" }}>
<link rel="apple-touch-icon" sizes="60x60" href={{asset "/img/apple-icon-60x60.png" }}>
<link rel="apple-touch-icon" sizes="72x72" href={{asset "/img/apple-icon-72x72.png" }}>
<link rel="apple-touch-icon" sizes="76x76" href={{asset "/img/apple-icon-76x76.png" }}>
<link rel="apple-touch-icon" sizes="114x114" href={{asset "/img/apple-icon-114x114.png" }}>
<link rel="apple-touch-icon" sizes="120x120" href={{asset "/img/apple-icon-120x120.png" }}>
<link rel="apple-touch-icon" sizes="144x144" href={{asset "/img/apple-icon-144x144.png" }}>
<link rel="apple-touch-icon" sizes="152x152" href={{asset "/img/apple-icon-152x152.png" }}>
<link rel="apple-touch-icon" sizes="180x180" href={{asset "/img/apple-icon-180x180.png" }}>
<link rel="icon" type="image/png" sizes="192x192"  href={{asset "/img/android-icon-192x192.png" }}>
<link rel="icon" type="image/png" sizes="32x32" href={{asset "/img/favicon-32x32.png" }}>
<link rel="icon" type="image/png" sizes="96x96" href={{asset "/img/favicon-96x96.png" }}>
<link rel="icon" type="image/png" sizes="16x16" href={{asset "/img/favicon-16x16.png" }}>
<link rel="manifest" href={{asset "/img/manifest.json" }}>
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content={{asset "/img/ms-icon-144x144.png" }}>
<meta name="theme-color" content="#ffffff">

If you don’t want to change the template, you can alternatively use the code-injection area. However the {{asset}}-statement will then not get rendered. This means that you will need to specify the full path in above file on your own.

Jeannot Muller

Entrepreneur, developer, author.

Click Here to Leave a Comment Below

Leave a Reply: