8

I have made a Hexo blog. I can't however find out where to add the favicon. I have tried adding it to different folders but it isn't being found.

Does anyone know where it should be added or if there is anything else I need to update.

Brian Douglas
  • 141
  • 1
  • 4

6 Answers6

6

It depends on theme you're using, check theme documentation and source.

Some themes, like apollo are supports favicon config parameter (theme_config.favicon parameter in_config.yml).

If theme does not support a custom favicon, then just add file source/favicon.ico and it will be requested by browser automatically.

Konstantin Pavlov
  • 956
  • 1
  • 10
  • 24
2

I use Landscape, the default theme at time of writing.

blog\blog\node_modules\hexo\node_modules\hexo-cli\assets\themes\landscape\_config.yml

At the bottom of the file, you'll find a section titled Miscellaneous.

# Miscellaneous 
google_analytics:
favicon: blog\themes\landscape\source\css\images\favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:

Windows can be directionally-challenged when it comes to slashes, so try the opposite direction if you use PC. This took some fudging on my part, and I was able to use an .ico file as well as a .png.

If you're still in need of a placeholder image, I've used Favicon.cc and had great results.

TheAcolyte
  • 91
  • 9
2

you can add the favicon.ico in the source floder, and add a line in the blog/_config.yml

favicon: favicon.ico

so, you know the source is the root path

yanss
  • 126
  • 1
  • 6
1

I think all the other answers are so confused.
Now just three steps to add a favicon to your hexo-blog website, and I take next theme as example:

  • First, download your favorite imagename.ico image file from network or you make one by yourself.

  • Second, rename the imagename.ico file to favicon.ico, then move it to that folder: blog/themes/next(the theme folder you are using now)/source/images/.

  • Finally, modify the code in file blog/themes/next/_config.yml at that line to the same as below:

    # Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico

Done!

Hu Xixi
  • 1,799
  • 2
  • 21
  • 29
0

Konstantin Pavlov is right. for example, I use hexo-theme-next theme. I change code in themes/next/_config.yml.

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico

I put my favicon.ico in themes/next/source/images/favicon.ico
well Done.

YinPeng.Wei
  • 552
  • 3
  • 9
-1

Add this to the head part of the html code...

  <head>
    <title>Test Page</title>
    <link rel="icon" type="image/png" href="http://www.w3.org/Icons/w3c_home">
  </head>

For more on this have a look at the W3C site : How To FavIcon

It's also good to inspect the page source by looking at the console as it will report if there were any issue retrieving the icon.

Bertus Kruger
  • 1,345
  • 1
  • 19
  • 31
  • This answer, while pointing to a related favicon resource does not answer the question related to Hexo site generator. – JrBenito May 19 '16 at 18:08