CraigyBabyJ guide
How to make a favicon from a PNG
A PNG logo is a good starting point for a favicon, but it usually needs to be square, padded and exported into several browser-friendly sizes.
Start with a simple square image
Use a square PNG with a clear mark in the middle. If the logo is wide or text-heavy, crop it down to the symbol before generating the favicon files.
Generate more than one file
A modern favicon set can include favicon.ico, small PNG icons, an Apple touch icon and Android icons. Different devices pick different files.
Test it in a browser tab
Favicons are tiny, so the final test is visual. Open the smallest generated icons and make sure the shape is still recognisable.
Useful tools for this job
Use these tools when you are ready to try the workflow on your own files.