What is the best source image for a favicon?

A square PNG at least 512×512 pixels with a transparent background works best. Use a simple, bold design that remains recognisable when scaled down to 16×16 pixels.

Do I still need an ICO file for favicons?

Yes, for maximum browser compatibility. Include favicon.ico in your site root for legacy browsers. Modern browsers prefer PNG or SVG favicons referenced in the HTML head.

How do I add a favicon to a Next.js or Nuxt site?

Place favicon.ico in the public folder. Reference PNG favicons in the HTML head using link tags. Both Next.js and Nuxt support dedicated favicon configuration in their metadata systems.

Create Favicons for Your Website

A favicon is the small icon displayed in browser tabs, bookmarks, and address bars that makes your website immediately recognisable. Modern browsers and devices require multiple favicon sizes — a 16×16 ICO for legacy browser tabs, a 32×32 PNG for Retina displays, a 180×180 Apple Touch Icon, and 192×192 and 512×512 icons for Android home screen shortcuts. devtoolkit.sh's favicon creation workflow handles all of this from a single source image. Convert your logo or icon image to a PNG if needed, then use the Favicon Generator to create the complete set, and the Image Resizer to produce any additional custom sizes your framework requires.

ICOImage to Favicon

Convert any image into 16×16, 32×32, and 48×48 favicon PNG files with live previews.

IMGPNG to ICO

Resize a PNG to 32×32 and export it as a favicon-compatible PNG for use as a browser icon.

<->Image ResizerHOT

Resize images to exact dimensions with optional aspect ratio lock, entirely in your browser.

FAQ

What is the best source image for a favicon?: A square PNG at least 512×512 pixels with a transparent background works best. Use a simple, bold design that remains recognisable when scaled down to 16×16 pixels.
Do I still need an ICO file for favicons?: Yes, for maximum browser compatibility. Include favicon.ico in your site root for legacy browsers. Modern browsers prefer PNG or SVG favicons referenced in the HTML head.
How do I add a favicon to a Next.js or Nuxt site?: Place favicon.ico in the public folder. Reference PNG favicons in the HTML head using link tags. Both Next.js and Nuxt support dedicated favicon configuration in their metadata systems.