Select an image
Upload a logo, symbol or square image in JPG, PNG or WebP format.
Local and private generation
Free Online Favicon Generator
Upload an image and generate a complete package containing favicon.ico, PNG icons, Apple Touch Icon, Android icons, site.webmanifest and installation code.
The image and generated files are processed directly in your browser. Your logo is not sent to SG Hub servers.
★
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 that may appear in browser tabs, bookmarks, shortcuts and some search results. Its final display depends on the browser, search engine and whether the website has been crawled correctly.
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.
Read the Privacy Policy →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.
Frequently asked questions
Questions about the favicon generator
Learn which files are generated, how to install them and how images are processed inside the browser.
How do I create a favicon from an image?
Select a JPG, PNG or WebP image, adjust the background and framing, and download the generated ZIP package.
Which files does the tool generate?
It generates favicon.ico, 16 and 32 pixel favicons, Apple Touch Icon, Android icons, site.webmanifest, browserconfig.xml, sample HTML code and a README file.
What size should the original image be?
A square image of at least 512 × 512 pixels is recommended to preserve good quality across all generated sizes.
Can I use an image with a transparent background?
Yes. Transparency is preserved in PNG files and inside favicon.ico when the transparent background option is selected.
Which image formats are supported?
The tool supports JPG, PNG and WebP files up to 20 MB.
What is favicon.ico?
It is an icon container file used by browsers and traditional website configurations. The generated file includes 16 × 16 and 32 × 32 pixel versions.
What is an Apple Touch Icon?
It is the icon used by Apple devices when a website is saved as a shortcut on the home screen.
What is site.webmanifest?
It is a file that describes the name, short name, colors and icons of an installable web application or shortcut.
Where should I place the files?
They should generally be placed in the website public or root folder. The package includes a file with sample HTML tags to add inside the head element.
Why is my favicon not updating?
Browsers and search engines often cache favicons. You may need to clear the cache, open a private window or wait until the website is crawled again.
Is the image uploaded to a server?
No. The image and all generated files are processed locally inside the browser and are not sent to SG Hub.
Is the tool free?
Yes. You can generate and download the complete favicon package for free.
Related tools