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)~
License CC BY-NC-ND 4.0