A favicon is the small icon associated with a website. It can appear in a browser tab, bookmarks, mobile home-screen shortcuts, and other browser interfaces. To make one, start with a simple square image, export the formats and sizes your site needs, upload the files, and add the corresponding HTML links inside the page's <head>.
One image can produce a complete icon pack, but the source artwork matters: fine detail that looks good at full size may disappear at 16 pixels.
Create a favicon pack from your image →Choose a favicon source image
Use a square, high-contrast logo or symbol. A PNG around 512 × 512 pixels gives enough source detail for the smaller files. Prefer a simple mark with clear edges; avoid small words or thin lines that turn into visual noise in a browser tab. Keep transparency if your logo needs it, or choose a background that suits the design.
Which favicon sizes and files should you include?
- 16 × 16 and 32 × 32 PNG: common browser-tab and interface sizes.
- favicon.ico: a widely recognized icon file that browsers and tools may request from the site root.
- 180 × 180 Apple touch icon: used when a visitor saves a site to an iOS home screen.
- 192 × 192 and 512 × 512 PNG: commonly used in Android and web-app icon configurations.
Exact platform requirements can change, so use the HTML snippet generated with your icon pack and check the documentation for any platform-specific setup your site needs.
Generate and install the favicon files
- Choose a square source image with a clear symbol.
- Open the UtilityX Favicon Generator and select the image.
- Review the generated icon previews and available background or padding options.
- Download the favicon pack and extract the ZIP file.
- Upload the files to your website, usually in its public root or the path referenced by the generated snippet.
- Paste the generated
<link>tags inside the<head>of your site pages. - Reload the site and clear the browser cache if the old icon remains.
Example HTML links
Use the exact paths and filenames from your downloaded pack. A typical setup looks like this:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Do not paste these example paths if your files use different names or folders; match the snippet to where you actually uploaded the icons.
Does a favicon improve SEO?
A favicon helps people recognize your site in browser interfaces and can contribute to your site's visual identity in some search experiences. It does not guarantee higher rankings or more clicks by itself. Keep the icon readable at small sizes and focus on useful page content and a clear search result title too.
Frequently asked questions
Can I use a PNG as a favicon?
Yes. Modern browsers support PNG favicons. Many sites also keep a favicon.ico file for compatibility with browsers and tools that request it.
Why is my favicon not updating?
Browsers cache favicons aggressively. Confirm the file path and HTML, then hard-refresh or clear the browser cache. Some browsers may take a while to request the updated icon.
Should the favicon have a transparent background?
Transparency works well for many logos, but test the icon against both light and dark browser UI. A solid background can improve contrast for some artwork.
Does the favicon generator upload my image?
The UtilityX generator processes the image locally in your browser and creates the downloadable files there.
Make your favicon pack
Use the free Favicon Generator to create the icon files and HTML snippet, then upload the files to your site.