Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Pilot Lvl 1
Message 1 of 11

Favicon with github pages

Solved! Go to Solution.
How do you create a favicon for github pages? Is there a website that you do it with?
Steven Copeland
10 Replies
Copilot Lvl 2
Message 2 of 11

Re: Favicon with GitHub Pages

Instead of uploading a file to /favicon.ico, you specify the favicon inside the <head> of each HTML page, like this:

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

 

Pilot Lvl 1
Message 3 of 11

Re: Favicon with GitHub Pages

Okay let me try that.
Steven Copeland
Pilot Lvl 3
Message 4 of 11

Re: Favicon with GitHub Pages

On top of what you said, @roryokane, if you have the _includes/head.html file in your repository or a default.html depending on the theme, you can edit the <head> section to include the favicon:

 

<head>
<!-- Default head tags --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}"> <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ "/feed.xml" | relative_url }}">

<!-- Favicon head tag -->
<link rel="icon" href="PATH/TO/favicon.ico" type="image/x-icon"> </head>

(I'm using the minima theme for my site, if you're wondering)

 

It really depends what theme you're using :)

Ground Controller Lvl 1
Message 5 of 11

Re: Favicon with GitHub Pages

@ItsPugle Exactly what I needed (_includes/head.html). Thanks! :smileyhappy:

 

 Screen Shot 2018-10-10 at 3.42.13 AM.png

Pilot Lvl 2
Message 6 of 11

Re: Favicon with github pages

Were you able to find a solution here? And just to clarify, are you asking how to create a Favicon? Or just how to include one in your HTML?

Pilot Lvl 1
Message 7 of 11

Re: Favicon with github pages

How to create one. And no, I have not found an answer
Steven Copeland
Highlighted
Solution
Copilot Lvl 3
Message 8 of 11

Re: Favicon with github pages

You need to save an image in several formats, e.g. 32x32 or use this tool here:

https://realfavicongenerator.net/

Pilot Lvl 1
Message 9 of 11

Re: Favicon with github pages

Thanks man!
Steven Copeland
Copilot Lvl 3
Message 10 of 11

Re: Favicon with github pages

Well... for 99% procent of the cases you need only one format these days: a 196x196 pixel PNG with transparency.

 

Just link it in your head like this:

  <link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
  <link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
  <link rel="apple-touch-icon" href="/img/icon-196x196.png">

 

I got the code from http://jekyllcodex.org/without-plugin/seo/.