Already have a logo or image and need to turn it into a favicon? Converting an existing image into a usable website icon involves more than just resizing. You need to consider how the image reads at tiny sizes, which file formats to generate, and how to include multiple sizes for different devices.
This guide walks through the process of creating favicons from existing images — from selecting the right source image to generating a complete set of ICO, PNG, and SVG files.
Choosing the Right Source Image
Not every image makes a good favicon. Here is what works and what does not:
Good Favicon Sources
- Logo marks (icons): Standalone symbols that represent your brand
- Single letters or monograms: First letter of your brand name in a distinctive font
- Simple geometric shapes: Circles, squares, or custom shapes with bold fills
- High-contrast icons: Designs with clear dark/light separation
Poor Favicon Sources
- Full wordmark logos: Text becomes illegible below ~32px
- Photographs: Far too detailed for 16x16px
- Complex illustrations: Fine details are lost at small sizes
- Low-resolution images: Upscaling a blurry image produces a blurry favicon
Image Requirements
| Property | Recommendation |
|---|---|
| Aspect ratio | Square (1:1) |
| Minimum resolution | 512x512px |
| Ideal resolution | 512x512px or larger |
| Background | Transparent (PNG) for best results |
| Color space | sRGB |
If your source image is not square, you will need to either crop it or add padding. Use BestPNG's crop tool to cut it to a 1:1 ratio.
Simplifying Your Design for Small Sizes
The jump from 512px to 16px is dramatic. Details that are clear at full size become invisible at favicon size.
Simplification strategies:
-
Remove text entirely. Even brand names with 3-4 letters become unreadable at 16px.
-
Thicken thin lines. Any line thinner than 2px at 16x16 will disappear or alias badly. Double the stroke weight from your original design.
-
Reduce the color palette. At favicon size, subtle color variations are imperceptible. Stick to 2-3 solid colors maximum.
-
Increase padding. Add some breathing room around your icon. A favicon that bleeds to the very edge of its bounds looks cramped in a browser tab.
-
Test the silhouette. If your favicon is recognizable as a solid black silhouette, it will work at any size.
Step-by-Step: Converting an Image to Favicon with BestPNG
Step 1: Prepare Your Source Image
Start with the best quality version of your logo or icon:
- If you have an SVG, use it — it will produce the sharpest results at all sizes
- If you only have a PNG or JPG, ensure it is at least 512x512px
- If the background is not transparent, use BestPNG's background remover first
Step 2: Generate the Favicon Package
- Go to bestpng.com/tools/favicon
- Upload your prepared image
- Preview the favicon at all target sizes (16x16, 32x32, 180x180, etc.)
- Verify the icon is recognizable at the smallest size
- Generate and download the favicon package
Step 3: Review Each Size
After generation, check each output file:
- 16x16: Is the icon recognizable? This is the most critical size.
- 32x32: Does it look sharp on high-DPI tabs?
- 180x180: Does it look good as an iOS home screen icon?
- 512x512: Is it suitable as a PWA splash icon?
If the 16x16 version is unclear, go back and simplify your source design further.
Step 4: Implement on Your Website
Place the generated files in your website's root directory and add the appropriate HTML meta tags. See our complete favicon guide for the full code snippets.
Creating Multi-Size ICO Files
An ICO file is a container that can hold multiple image sizes. When a browser requests a favicon, it picks the most appropriate size from the ICO file.
Standard sizes to include in an ICO file:
- 16x16px (browser tabs)
- 32x32px (high-DPI tabs, Windows taskbar)
- 48x48px (Windows desktop shortcuts)
BestPNG's favicon generator automatically creates a multi-size ICO file containing all three sizes. This single file covers most desktop use cases.
Creating an SVG Favicon
SVG favicons are the most future-proof approach. A single SVG file scales perfectly to any size, and it can include CSS media queries for dark mode support:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
.icon { fill: #333; }
@media (prefers-color-scheme: dark) {
.icon { fill: #fff; }
}
</style>
<rect class="icon" x="10" y="10" width="80" height="80" rx="15" />
</svg>
This SVG favicon automatically switches between dark and light fills based on the user's system preference. To use it, add the original SVG as your favicon source in BestPNG, or link it directly in your HTML:
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
Converting Logo Formats
From PNG/JPG to Favicon
The most common conversion. Upload your raster logo to BestPNG's favicon generator and it handles the resizing and format conversion automatically.
From SVG to Favicon
If you have a vector logo, this produces the best results. SVG source files retain sharpness at every size. Upload the SVG directly to BestPNG.
From PDF to Favicon
Some designers deliver logos as PDF files. First, extract or screenshot the logo from the PDF, save as PNG, then use BestPNG's favicon generator.
From Figma/Sketch to Favicon
Export your icon from Figma or Sketch as SVG (preferred) or PNG at 512x512px, then upload to BestPNG.
Platform-Specific Considerations
Apple (iOS / macOS)
Apple devices use the Apple Touch Icon (180x180px PNG). Without it, iOS creates an ugly screenshot thumbnail for home screen shortcuts. The icon should:
- Have no transparency (Apple adds its own rounded corners)
- Fill the entire square
- Use a solid or gradient background color
Android
Android Chrome uses the icons specified in the Web App Manifest (192x192px and 512x512px). These should be maskable-safe — meaning the important content is within the inner 80% of the icon, as Android may apply various mask shapes.
Windows
Windows uses the ICO file for taskbar and desktop shortcuts. Ensure your ICO includes 48x48px for the best results on Windows desktops.
Frequently Asked Questions
Can I use an emoji as my favicon? Yes, technically. You can create an SVG favicon that renders an emoji. However, emoji rendering varies across platforms, so the same emoji may look different on different browsers and operating systems.
What if my logo is rectangular, not square? Crop the most recognizable part to a square, or place the full logo on a square canvas with padding. For a text-heavy horizontal logo, consider using just the first letter or logo mark for the favicon.
How do I make my favicon look good in dark mode?
Use an SVG favicon with a CSS prefers-color-scheme media query to switch fill colors. Alternatively, ensure your PNG favicon has enough contrast to be visible on both light and dark backgrounds.
Do I need to update my favicon for every rebrand? Yes. Update your favicon files whenever your brand identity changes. Remember that favicons are aggressively cached, so existing users may not see the change immediately.
What DPI should my favicon be? Favicons are measured in pixels, not DPI. Create the exact pixel dimensions needed (16x16, 32x32, etc.). The browser handles the display scaling.
Conclusion
Converting an existing image or logo into a favicon is simple with the right tool and approach. The key steps are: start with a square, high-quality source image, simplify the design for legibility at 16x16px, and generate all required sizes and formats.
BestPNG's favicon generator handles the entire process — from image upload to a downloadable package containing ICO, PNG, and all standard sizes. No design skills required.