Favicon with github pages

How do you create a favicon for github pages? Is there a website that you do it with?

4 Likes

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" />
5 Likes

Okay let me try that.

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 :slight_smile:

2 Likes

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?

How to create one. And no, I have not found an answer

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

https://realfavicongenerator.net/

8 Likes

Thanks man!

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

Put this in your web pages head:

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

@timrossback Exactly what I needed ( _includes/head.html ). Thanks! :smile:

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

1 Like