Watch: make a favicon set
No sound. Each step is captioned on screen and also written out in the guide below.
Image Tools
Favicon Generator
Turn a logo, or just a letter, into every icon browsers and phones need: favicon.ico, the iPhone home-screen icon, app icons, and the HTML to paste in.
Make favicons locally
Runs locally in your browser. Your image is drawn on your device, not uploaded, saved, or shared.
Shape
Add a logo, or switch to Letter, to make your icons.
| File | Used for | Size | Download |
|---|
Add to your page's <head>
Put the files in your site's root folder, so /favicon.ico works.
Favicons in three steps
- 01Add a logo or type a letter
A square SVG gives the sharpest icons at every size.
- 02Check the previews
See it in a light and dark browser tab and on a phone home screen. Add padding if it feels cramped.
- 03Download and paste
Put the files in your site's root folder and paste the tags into your page's <head>.
What you get
- favicon.ico: 16, 32, and 48 px, for every browser and tool.
- favicon.svg: one sharp icon at any size (SVG and Letter sources).
- apple-touch-icon.png: 180 px for iPhone and iPad.
- icon-192.png, icon-512.png, and site.webmanifest: for Android and installable web apps.
Frequently asked questions
Do I need all these files?
For most sites, yes: it's the small set that covers current browsers, iPhones, and Android. favicon.ico still matters because some tools and older browsers request /favicon.ico directly.
Why does my old favicon still show?
Browsers cache favicons for a long time. Check in a private window, or add a version to the link, for example /favicon.svg?v=2.
What image works best?
A square SVG with a simple shape. Fine detail disappears at 16 pixels, so a bold mark or a single letter reads best in a browser tab.
Is my logo uploaded?
No. The icons are drawn in your browser and saved straight to your device.