What is the Favicon Generator?
A favicon is the small icon in browser tabs, bookmarks and search results. Modern sites need a few versions: favicon.ico for older browsers, PNGs in several sizes, an Apple touch icon for iPhone home screens, larger icons for Android and installable web apps, and a web manifest that lists them.
Start from your logo, a couple of letters on a coloured background, or an emoji. Adjust the padding, background and corner shape while the previews show how it looks in a browser tab at real size. Then download one ZIP with every file and copy the HTML tags into your page’s <head>.
How to use it
- Choose Image, Text or Emoji as the source.
- Upload your logo, or type letters or an emoji and pick colours and shape.
- Check the tab and size previews; small sizes need bold, simple shapes.
- Download the ZIP, upload the files to your site’s root folder and paste the HTML into the <head>.
Features
- Every file you need. favicon.ico (16, 32 and 48 px), PNG favicons, Apple touch icon, Android and PWA icons, SVG and site.webmanifest.
- Three sources. Your logo, 1–3 letters in a choice of fonts, or any emoji.
- Real-size previews. See the icon in light and dark browser tabs and at 16, 32 and 180 px.
- Shape and padding. Square, rounded or circle, with padding and background colour.
- HTML snippet. The exact <link> and <meta> tags to paste.
- Private. Icons are drawn in your browser; your logo is not uploaded.
Frequently asked questions
What sizes does a favicon need?
A favicon.ico with 16, 32 and 48 px images covers browsers and Windows; a 180 × 180 Apple touch icon covers iPhone and iPad home screens; and 192 and 512 px PNGs in a web manifest cover Android and installable web apps. This ZIP includes all of them.
Where do I put the favicon files?
Upload them to the root of your site (next to index.html), so favicon.ico opens at example.com/favicon.ico, then paste the HTML tags into the <head> of every page.
Why does my favicon not update?
Browsers cache favicons for a long time. Hard-refresh the page, open it in a private window, or add a version to the link (favicon.ico?v=2).
What makes a good favicon?
Simple, bold shapes and strong contrast. Detailed logos turn into blurs at 16 px; a single letter or symbol from your logo often works better.
Last updated · Free, no sign-up, runs in your browser.