nibbo
Pro $2

Tools › Design

Favicon and app icon studio

Turn one logo into favicon.ico, apple-touch-icon, Android adaptive and maskable icons, an iOS AppIcon set and site.webmanifest.

What's inside

favicon.ico (16, 32, 48), PNG favicons, apple-touch-icon, Android Chrome and maskable icons, site.webmanifest, an iOS AppIcon set for Xcode, Android mipmaps with an adaptive icon, and this HTML snippet:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#F39A3D">

How it works

  1. Your logo is drawn on a canvas at every size, with safe zones for maskable and adaptive icons.
  2. favicon.ico holds 16, 32 and 48 px PNGs, which every current browser reads.

Questions

Which source works best?

An SVG, or a square PNG of at least 512×512 with some empty space around the mark.