gethugothemes / liva-hugo

Liva is a personal blog template powered by Hugo.
https://gethugothemes.com/products/liva/?utm_source=liva_github&utm_medium=referral&utm_campaign=github_theme_about
MIT License
276 stars 235 forks source link

How to set favicon.ico? #25

Closed KushajveerSingh closed 4 years ago

KushajveerSingh commented 4 years ago

I want to use my favicon.ico file with this theme. But I am confused as how to do this?

dogukanerel commented 4 years ago

First of all, you have to add the codes below into the "themes/liva-hugo/layouts/partials/head.html"

{{ "<!--Favicon-->" | safeHTML }}
<link rel="apple-touch-icon" sizes="180x180" href="{{ relURL "/images/favicons/apple-touch-icon.png" }}" />
<link rel="icon" type="image/png" sizes="32x32" href="{{ relURL "/images/favicons/favicon-32x32.png" }}" />
<link rel="icon" type="image/png" sizes="16x16" href="{{ relURL "/images/favicons/favicon-16x16.png" }}" />
<link rel="manifest" href="{{ relURL "/images/favicons/manifest.json" }}" />
<link rel="mask-icon" color="#5bbad5" href="{{ relURL "/images/favicons/safari-pinned-tab.svg" }}" />
<meta name="msapplication-TileColor" content="{{ relURL "/images/favicons/mstile-144x144.png" }}" />
<meta name="theme-color" content="#ffffff">

Now, create favicons folder like this "/static/image/favicons".

After that, add this config into your config.toml :

[params.favicon]
enable    = true
path      = "/images/favicons"
version   = "a_random_value"
maskIicon = "#5bbad5" 
tileColor = "#da532c" 
themeColor= "#ffffff"

You can choose any favicon generator online and generate your favicons. (I created my favicons at favicon.io) And, put these images into "/static/images/favicons/"

somratpro commented 4 years ago

put an image into "/static/images/favicon.png" . and you are done.