How do you add a favicon to a GitHub page with a theme?

I’m trying to add a favicon to a GitHub page with the ‘slate’ theme but I don’t know where to add it as it doesn’t use traditional html.

1 Like

It must not require terminal.

Hey @mcloverz,

Once you have generated the theme, then naviagate to the root directory, you will find an index.html file in your root directory.

after that i believe it should be very straight forward, just add a simple link tag like you would add in your normal static html website.

But just be sure not to put a slash in the beginning when defining the href attribute.

so for example

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

this assumes you are placing the .ico file in the root directory, if not then,

<link rel="shortcut icon" type="image/x-icon" href="whatever_folder_name/favicon.ico">

hope this helps you :slight_smile:

P.S: for assurance purposes i did google what your query was exactly, linking the source from where i got the exact details: The Link

2 Likes

Thanks! I’ll give it a try.

This still doesn’t work as I am using a theme (index.md), not HTML (index.html).

Nevermind, I figured it out! I’ll accept your answer as the solution as it’d probably help most.

1 Like

How do you do it

May I know how did you solve this? I’m asking because I also have an index.md file.

You can just drag and drop the favicon.ico file into your repository and it’ll work, might need to give it a few minutes to update :slight_smile:

I was not able to make this work with the Minimal theme - I tried everything suggested here! I have my favicon saved in my repo as both a .ico and .png file. I also tried adding this code to the top of my index.md file: 

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

(It works fine when I create an index.html file, but of course that doesn’t work with the theme.)

I also tried adding this to my _config.yml file:

site_favicon: favicon.ico

Can anyone help me figure out what I’m doing wrong? 

EDIT: I realized today that this is a Mac issue (Chrome and Safari). On my work PC, the favicon shows up as it should.

What was the solution? Have been searching for a while, and tried a number of things, but am still unable to figure it out.

I am also using index.md and theme, and I don’t have index.html. I got my favicon work by two steps:

  1. Upload the favicon.ico file to my GitHub repository at the root directory.

2. Go to _layouts/default.html, and add 

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

into the head (the section surrounded by \<head\> and \</head\>).

  1. Commit the changes.

How did you manage to solve it?