# \[Casper\] Customizing the favicon

**URL:** <https://forum.ghost.org/t/casper-customizing-the-favicon/20157>\
**Category:** Themes\
**Created:** [February 12, 2021, 6:08pm UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157 "2021-02-12T18:08:14Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![taykcrane](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@taykcrane](https://forum.ghost.org/u/taykcrane)\
**Post date:** [February 12, 2021, 6:08pm UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/1 "2021-02-12T18:08:14Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![brightthemes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/brightthemes/32/25099_2.png) [@brightthemes](https://forum.ghost.org/u/brightthemes)\
**Post date:** [February 13, 2021, 10:41am UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/2 "2021-02-13T10:41:49Z")

</div>

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:

```auto
<link rel="icon" href="you_icon.png" type="image/png">

```

---

<div class="post-metadata">

**Author:** ![shunslab](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/shunslab/32/11636_2.png) [@shunslab](https://forum.ghost.org/u/shunslab)\
**Post date:** [February 13, 2021, 4:06pm UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/3 "2021-02-13T16:06:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![taykcrane](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@taykcrane](https://forum.ghost.org/u/taykcrane)\
**Post date:** [February 16, 2021, 8:58pm UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/4 "2021-02-16T20:58:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![shunslab](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/shunslab/32/11636_2.png) [@shunslab](https://forum.ghost.org/u/shunslab)\
**Post date:** [February 17, 2021, 7:35pm UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/5 "2021-02-17T19:35:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![keywordnew](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/keywordnew/32/12564_2.png) [@keywordnew](https://forum.ghost.org/u/keywordnew)\
**Post date:** [April 12, 2021, 4:03am UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/6 "2021-04-12T04:03:31Z")

</div>

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 🙂 Thanks for posting the original question.

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [April 12, 2021, 4:19am UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/7 "2021-04-12T04:19:30Z")

</div>

The [solution](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/2) provided by @brightthemes solves exactly the question asked in this topic. This overrides the favicon without changing publication icon.

---

<div class="post-metadata">

**Author:** ![fretief](https://avatars.discourse-cdn.com/v4/letter/f/dc4da7/32.png) [@fretief](https://forum.ghost.org/u/fretief)\
**Post date:** [December 4, 2023, 12:20am UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/8 "2023-12-04T00:20:25Z")

</div>

@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

```auto
<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?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [December 4, 2023, 12:56am UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/9 "2023-12-04T00:56:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![fretief](https://avatars.discourse-cdn.com/v4/letter/f/dc4da7/32.png) [@fretief](https://forum.ghost.org/u/fretief)\
**Post date:** [December 6, 2023, 7:05am UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/10 "2023-12-06T07:05:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [December 6, 2023, 4:00pm UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/11 "2023-12-06T16:00:37Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![fretief](https://avatars.discourse-cdn.com/v4/letter/f/dc4da7/32.png) [@fretief](https://forum.ghost.org/u/fretief)\
**Post date:** [December 6, 2023, 11:39pm UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/12 "2023-12-06T23:39:04Z")

</div>

Thanks @RyanF …

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![RyanF](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ryanf/32/17448_2.png) [@RyanF](https://forum.ghost.org/u/RyanF)\
**Post date:** [December 7, 2023, 2:33pm UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/13 "2023-12-07T14:33:28Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![fretief](https://avatars.discourse-cdn.com/v4/letter/f/dc4da7/32.png) [@fretief](https://forum.ghost.org/u/fretief)\
**Post date:** [December 18, 2023, 4:44am UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/14 "2023-12-18T04:44:40Z")

</div>

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

I’ll try the image/svg+xml  
Thanks

---

<div class="post-metadata">

**Author:** ![ZuluPilgrim](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/zulupilgrim/32/29267_2.png) [@ZuluPilgrim](https://forum.ghost.org/u/ZuluPilgrim)\
**Post date:** [March 12, 2024, 12:59am UTC](https://forum.ghost.org/t/casper-customizing-the-favicon/20157/15 "2024-03-12T00:59:52Z")

</div>

Thanks, this works a treat :)

> [@brightthemes](#):
>
> Another option is using the code injection section (header).  
> Assuming you have your icon in the root folder, you can add the following line:
> 
> ```auto
> <link rel="icon" href="you_icon.png" type="image/png">
> 
> ```