jekyll-theme-chirpy "Customize the Favicon" Documentation Page

Checklist

[x] I have read and accepted the contributing guidelines.

Is your feature request related to a problem? Please describe

The page https://chirpy.cotes.page/posts/customize-the-favicon/ tells users to go to the favicon generator page and generate their favicons. But the favicon generator page doesn't generate all the favicons. It actually misses 5 files: favicon-16x16.png favicon-32x32.png android-chrome-192x192.png android-chrome-512x512 mstile-150x150.png.

Describe the solution you'd like

Mentioning that the site doesn't create all the favicon files would be a start, then possibly a solution to fix it quickly. Example, I wrote a quick bash script to fix this that people just need to replace 1 variable in and it generates all the other favicon images in their folder with ffmpeg.

#!/bin/bash

FAVICON_FOLDER='/path/to/assets/img/favicons'

SOURCE_IMAGE="$FAVICON_FOLDER/web-app-manifest-512x512.png"
rm "$FAVICON_FOLDER/browserconfig.xml" "$FAVICON_FOLDER/site.webmanifest"
ffmpeg -i "$SOURCE_IMAGE" -vf "scale=16:16" "$FAVICON_FOLDER/favicon-16x16.png"
ffmpeg -i "$SOURCE_IMAGE" -vf "scale=32:32" "$FAVICON_FOLDER/favicon-32x32.png"
ffmpeg -i "$SOURCE_IMAGE" -vf "scale=192x192" "$FAVICON_FOLDER/android-chrome-192x192.png"
cp "$SOURCE_IMAGE" "$FAVICON_FOLDER/android-chrome-512x512"
ffmpeg -i "$SOURCE_IMAGE" -vf "scale=150:150" "$FAVICON_FOLDER/mstile-150x150.png"

Granted this probably wouldn't be realistic as I don't think 100% of people have ffmpeg installed, as well as access to bash

Describe alternatives you've considered

I couldn't find any other sites that generate all the correct favicon names/files. So back to square 1.

Additional context

I think it would be important to mention as the `assets/img/favicons' folder doesn't exist, you must create it, then you can actually only see the other default favicons when the site is built and when you are in some browsers.

For example, I didn't have the other files in my assets/img/favicons folder and I thought everything was fine, it showed up in my browser tab on my browser as well. When it was ranked on google though, it showed the chirpy default favicon. Upon checking the _site folder, there were favicons generated from the default chirpy one.

There doesn't seem to be any mention in the docs that if the favicons are missing, it will automatically replace them with the chirpy default one. Even just adding the lists of files and notifiying people in the docs that the favicon generator site doesn't actually make all the images would be great.

Am willing to make the PR myself and change the docs in the production branch if you think this is needed or not.

May 05 '25 08:05 kalemarion

I also had the same problem following the documentation. I found this site that helped me generate most of the icon sizes (150x150 is missing): https://favicon.io/ Also, I didn't have the assets/img/favicons folder in my project as well a clarification about this would be nice.