Customize a favicon

So you should have seen the icon on the top of the browser, like this:

icon-example

So this class we are going to learn how to customize your OWN icon.

Favicon origin and benefits

A favicon, is the compound of the words favorite and icon. It can help readers of your site remember your site more clearly and makes the site more interesting.

Generating an icon

To have an favicon, you need an .ico file. You can generate it anywhere, here I used the https://favicon.io/ to generate my icon. You can turn text, pictures, or emojies into favicons. When downloading the icon, there might be a bunch of files, but all we need, is the favicon.ico file.

Putting up the icon

First, save the favicon.ico file in the root directory of your repository,

Then, enter the _includes file, you may or may not need to create one.

Next, enter the file of head-custom.html, you may or may not need to create it too!

Last, in the first line of the file, add a line of code:

<link rel="icon" type="image/x-icon""href="https://your_github_username.github.io/favicon.ico">

And push to the origin, and you are all done!

Comment here

back