How to Make a Favicon ICO from a PNG or SVG Logo

Start with the simplest version of the mark. Thin text, complex gradients, and detailed illustrations usually disappear at 16x16 px. A favicon should be recognizable as a silhouette.

Place the mark on a square canvas and leave safe padding. If the logo touches every edge, it will look cramped in browser tabs.

SVG is the best source if you have it, because it scales cleanly before ICO export. PNG is fine if it is large enough, transparent, and already sharp.

Do not start from a small screenshot of a logo. It will become blurry in the final icon set.

ICO can contain multiple sizes in one file, commonly 16, 32, 48, 64, 128, and 256 px. This lets browsers and systems choose the right version for tabs, bookmarks, shortcuts, and high-density screens.

After export, test the favicon in both light and dark browser themes. A black logo without a background can disappear in dark UI.

Most CMS platforms let you upload a site icon in settings. If you manage code directly, place favicon.ico in the public root and reference additional PNG/SVG icons when your stack supports them.