Having a PNG locally, we can use FFMPEG to convert it to a .ico file.
(Pro tip: use pngpaste on MacOS or xclip on Linux to quickly create PNG files from a clipboard image)
Example for MacOS:
- Copy a PNG file we made on Figma or any other Software to our clipboard,
- Execute the following command to “stream” this clipboard content to a local PNG file:
pngpaste favicon.png
Example for various formats:
ffmpeg -i favicon.png -vf scale=180:180:flags=neighbor apple-touch-icon.png
ffmpeg -i favicon.png -vf scale=32:32:flags=neighbor favicon-32x32.png
ffmpeg -i favicon.png -vf scale=16:16:flags=neighbor favicon-16x16.png
Creating a single multi-resolution favicon.ico file (No idea how this works but may be handy in some cases):
ffmpeg -i favicon.png -filter_complex \
"[0:v]scale=256:256:flags=neighbor[v256]; \
[0:v]scale=128:128:flags=neighbor[v128]; \
[0:v]scale=64:64:flags=neighbor[v64]; \
[0:v]scale=32:32:flags=neighbor[v32]; \
[0:v]scale=16:16:flags=neighbor[v16]" \
-map "[v256]" -map "[v128]" -map "[v64]" -map "[v32]" -map "[v16]" favicon.ico
