ImageSmith / Favicon generator
Favicon generator
Turn your logo, or just your initials, into every favicon and app icon size a website needs, plus a real multi-size favicon.ico.
Paste this into your <head>
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
What each file is for
| File | Used by |
|---|---|
| favicon.ico | Browser tabs, bookmarks, Google search results (which asks for a multiple of 48 px) |
| favicon-32x32.png | Tabs on high-density screens |
| apple-touch-icon.png (180) | iPhone and iPad home screen |
| android-chrome 192 / 512 | Android home screen, installable web apps, splash screens |
Questions people ask
Which favicon sizes do I actually need in 2026?
A 32×32 favicon.ico (or PNG) for browser tabs, an SVG favicon if you have a vector logo, a 180×180 apple-touch-icon for iPhone home screens, and 192×192 plus 512×512 PNGs for Android and installable web apps. This tool makes all of the raster ones, plus a multi-size .ico.
How do I add the favicon to my site?
Upload the files to your site's root folder and paste the HTML snippet shown below into the <head> of your pages. On Shopify, Wix, Squarespace and WordPress, upload the 512px PNG in the site settings under "favicon" or "site icon".
Is my logo uploaded?
No. The icons are drawn with the canvas API in your browser, and the .ico file is assembled locally too.
Why does my favicon look blurry or unreadable?
At 16 pixels there is room for roughly one letter or one bold shape. Use the badge or monogram version of your logo, not the full wordmark, and add padding and a solid background so it reads on both light and dark browser tabs.