# Customize the Favicon

Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.

Posted %b %e, %Y
By Yifan
2 min read
Customize the Favicon

The favicons of Chirpy are placed in the directory `assets/img/favicons/`. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.

## Generate the favicon

Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool Real Favicon Generator and click the button `Select your Favicon image` to upload your image file.

In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button `Generate your Favicons and HTML code` to generate the favicon.

## Download & Replace

Download the generated package, unzip and delete the following two from the extracted files:

- `browserconfig.xml`
- `site.webmanifest`

And then copy the remaining image files (`.PNG` and `.ICO`) to cover the original files in the directory `assets/img/favicons/` of your Hugo site. If your Hugo site doesn’t have this directory yet, just create one.

The following table will help you understand the changes to the favicon files:

File(s) | From Online Tool | From Chirpy
--- | --- | ---
`*.PNG` | ✓ | ✗
`*.ICO` | ✓ | ✗

> ✓ means keep, ✗ means delete.

The next time you build the site, the favicon will be replaced with a customized edition.

Blogging , Tutorial
favicon
This post is licensed under CC BY 4.0 by the author.

## Recently Updated

- Customize the Favicon
- Getting Started
- Writing a New Post
- Text and Typography

## Trending Tags

favicon getting started typography writing

## Contents

### Further Reading

## Trending Tags

favicon getting started typography writing