[Casper] Customizing the favicon

Themes
1

How do I customize the Favicon for my Ghost Blog (Casper theme)? It seems to use the “Publication icon” for the favicon, but I’m looking to overwrite that.

I can’t find anywhere in the Casper source code where a favicon is specified, it seems to be declared outside the theme.

Thanks!

1 Like
2

Like you said, you can replace it in the Ghost Admin area, simply deleting the current icon and uploading your own icon.
Another option is using the code injection section (header).
Assuming you have your icon in the root folder, you can add the following line:

<link rel="icon" href="you_icon.png" type="image/png">
1 Like
3

The easiest way for me was to grab the image I wanted to use, make it 60 x 60 then add .ico to it on the computer. After that just upload it under publication icon.

1 Like
4

Thanks, but to clarify, I’m not looking to change the “publication icon”, since that is used for more than just the favicon. I want to keep the publication icon the same, but override the favicon only. Does that make sense?

5

Sorry about that. I misunderstood. As far as what you’re trying to do, I’m not sure how to go about that.

1 Like
6

I’d like to do the same as what you’re indicating here, but with the Dawn theme instead. Did you find a way to override the publication icon being used as the favicon?

Will come back here to update in case I find something :slight_smile: Thanks for posting the original question.

1 Like
7

The solution provided by @brightthemes solves exactly the question asked in this topic. This overrides the favicon without changing publication icon.

1 Like
8

@brightthemes I am having a similar issue - I need to use a .svg to update the favicon colours based on the theme.
I followed your advice and added the following to the code injection

<link rel="icon" href="{{images/favicon.svg}}" type="image/svg">

but it does not load

I have no publication icon set and am using the casper theme on a local install (for now)

any advise?

9

What you posted doesn’t make sense. I think you meant href=“/images/favicon.svg” maybe? Or maybe you meant to use the asset helper?

1 Like
10

Thanks @Cathy_Sarisky
Yes I indeed meant using the asset helper!

The bigger issue however is not loading the favicon svg, I can do that via the publication icon.

What I want to do is use an SVG created as a file in my ghost assets so that I can change the colour based on whether the user has dark mode or light mode enabled on their browser.

I believe that you can edit the SVG and add a style into it to detect the mode selected.

1 Like
11

The final piece of this puzzle would be to drop the SVG file into your theme’s assets/images folder and then update the theme.

In the SVG, as you mentioned, you’d use something like this to change the icon based on dark mode:

<style>
  path { fill: #000; }
  @media (prefers-color-scheme: dark) {
     path { fill: #FFF; }
   }
</style>
1 Like
12

Thanks @RyanF …

How do I reference the SVG file as the favicon though - I have tried to link like this

<link rel="icon" href="{{asset images/favicon.svg}}" type="image/svg">

but it does not load the SVG file instead preferencing the file specified under the publication icon field - when I remove the publication icon, no favicon is loaded

13

Where are you putting the link tag? Do you have a live version of the site we can check?

Also, I think the type should be image/svg+xml.

14

Thanks @RyanF
The link tag is in the header of default.hbs.

I’ll try the image/svg+xml
Thanks

1 Like
15

Thanks, this works a treat :)