How to Fix Favicon Issues (Jekyll-Chirpy)

If you’ve followed the official Chirpy theme documentation on customizing the favicon, you may have noticed problems with how your blog’s favicons are displayed. This post aims to help you resolve these issues.

Problem

After following the steps in the official documentation and running bundle exec jekyll s, I noticed that the favicon was not displaying correctly. Instead of the custom favicon, the default Chirpy theme favicon appeared.

Root Cause Analysis

Here’s what I found.

The zip file downloaded from RealFaviconGenerator came with the following files, which were placed into assets/img/favicons directory (with site.webmanifest deleted).

assets/img/favicons
  apple-touch-icon.png
  favicon-96x96.png
  favicon.ico
  favicon.svg
  web-app-manifest-192x192.png
  web-app-manifest-512x512.png

After running bundle exec jekyll s, I examined the _site/assets/img/favicons directory and noticed that the following files still showed the default Chirpy favicon.

_site/assets/img/favicons/
  android-chrome-192x192.png
  android-chrome-512x512.png
  favicon-16x16.png
  favicon-32x32.png
  mstile-150x150.png

The _site/assets/img/favicons/browserconfig.xml file referenced the incorrect image.

      <square150x150logo src="/assets/img/favicons/mstile-150x150.png" />

Similarly, the _site/assets/img/favicons/site.webmanifest file pointed to the wrong favicon sources.

  "icons": [
    {
      "src": "/assets/img/favicons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/assets/img/favicons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],

These references were all pointing to the original Chirpy favicon files rather than the custom images.

Solution

To fix the issue, navigate to assets/img/favicons directory and follow these steps.

Note that this is not the directory in _site, but the one in project root where the custom favicons files are first placed into.

Step 1: Rename these files in the assets/img/favicons directory.

web-app-manifest-512x512.png → android-chrome-512x512.png
web-app-manifest-192x192.png → android-chrome-192x192.png

Step 2: Delete the following file.

favicon-96x96.png

Step 3: Resize favicon.svg and place the resized favicon images into assets/img/favicons.

Use an image resizer (e.g., RedKetchup Image Resizer) and upload your favicon.svg file.

Resize favicon.svg to the following dimensions and download each version as a PNG file:

• 150x150: Save as mstile-150x150.png
• 32x32: Save as favicon-32x32.png
• 16x16: Save as favicon-16x16.png

Place the newly resized images in the assets/img/favicons folder.

Conclusion

After making these changes, running bundle exec jekyll s should display the correct favicon on your site.

I hope this guide has been helpful!