Clicky

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 ghost.org to make the needs of Ghost(Pro) / Ghost.org. (So usually it's all about linking to the favicon on the theme's default.hbs file.

Reviewed code section in January 2017, due to some changes in ghost.org(Pro) and small errors in my code.

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”. ):

    {{!-- Inserting favicons - generated via http://www.favicon-generator.org/ --}}
    <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.