Product Dev Back to Ghost

How to add a favicon to your ghost blog

A favicon is an icon associated with a URL that is displayed usually within a browser's address bar or next to the site name within a bookmark list. To add a favicon to your blog, you'll need to follow the steps below.

Note: This tutorial assumes that you already have access to an HTML editor capable of recognizing `.hbs` files. If you do not have an HTML editor, there are several free options, such as Brackets.

Add a favicon.ico file to the assets directory

The first step is to drop your favicon.ico file into your theme's assets directory.

Add a <link> tag to your favicon

Next, we need to link to the favicon on the theme's default.hbs file. We can do this using the asset helper {{asset "/favicon.ico"}} as the src inside the <link> tag. So, together, the entire snippet to add a favicon to your Ghost blog would need to look like this:

<link rel="shortcut icon" href="{{asset "/favicon.ico"}}">

Save and upload the theme to your blog

Next, save your file and upload the theme to your blog. A favicon will now appear within the browser when you access your website.

Tip: If you do not see your blog's favicon right away, you may need to clear your browser's cache.

Using Ghost(Pro)? To upload your theme, you’ll need to access your blog’s settings on Ghost.org. If you need help, checkout How to upload a theme to your Ghost(Pro) blog or contact us at [email protected] for additional Ghost(Pro) support.