What is To Customize the Favicon?
Customizing the favicon refers to the process of changing the small icon that appears in the browser tab or bookmark bar when someone visits your website. The favicon is a visual representation of your website and helps users easily identify and locate your site among their open tabs or bookmarks.
The favicon typically appears as a 16x16 pixel or 32x32 pixel image and is usually saved in the ICO (icon) format, although other image formats like PNG or GIF can also be used. By customizing the favicon, you can give your website a unique visual identity and make it more recognizable to users.
To customize the favicon for your website, you need to create an image that you want to use as your favicon and save it in the appropriate format (ICO, PNG, GIF, etc.). Once you have the favicon image ready, you can upload it to your website's root directory and add a reference to it in the HTML code of your web pages.
The HTML code to add a favicon typically looks like this:
```html ```
In this example, the `href` attribute specifies the path to the favicon image file. You would need to replace `/path/to/favicon.png` with the actual path to your favicon image.
By customizing the favicon, you can enhance the branding and visual appeal of your website, making it more memorable for visitors.
This documentation article has been sourced from Chirpy Doc.
If desired, you can replace them with your own. The following sections will provide guidance on creating and replacing the default favicons.
The favicons of Jekyll Theme Chirpy are located in the directory assets/img/favicons/. If you wish to customize it with your own logo or icon, the following sections will guide you through the process of creating and replacing the default favicons. For more information about favicons, you can visit Favicon Generator.
✔️⚠️ Warning: the path is
assets/img/favicons/
❌🚫 Which is NOT the same as
_posts/assets/img/favicons/
💥Project error 💥
I had some issues when I was trying to Customize the Favicon. I were only able to view the favicon with my logo in localhost. For some reason, the images and the changes I made were not getting deployed, and I didn’t see it in my GitHub for the project either. I clean my cache and tried several things as well from multiple blogs but nothing seems to work. I noticed that the customize Favicon images get switched back to the originals after stopping the server and running the “bundle exec jekyll s” command. I didnt know what could be causing this issue??
🏁 Resolution 🏁
After several hours of research and trial and error, I have finally achieved success! :D
The images and folders that I was adding into my Jekyll assets were getting deleted because I was adding them inside the wrong folder.
💡 I add them inside \_site/assets/img folder instead of assets/img/favicons
The _site folder is deleted and rebuilt after every change or jekyll build execution. You should put your files in the /images/ directory in the main project folder.
In Terminal, navigate to the root directory of the specific jekyll folder (e.g. /theme-name/) and use the command jekyll build to rebuild the _site folder reflecting any changes you’ve made.
Stackoverflow: Jekyll assets get deleted
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.xmlsite.webmanifest
And then copy the remaining image files (.PNG and .ICO) to cover the original files in the directory assets/img/favicons/ of your Jekyll site. If your Jekyll 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.
Acknowledgments 📚
Resources list that I find helpful and would like to give credit to.