07 .ico · PNG · apple-touch-icon · manifest
Favicon generator
Start from a square image (an SVG or a PNG of 512 px or more is ideal) or from a letter, and get every icon file a site needs, with the HTML and manifest to go with them.
HTML and manifest
Paste into <head>
site.webmanifest
What each file is for
favicon.ico is the classic file browsers request on their own; it holds 16, 32 and 48 px versions. The ICO is written by this page byte by byte: BMP entries with a transparency mask work in every browser and in Windows, PNG entries make a smaller file for modern ones. The PNG favicons cover tabs and bookmarks, apple-touch-icon.png is what iPhones and iPads put on the home screen (opaque, because iOS fills transparency with black), and the 192 and 512 px icons plus the maskable one are listed in the web app manifest for Android and installed apps.
Upload the files to the folder you named, paste the HTML into every page’s <head> and upload site.webmanifest next to them. If you started from an SVG, a favicon.svg is included for browsers that prefer vector icons.
Frequently asked questions
Do I still need favicon.ico?
It is still worth having. Browsers request /favicon.ico when a page names no icon, and some tools, feed readers and older systems only look there.
What source image works best?
A square SVG, or a square PNG of at least 512 × 512 with a transparent background. Simple, bold shapes survive being shrunk to 16 px; fine detail and small text do not.
What is a maskable icon?
Android may crop app icons to a circle or another shape. A maskable icon keeps the artwork inside the central 80 % and fills the rest with background, so nothing important is cut off.