Favicon Generator Pro
Produce the whole set of icons a website needs from one picture, or from a letter or emoji. You get a ready-made zip and the lines of HTML that point to the files. Free preview · Pro required to export. Design your icon and preview the 16, 32 and 48 pixel versions. Pro downloads the full set with favicon.ico and the manifest.
Free preview · Pro required to export. Design your icon and preview the 16, 32 and 48 pixel versions. Pro downloads the full set with favicon.ico and the manifest.
Why use this tool?
- A site without a favicon shows a blank or default icon in the browser tab and in bookmarks.
- Different places need different sizes: browser tabs, Windows shortcuts, iPhone home screens and installable web apps.
- Writing a favicon.ico and a web manifest by hand is fiddly; here they are assembled for you.
- A letter on a coloured square is a quick placeholder when a project has no logo yet.
How to use Favicon Generator
- Choose From a picture or From a letter at the top.
- For a picture, drop a square image. For a letter, type one or two characters, or an emoji, and pick the Letter colour.
- Choose a Shape: Square, Rounded or Circle. If you use a picture, tick or untick Keep transparency; for a letter, or when transparency is off, pick a Background colour.
- Type a Site name; it is written into site.webmanifest as the name of an installed web app.
- Look at the previews at 16, 32, 48 and 180 px.
- Press Download the icon set and unzip it into your site, then paste the tags from head-snippet.html into your page head.
Features
- Source from a picture or from one or two characters, including emoji
- Square, rounded or circular icon shape
- Background and letter colour pickers, or transparency preserved for pictures
- Previews at 16, 32, 48 and 180 px before you download
- A zip containing favicon.ico (16, 32 and 48 px inside), six PNG sizes, site.webmanifest and head-snippet.html
- The head tags are also shown on the page for copying
Supported formats
Accepts any image your browser can open; a square PNG or SVG of 512 px or more gives the sharpest set. Outputs a zip with favicon.ico, PNGs at 16, 32, 48, 180, 192 and 512 px, a web manifest and an HTML snippet.
Tips
- The picture is filled to the edges and cropped to a square, so start with a square image if nothing should be cut off.
- Keep the design simple. At 16 px a detailed logo turns into mush, while a bold letter or shape stays readable.
- The theme colour in the manifest is taken from the Background colour, so choose one that suits your brand.
- Upload the files to the root of your site, because browsers request /favicon.ico by that name even when your HTML does not mention it.
Frequently asked questions
Is my image uploaded?
No. All the icons are drawn in your browser and zipped there, so the picture is not sent to a server.
What sizes are in the download?
PNGs at 16, 32, 48, 180 (the Apple touch icon), 192 and 512 px, plus a favicon.ico holding the 16, 32 and 48 px versions.
What is site.webmanifest for?
It tells a browser or phone the name, icons and colours to use when your site is installed as a web app. The tool fills it from your site name and background colour.
Where do I put the HTML snippet?
Paste the contents of head-snippet.html inside the head element of your pages, and place the icon files at the paths the tags use (the site root).
Can I use an emoji as a favicon?
Yes. In From a letter mode, type an emoji (up to two characters) and it is drawn onto the background colour.
Will a non-square picture work?
It is cropped to a square from the centre, so the edges of a wide or tall image will be lost.
Can I try this Pro tool without an account?
Yes. Design your icon and preview the 16, 32 and 48 pixel versions. Pro downloads the full set with favicon.ico and the manifest. Your own input is processed locally in your browser.
Will upgrading keep my work?
Checkout and login open in a separate tab. Keep the workspace open to retain inputs, settings and previews. Files stay in that tab only; keep the originals in case you close or reload it. Export access is checked with the server after payment.
Your files are processed directly in your browser and are not uploaded to HubToolify's servers.