One image in, a complete icon set out: favicon.ico, the PNG sizes browsers ask for, an Apple touch icon, maskable icons, a web manifest and the HTML to paste into your head.
A square PNG or SVG works best. At least 512×512 so the large icons stay sharp.
Options
Untick transparency to sit the icon on a solid colour — worth doing for the Apple touch icon, which shows a black background otherwise. Padding shrinks the artwork inside the square, which helps a logo that already sits tight to its edges.
Your icon set
Paste this into your <head>
The icons a website is actually expected to provide
A favicon used to be a single sixteen-pixel image. It is now a small family of files: the classic .ico for older browsers, several PNG sizes for modern ones, a larger Apple touch icon for when someone adds your site to their home screen, and a maskable icon that Android crops into whatever shape the launcher uses. Miss the maskable one and your logo gets its edges chopped off on a phone.
The set produced here covers all of it, along with a web manifest and the block of HTML to paste into the head of your pages. Start from a square image with your mark comfortably inside the frame — anything close to the edge risks being cropped on the maskable version, which is padded automatically to protect against exactly that.
Common questions
What size should my source image be?
At least 512 pixels square, and ideally a simple mark rather than a detailed logo. Whatever you provide is scaled down to sizes as small as sixteen pixels, where fine detail and small text disappear entirely into mush.
What is a maskable icon?
An Android icon that the system crops to a circle, squircle or rounded square depending on the launcher. The safe area is a circle covering about eighty per cent of the image, so anything outside that may be cut. Padding is applied here to keep your mark inside it.
Where do the files go?
Usually the root folder of your site, with the snippet from the head section pasted into your page template. The web manifest tells mobile browsers which icon to use when someone installs your site to their home screen.
Why is my new favicon not showing up?
Browsers cache favicons aggressively and often ignore a normal refresh. Try a hard reload, a private window, or a different browser before concluding something is wrong.
These utilities are the small end of what we do. TechnoSyn builds custom applications, business systems and internal tools for people who depend on them daily. If you have something larger that needs building, tell us what you are trying to do.