Favicon Generator — Tips & Guide

Create favicon PNG files in all required sizes for browsers, desktops, and iOS home screens. Download and add them to your website's root directory for full browser compatibility.

Keep it Simple at 16×16

At 16×16 pixels, only the simplest shapes read clearly in browser tabs. Use a single letter, an icon, or an abstract mark — never try to fit a full logo at this size.

Use High Contrast Colors

Favicons appear on both light and dark browser UIs. Use high-contrast colors — a dark icon on a white background, or use transparency and rely on the browser's default tab background.

Include 180×180 for iOS

The 180×180 Apple touch icon appears when users add your site to their iPhone home screen. Without it, iOS uses a screenshot of your page, which looks unprofessional.

Place .ico in Root

Browsers automatically look for /favicon.ico at your site's root, even without a link tag. Always place a favicon.ico file there as a fallback for older browsers.

Test on Dark Mode

Many users browse with dark mode enabled. Check that your favicon is visible against both light and dark browser chrome. Consider using a transparent background with a white/light icon.

Add the link Tags to <head>

Explicitly declare your favicon with link tags: <link rel="icon" href="/favicon-32.png" sizes="32x32"> and <link rel="apple-touch-icon" href="/apple-touch-icon.png">.

You need multiple favicon sizes for different contexts. The essential sizes are: 16×16 (standard browser tab), 32×32 (browser tab on high-DPI and taskbar), 64×64 (Windows site shortcut), and 180×180 (Apple touch icon for iOS home screen). Providing all four ensures your favicon looks sharp on every device and browser.

Download the favicon PNG files and upload them to your website's root directory. Then add link tags to your HTML <head>: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> and <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. For the widest browser support, also generate a favicon.ico file from your 16×16 PNG and place it in the root — browsers look for it automatically.

An Apple touch icon is the image that appears when a user adds your website to their iPhone or iPad home screen via Safari's "Add to Home Screen" option. It should be 180×180 pixels and typically has rounded corners applied automatically by iOS. Without an explicit touch icon, iOS takes a screenshot of your page, which looks unprofessional. Declare it with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

PNG is the best format for modern favicons because it supports transparency and produces sharp icons at any size. For maximum compatibility with older browsers (IE 11 and below), also provide a favicon.ico file, which is a container format that can hold multiple sizes in one file. ICO files are not generated by this tool — use an .ico converter separately if needed. SVG favicons are supported by modern browsers and scale perfectly, but lack support in Safari and older browsers.