Select an image
Upload a logo, symbol or square image in JPG, PNG or WebP format.
Free tool
Free Online Favicon Generator
Upload an image and generate a complete package with favicon.ico, PNG icons, Apple Touch Icon, Android Chrome and site.webmanifest.
★
Upload an image
Choose a square image or logo in JPG, PNG or WebP format.
Supported formats: JPG, PNG and WebP.
Maximum size: 20 MB.
Recommended: square image of at least 512 × 512 px.
How to use the tool
How to create a favicon from an image
SG Hub's favicon generator creates a complete website icon package from a JPG, PNG or WebP image. Everything is processed directly in your browser.
Adjust the framing
Choose whether to show the complete image or fill the entire icon.
Configure background and spacing
Use transparency or a custom color and adjust the inner spacing.
Enter site details
Add the site name, short name and theme color for the manifest.
Generate the package
Download a ZIP with favicon.ico, PNG icons, manifest, sample HTML and supporting files.
What is a favicon?
A favicon is the small icon displayed in browser tabs, bookmarks, shortcuts and some search results.
Although it usually appears at a very small size, it helps users quickly recognize a brand or website.
A complete favicon package includes multiple sizes for different browsers, operating systems and devices.
Files generated by the tool
A file compatible with browsers and traditional website configurations.
A small icon mainly used in tabs and bookmarks.
A higher resolution version for modern browsers and displays.
A 180 × 180 pixel icon for shortcuts on Apple devices.
An icon used by Android browsers and devices.
A high resolution version for installations and web apps.
A file containing the name, colors and icons used by installable web applications.
Additional configuration for Microsoft browsers and tiles.
Which image should you use?
For the best result, use a square image of at least 512 × 512 pixels.
Simple logos with clear shapes and limited detail usually work best at small sizes.
Avoid long text or very thin elements because they may become unreadable at 16 × 16 pixels.
A transparent PNG is ideal when you want to preserve transparency.
Privacy
Private browser generation
The image and files are processed locally. SG Hub does not receive or store the selected logo.
Show the full image or fill the icon
Show complete keeps the entire image visible and may leave space around it. Fill icon covers the full square and may crop parts of the edges.
What inner spacing does
Inner spacing separates the logo from the icon edges. It is useful when the design needs breathing room or when elements should not touch the boundaries.
Transparent or custom background
You can preserve the original transparency or apply a background color. Transparency is maintained in PNG files and inside the generated favicon.ico.
What is site.webmanifest?
The site.webmanifest file contains information about the site name, short name, colors and icons. Browsers can use it when installing a web app or creating a shortcut.
How to install the favicon on your website
- 1Copy the downloaded files into your website public or root folder.
- 2Open the favicon-html.txt file included in the ZIP.
- 3Copy the tags inside your page <head> element.
- 4Make sure the paths match the actual file location.
- 5Clear the browser cache if the previous favicon is still displayed.
Next.js example
In a Next.js project, place the icons and manifest inside the public folder. You can also use the Next.js metadata API to define icons and the manifest.
export const metadata = {
icons: {
icon: [
{ url: "/favicon.ico" },
{
url: "/favicon-32x32.png",
sizes: "32x32",
type: "image/png",
},
{
url: "/favicon-16x16.png",
sizes: "16x16",
type: "image/png",
},
],
apple: "/apple-touch-icon.png",
},
manifest: "/site.webmanifest",
};Common use cases
- Create a favicon for a website.
- Update a website visual identity.
- Prepare icons for a progressive web app.
- Generate an Apple Touch Icon.
- Create mobile shortcut icons.
- Prepare assets for Next.js projects.
- Create a package for WordPress.
- Generate icons for business websites or online stores.
Limitations and recommendations
Images with too much detail may lose clarity at small sizes.
A favicon does not replace a full logo and should use a simplified version.
Browsers may take time to display changes because of caching.
The final appearance may vary slightly by browser and device.
Other tools to prepare your image
Before generating the favicon, you can crop, resize, compress or convert your logo.
Related tools