FileDial › Guides › Photos and images
How to make a favicon from an image on a Mac
By Himanshu Ranjan · Updated 8 November 2026
To make a favicon on a Mac, select a square logo image in Finder and run Convert › Make favicon pack in FileDial. It writes favicon.ico (16, 32, 48), an apple-touch-icon, 192 and 512 px icons and site.webmanifest into a new folder. For a bare .ico, use Convert › Convert to ICO.
What a favicon needs today
A favicon is the small icon browsers show in tabs, bookmarks and the address bar. It began with Internet Explorer 5 in 1999 as a favicon.ico file in a site's root. Wikipedia describes the classic sizes as 16, 32, 48 or 64 pixels, and says modern browsers also support SVG favicons that stay sharp at any size.
Phones add more. Without an apple-touch-icon, iOS uses a page thumbnail when a visitor adds your site to their home screen. Wikipedia gives 180 by 180 for iPhones, and Google recommends 192 by 192 for Android. A web manifest is a small JSON file that can supply icons and names for installed web apps.
The one-step way
FileDial's Convert › Make favicon pack covers the whole set. You give it one image and it writes everything into a new folder, so your source file is not touched. Start from a square image that is larger than the biggest output, ideally 512 pixels or more, because shrinking looks better than enlarging.
- Prepare a square PNG of your logo, ideally 512 px or larger on each side.
- Select it in Finder, then hold the right Option key to open the dial.
- Choose Convert, then release on Convert › Make favicon pack.
- Open the new folder: favicon.ico (16, 32, 48), apple-touch-icon, 192 and 512 px icons and site.webmanifest.
- Copy the files to your site root and add the link tags your site generator needs.
Other icon tools in the same menu
Different targets need different packs, and FileDial has one for each. They all start from an image and write results to new files.
- Convert › Convert to ICO: icon with six sizes, 16 to 256 px, square, transparent edges.
- Convert › Convert to ICNS: macOS icon with 16 to 1024 px sizes.
- Convert › Make app icon set: AppIcon.appiconset for Xcode plus AppIcon.icns, best from a 1024 px square.
- Convert › Make Android icon sizes and Convert › Make iOS @1x @2x @3x: platform icon sets.
Design tips that matter at 16 pixels
Small icons punish detail. A full logo with a tagline becomes mush at 16 by 16, so use the symbol alone. Keep strong contrast with both light and dark browser tabs, and leave a little padding if the icon touches the edge. FileDial's ICO note says edges are transparent, which means your artwork should be centred and square.
If your logo exists as an SVG, rasterise it first. Convert › SVG to PNG (1×, 2×, 3×) gives PNGs you can feed back in. Also consider Compress › Optimize SVG if you ship an SVG favicon.
Testing the icon in the browser
Once you have the pack, put the files in your site's root folder and add the link tags your framework or template expects. Then test. Clear your browser cache, or open a private window, because browsers cache favicons stubbornly and may keep showing the old one for days.
Check three places: the browser tab at its tiny size, a bookmark, and your phone's home screen if you add the site there. An icon that looks fine at 192 pixels can disappear at 16, and dark browser themes can swallow dark logos. If the icon is hard to read at the small size, simplify the artwork and run the pack again.
Keep the 512 pixel file as your master for anything else you need later, and store your original artwork in a vector format if you have one.
- Test in a private window.
- Check tab, bookmark and home screen.
- Simplify the artwork if it disappears.
Mistakes to avoid
The common mistake is starting from a tiny or non-square image. Start large and square, and keep key artwork away from the edges. Another is using a detailed logo with text, which turns to mush at 16 pixels. A third is forgetting that browsers cache favicons, which makes a correct update look like a failure.
If your site builder or framework generates icons from one upload, use that and skip manual work. FileDial is useful when you maintain a hand-built site, need a pack for a client, or want to keep logos off online generators. Platform-specific needs have their own tools: Convert › Make app icon set for Xcode and Convert › Make Android icon sizes for launcher icons.
Privacy and ownership
Logos are often unreleased. Online favicon generators receive your artwork; FileDial processes it on your Mac and never uploads it, and everything works offline.
Questions
What sizes does a favicon pack need?
A classic favicon.ico holds 16, 32 and 48 pixel versions. Add an apple-touch-icon for iOS home screens, with 180 pixels common for iPhones, and 192 and 512 pixel icons for Android and installed web apps. FileDial's Make favicon pack writes these in one go.
Can I make a favicon from a JPG or PNG?
Yes. Start from a square image, ideally 512 pixels or larger, then run Convert › Make favicon pack. PNG is better than JPG because it can keep transparent edges. If your logo has a background you want removed, do Adjust › Remove background first.
What is the difference between ICO and ICNS?
ICO is the Windows icon format, which can hold several sizes in one file and is also used for favicons. ICNS is the macOS icon format with sizes from 16 to 1024 pixels. FileDial has Convert to ICO and Convert to ICNS for each.
Do I still need a web manifest?
Not for a basic favicon. A manifest is a JSON file that supplies icons, names and colours for installed web apps, and Wikipedia notes some Android setups may need a minimal one. FileDial's pack includes site.webmanifest, so you have it if you need it.