A favicon is the small icon that represents your website in browser tabs, bookmarks, and other browser interfaces. Although it is tiny, it helps visitors recognize your website and creates a more consistent brand experience.
If you are building a website, you may wonder whether to use ICO, PNG, or SVG for your favicon. Each format has different advantages, and the right choice depends on browser compatibility, image quality, and where the icon will appear.
In this guide, you will learn how to make a favicon, choose the right file format and size, convert an existing image, and add the favicon to your website.
What Is a Favicon?
A favicon, short for “favorite icon,” is a small graphic associated with a website. It commonly appears beside the page title in a browser tab and may also appear in bookmarks and browsing history.
A favicon usually uses a simplified version of a website’s logo, symbol, or brand initials. Because it is displayed at a small size, a clear and recognizable design works better than a detailed image.
For example, a website might use its full logo in the page header but display only the main symbol as its favicon.
ICO vs PNG vs SVG: What Is the Difference?
ICO, PNG, and SVG can all be used in favicon workflows, but they work differently.
| Feature | ICO | PNG | SVG |
|---|---|---|---|
| Image type | Raster icon container | Raster image | Vector image |
| Scalability | Contains fixed-size images | Requires suitable pixel dimensions | Scales without losing sharpness |
| Transparency | Supported by compatible icon images | Supported | Supported |
| Multiple sizes in one file | Yes | No | One scalable design |
| Browser compatibility | Very broad | Broad | Supported by modern browsers, but compatibility varies |
| Best use | Traditional favicon and fallback | Size-specific icons and device icons | Crisp, scalable browser icons |
ICO: A traditional favicon format
ICO is a long-established icon format. A single ICO file can contain multiple image sizes, allowing software or browsers to select a suitable version.
Advantages:
- Broad compatibility with browsers and operating systems.
- Can contain several sizes in one file.
- Convenient as a traditional
/favicon.icofile.
Disadvantages:
- Individual images have fixed pixel dimensions.
- Creating or editing an ICO file may require a compatible tool.
ICO remains a practical option when you want a compatibility-oriented favicon.
PNG: A straightforward raster option
PNG is a lossless image format that supports transparency. It is easy to create with many image editors and works well for website icons when exported at appropriate dimensions.
Advantages:
- Good compatibility with modern browsers.
- Supports transparent backgrounds.
- Easy to create from a logo or other image.
- Useful for device icons and other size-specific images.
Disadvantages:
- Each file has fixed pixel dimensions.
- Multiple sizes may require separate files.
- Enlarging a small PNG can make it look blurry.
PNG is a good choice when you want a simple favicon and control over its exact dimensions.
SVG: A scalable vector option
SVG stands for Scalable Vector Graphics. Unlike raster formats, SVG describes shapes, paths, and other graphical elements, allowing supported applications to render the design at different sizes without pixelation.
Advantages:
- Stays sharp at different display sizes.
- Often compact for simple logos and symbols.
- Can support scalable designs and suitable dark-mode variations.
Disadvantages:
- Requires a valid SVG file.
- Browser and platform support varies by context.
- Does not replace every device-specific icon format.
SVG is useful when your logo is available as clean vector artwork and your target browsers support SVG favicons. For broader compatibility, provide an ICO or PNG fallback as well.
Which Favicon Format Should You Choose?
There is no single best format for every website.
- Choose ICO if you want a traditional favicon with broad compatibility.
- Choose PNG if you need a straightforward image file or device-specific icon.
- Choose SVG if you have vector artwork and want a crisp icon in browsers that support it.
For a typical website, a practical setup is to provide an ICO fallback, a PNG for device-specific use where needed, and an SVG favicon as an optional modern addition.
What Size Should a Favicon Be?
The appropriate size depends on where the icon will be displayed. A small browser-tab icon has different requirements from a high-resolution icon used when saving a website to a device’s home screen.
| Size | Common purpose |
|---|---|
| 16 × 16 pixels | Small browser tabs and bookmarks |
| 32 × 32 pixels | Standard favicon image for many modern browsers |
| 48 × 48 pixels | Larger icon contexts and some desktop uses |
| 180 × 180 pixels | Apple touch icon |
| 192 × 192 pixels | Common web-app icon size |
| 512 × 512 pixels | Larger web-app icon and installation contexts |
These are common sizes, not a requirement to create every file for every website. Follow the requirements of your browser, platform, or web-app setup.
An SVG favicon can use sizes="any" to indicate that it is scalable. For ICO, a file containing multiple appropriate sizes can reduce the need to manage several separate raster files.
How to Make a Favicon From Your Logo
You do not necessarily need to design a favicon from scratch. If you already have a website logo, you can create a simplified version for small displays.
Step 1: Choose a recognizable design
Start with a square canvas and use a simple symbol, letter, or compact logo mark. Avoid tiny text and intricate details because they may become difficult to distinguish at 16 × 16 pixels.
Step 2: Use a transparent background if appropriate
A transparent background allows your icon to sit more naturally against different browser and interface colors. PNG and SVG support transparency, and ICO files can also contain transparent icon images.
Make sure the foreground remains visible against light and dark backgrounds.
Step 3: Export at a suitable size
For a PNG favicon, export a square image at an appropriate resolution, such as 32 × 32 pixels. You can also prepare larger source artwork and export smaller versions from it.
If you have a vector logo, consider using it to create an SVG favicon.
Step 4: Convert the image if needed
If your logo is a JPG image and you need an ICO file, use FileNivo’s JPEG to ICO converter.
If you need a PNG version of an SVG graphic, use the SVG to PNG converter.
After converting, inspect the result at small sizes. A technically valid file is not necessarily a visually effective favicon.
How to Add a Favicon to an HTML Website
After creating your favicon, upload the file to a location accessible from your website. Then reference it in the page’s HTML <head> section.
For example, if your favicon files are in your website’s root directory, you can use:
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">Replace the filenames with the actual paths to your files. Only include declarations for files that exist and are publicly accessible.
The browser can choose an appropriate icon from the declared options, depending on format support and other selection rules.
If you also want an icon for Apple devices when visitors save your website to their home screen, you can provide a separate touch icon:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">The Apple touch icon serves a different purpose from the regular browser favicon.
How to Add a Favicon in WordPress
If your website uses WordPress, you usually do not need to edit HTML manually.
- Log in to your WordPress dashboard.
- Open Appearance → Customize → Site Identity if your theme provides the Customizer.
- Find the Site Icon setting.
- Upload a suitable square image and save your changes.
The exact location may vary by theme and WordPress configuration. In many WordPress installations, the Site Icon setting accepts an image of at least 512 × 512 pixels and generates the appropriate icon sizes.
If your theme uses the Site Editor instead of the Customizer, check its site identity or branding settings. Avoid adding duplicate favicon tags manually if WordPress or your theme already outputs them.
Common Favicon Problems and How to Fix Them
The favicon does not appear
Check that the file exists at the path specified in your HTML and that it can be opened directly in a browser. Confirm that the filename, extension, and capitalization match the actual file.
The old favicon still appears
Browsers often cache favicons. Try a hard refresh, open the website in a private window, or clear the relevant browser cache. If you use a WordPress caching plugin or CDN, clear its cache too.
The favicon looks blurry
Use a sufficiently large source image and simplify the design. Tiny text, thin lines, and detailed logos may not remain clear when reduced to browser-tab size.
The favicon has an unwanted background
Check whether the original image contains a solid background instead of transparency. Use a suitable transparent PNG or SVG if you need the icon to blend into different interface colors.
The SVG favicon does not display
Verify that the SVG is valid and that the path and MIME type are correct. Test in the browsers you intend to support and provide an ICO or PNG alternative where necessary.
Frequently Asked Questions
Is ICO better than PNG for a favicon?
ICO is useful for compatibility and can contain multiple image sizes in one file. PNG is a simple modern choice for size-specific icons. Both are practical options, and the best choice depends on your website’s requirements.
Can I use SVG as a favicon?
Yes. Modern browsers that support SVG favicons can display an SVG icon. It scales cleanly, but you should test compatibility and retain an alternative format if your audience uses unsupported browsers or platforms.
Can I use a JPG as a favicon?
JPG can be referenced as an image in some browser contexts, but it is usually not the best choice. It does not support transparency, and lossy compression can create artifacts around small, high-contrast shapes. PNG, ICO, or SVG is generally more suitable.
Does a favicon affect SEO?
A favicon is primarily a branding and usability feature rather than a direct ranking factor. A recognizable favicon can help users identify your site, and Google may display a favicon in eligible search results when its requirements are met. A favicon alone does not guarantee improved rankings or search-result display.
Do I need multiple favicon formats?
Not always. A single supported format may be sufficient for a simple site. Providing multiple formats can improve compatibility across browsers, devices, and use cases, particularly if you also need touch icons or web-app icons.
What is the difference between a favicon and an app icon?
A favicon identifies a website in browser interfaces. An app icon can represent an installed mobile app or web app and may require different dimensions and metadata. Some websites use related artwork for both, but the files and implementation requirements can differ.
Final Thoughts
Making a favicon is a small task that helps give your website a more recognizable identity. Start with a simple square design, choose a suitable format, export the required sizes, and test it in your target browsers.
ICO is a dependable compatibility option, PNG is easy to prepare and widely supported, and SVG offers clean scaling where supported. For most websites, choosing a practical combination is more useful than relying on one format for every context.
If you need to prepare your favicon image, try FileNivo’s JPEG to ICO converter or SVG to PNG converter.