CSS Design Tools

Favicon Generator

Upload source

Download sizes

Upload a square image for best results.

HTML Snippet

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

What is a Favicon Generator?

This tool generates common favicon sizes from one uploaded image.

It also provides HTML link tags you can copy into your website head.

How to use

  1. Upload a source image (preferably square).
  2. Download required favicon PNG sizes.
  3. Copy generated HTML snippet.
  4. Place files in your public assets and update paths if needed.

Example usage

Create 16x16, 32x32, and 180x180 icons for browser tabs and touch devices.

Tips

  • Start with at least 512x512 source to keep small outputs crisp.
  • Use high-contrast shapes for recognizability in tiny sizes.
  • Test favicon visibility on light and dark browser themes.
  • Keep filename conventions consistent for deployment.

FAQ

Do I need all favicon sizes?
Core sizes are recommended for cross-platform compatibility.
Can I use PNG only?
Yes, many modern setups work well with PNG favicon assets.
Where should favicon files be placed?
Typically in your public root so referenced paths resolve correctly.
← CSS Generators

Related tools