asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions
web/_posts/2019-08-11-customize-the-favicon.md
Cotes Chung baef16224c Update the tutorial.
2019-11-20 01:50:55 +08:00

1.2 KiB
Raw Blame History

title date categories tags toc
Customize the Favicon 2019-08-11 00:34:00 +0800
Blogging
Tutorial
favicon
false

The image files of Favicons are placed in assets/img/favicons. You may need to replace them with your own. So let's see how to customize these Favicons.

Whit a square image (PNG, JPG or GIF) in hand, open the site Favicon & App Icon Generator and upload your original image.

![upload-image]({{ site.baseurl }}/assets/img/sample/upload-image.png)

Wait a moment for the website to generate icons of various sizes automatically.

![download-icons]({{ site.baseurl }}/assets/img/sample/download-icons.png)

Download the generated package and extract the contents to cover all files in folder assets/img/favicons, but except the following two:

  • browserconfig.xml
  • manifest.json

At last, rebuild the site so that the icon becomes your custom edition.

See Also

  • [Getting Started]({{ site.baseurl }}/posts/getting-started/)
  • [Write a new post]({{ site.baseurl }}/posts/write-a-new-post/)
  • [Text and Typography]({{ site.baseurl }}/posts/text-and-typography/)