# Favicon Generator — Generate favicons for a website on Mac

Every favicon a website needs, plus the web manifest and the HTML to paste into your page. Part of OneMacTools, 151 private tools in one native Mac app (macOS 26 or later); category: Images. Runs on your Mac; nothing is uploaded.

From one logo, get favicon.ico with 16, 32 and 48 px inside, 16 and 32 px PNGs, a 180 px Apple touch icon on a solid background so it doesn't turn black on iPhones, and 192 and 512 px icons for Android and installable web apps — plus a site.webmanifest with your site name and theme colour and the HTML snippet for your <head>.

Page: https://www.onemactools.com/tools/favicon-generator · Download: https://www.onemactools.com/download · Pricing: https://www.onemactools.com/pricing

## How to use it
1. **Drop your logo.** Use one image, square if possible and at least 512 px. Non-square images are cropped to a centred square.
2. **Add your site details.** Type the site name and theme colour for the web manifest, and choose the Apple touch icon background.
3. **Click Make Favicons.** Every favicon file is made, along with the manifest and the HTML snippet.
4. **Upload to your site.** Copy the files from the “favicons” folder (in a dated folder in Downloads › OneMacTools) to your website's root, and paste the HTML into your page's <head>. The snippet is also shown in the app.

## Options
- **Site name:** The name used in site.webmanifest, shown when someone installs your site on a phone. If you leave it empty, the image's file name is used. The short name is the first 12 characters.
- **Theme colour:** A hex colour such as #1E90FF, used for the browser's theme colour and the manifest's background colour. White if left empty.
- **Apple touch icon background:** White, Theme colour or Black. iPhones show transparent home-screen icons on black, so the 180 px Apple touch icon gets a solid background.
- **Round the corners:** Off by default. Rounds the corners of your logo in every favicon size.

## Tips
- Use a simple mark, not your full logo with words. At 16 px only bold shapes stay recognisable.
- Start from a transparent PNG so the favicon sits nicely on light and dark browser tabs.
- Type the theme colour as a hex value. It colours the browser interface on some phones, so pick your main brand colour.
- After uploading, open your site in a private window to check the new icon, as browsers cache favicons for a long time.

## Questions
**Which favicon files does a website need?**
favicon.ico for older browsers, 16 and 32 px PNGs for tabs, a 180 px Apple touch icon for iPhone home screens, and 192 and 512 px icons with a web manifest for Android. OneMacTools makes all of them and the HTML to paste into your page's <head>.

**Where do the files go?**
In your website's root folder, next to index.html. The HTML snippet and the manifest both expect them there.

**How do I make a favicon.ico on a Mac?**
Drop your logo onto Favicon Generator and click Make Favicons. favicon.ico is made with 16, 32 and 48 px versions inside, alongside the PNG sizes.

**Why does my icon look black on an iPhone home screen?**
iOS shows transparent areas of a home-screen icon as black. The Apple touch icon is placed on a solid white, black or theme-colour background to avoid that.

**What is site.webmanifest for?**
It tells phones your site's name, icons and colours when someone adds it to their home screen or installs it as a web app.

**My new favicon isn't showing. What's wrong?**
Browsers cache favicons aggressively. Check that the files are in your site's root and the snippet is in <head>, then reload in a private window.