Favicons are used widely in websites. Since you come to this post purposefully, I assume that you have a basic understanding of what favicon is. With Hexo, we can easily customize the favicon of our blog site. In this post, I will describe how to set up a custom favicon in theme NexT.

Convert your favorite image into favicon#

The first step is to convert your favorite image into favicon. You can use favicon generator，load your favorite image into this website, and click the button Create Favicon to generate favicons for your blog. Then download the generated favicons (see image below).

Create a favicon with only text#

If you want to create a favicon with only text. You should use favicon.io. It is simple to use. You can tweak the font type, font size, text box shape, color etc. Then you can download the 1024x1024 PNG image from the website and use favicon generator to generate various favicons.

Set up in theme NexT#

After you have generated the favicons, extract the zipped files, you will see a lot of files.

Go the blog root, under the source folder, create a folder named images. Copy the extracted files to this folder. Then edit the theme NexT configuration file (i.e., theme/next-new/_config.yml). Find the part about favicon and use the following settings,

favicon:
  small: images/favicon-16x16.png
  medium: images/favicon-32x32.png
  apple_touch_icon: images/apple-icon-180x180.png
  safari_pinned_tab:
  android_manifest: images/manifest.json
  ms_browserconfig: images/browserconfig.xml

Then deploy your blog to GitHub. You will see that your blog now has a custom favicon (see image below, favicon in the circle)~