Favicon Generator Favicon online generator
Convert images into website favicon, supporting favicon.ico, Apple Touch Icon and PWA icons.
Built-in square cropping, multi-size generation, ZIP packaging and HTML quote code.
Drag the image here, or Click to upload
Supports PNG · JPG · JPEG · SVG · WebP
Drag the image to move the position and perform square cropping after zooming.
After uploading the image and clicking "Generate Favicon"
Preview and download options will appear here
❓ FAQ FAQ
Frequently asked questions about Favicon and site icons
What is a Favicon? Why does the website need it?
Favicon(Favorites Icon) is a small website icon displayed on browser tabs, bookmarks, history, and other interfaces. It is an important part of a website’s brand identity.
Websites without favicon will appear asBlank or default globe icon, making the website look unprofessional and unfinished. Providing consistent favicon capabilities:
- Strengthen brand recognition — Users will recognize your site at a glance among the many tabs
- Enhance professional image — Make the website look more complete and credible
- Improve user experience — Easier to find in Bookmarks, History and Collections
- Consistent across devices — Both the mobile home screen and desktop applications use the same identification
Favicon is an almost zero-cost, high-return website optimization project that should be set up for any officially launched website.
What is the difference between favicon.ico and PNG Favicon?
The two are different formats of website icons, each with its own history and purpose:
favicon.ico — A time-honored container format that can contain multiple sizes (e.g. 16×16, 32×32, 48×48) within a single file. Supported by all browsers and older systems.
PNG Favicon — Modern format that supports transparency, high-quality scaling, and <link rel="icon"> Specify different sizes.
Recommended practices: Use both. provide favicon.ico Serves older browsers and root requests while serving multi-sized PNGs to modern browsers and devices. The HTML code generated by this tool already contains the best possible combinations.
What is the Apple Touch Icon?
Apple Touch Icon(apple-touch-icon) is an iOS Safari-specific icon that is displayed on the iPhone / iPad home screen when the user "adds the website to the home screen." Standard size is 180×180。
Important features:
- iOS will automatically apply it to the iconRounded corners, gloss and border effects, so the diagram itself should not be pre-rounded.
- Recommendedopaque background, to prevent iOS from filling transparent areas with black
- The content of the illustration shouldCentered with safe margins(approximately 10%) because the system crops the periphery
- Apple devices only use this icon when "adding to the home screen", browser pagination still uses the normal Favicon
In HTML with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> declare.
What is a PWA icon? How is it different from regular Favicon?
PWA（Progressive Web App） is an installable web application. PWA needs to pass site.webmanifest Listing declaration icon, which Google requires must include 192×192 with 512×512 Two sets of illustrations.
Differences from normal Favicon:
- larger size — 512×512 for installation screen and startup screen
- Different ways of announcing — through
manifest.json(or .webmanifest) declaration, not HTML link - More versatile — Installation icon, startup screen, taskbar icon, etc.
- Android Chrome Use 192×192 and 512×512;iOS Ignore manifest icon and still use apple-touch-icon
💡 The ZIP generated by this tool already contains site.webmanifest File, download it and place it directly in the root directory of the website.
How to choose the right Favicon design?
Favicon is extremely small in size (16×16 only has 256 pixels), so special attention needs to be paid when designing:
- Use a simple single shape — When the logo is reduced, the details will be blurred, so a simplified graphic should be used.
- avoid thin lines — Thin lines will disappear at small sizes, and lines should be at least 2px wide
- High contrast color matching — Ensure visibility in both light and dark interfaces
- avoid words — 16×16 Unable to read text, only graphic symbols used
- Make good use of transparent backgrounds — But be aware that some older browsers don’t support it
- Upload high-resolution original image — Recommend at least 512×512, each size generated by tool scaling
💡 Quick check: If the shape is still clearly identifiable after scaling the design down to 16×16, it's a good Favicon design.
Can ICO archives be generated in the browser?
Yes! Use this tool 100% pure front-end technology Assemble ICO binary format on the fly in the browser:
- Use Canvas API to generate PNG images of various sizes
- Pack PNG data of multiple sizes into a standard ICO container (including file header and directory area)
- produced
favicon.icoFully compatible with Windows, macOS and all major browsers
the whole processNo need for any server, the image data will not leave your device, and even unpublished design drafts can be processed with peace of mind.
Are pictures uploaded to the server? Is privacy guaranteed?
Not at all! Favicon Generator is a Pure front-end tools：
- ✅ Images are only processed in your browser, read through FileReader and directly calculated in memory.
- ✅ No image data is uploaded or transferred to external servers
- ✅ No need to register, log in or install any software
- ✅ All generated files (ICO, PNG, ZIP) are downloaded directly to your device
💡 This means that even confidential designs or unpublished brand icons can be processed with this tool with complete confidence.
📖 Complete Guide to Favicon: From ICO to PWA
Learn more about website icon types, formats and best practices
Function introduction
Favicon Generator is a free online icon generation tool launched by ToolHub. It only requiresUpload a picture, you can generate all the Favicon files needed for the website with one click. It supports five input formats: PNG, JPG, JPEG, SVG and WebP. It has built-in square cropping, zooming and moving functions, allowing you to accurately select the best area of the image.
The tool will be automatically generated based on the size you selected. 16×16 to 512×512 A total of 9 sizes of PNG icons, multiple sizes can be assembled at the same time favicon.ico, package ZIP (including site.webmanifest), and automatically generates HTML quote code that can be pasted directly into your website. The entire process is calculated locally in the browser, without uploading any data.
What is Favicon?
Favicon It is the abbreviation of "Favorites Icon" and refers to the mini website logo displayed next to browser tabs, bookmarks, history and address bar. It is the first visual element that users come into contact with the website brand, and it is also a symbol of the completion of the website.
Favicon dates back to 1999 when it was introduced with Internet Explorer 5 favicon.ico concept. Today, Favicon has developed into a complete system covering multiple sizes and formats, covering various scenarios such as desktop browsers, mobile device home screens, PWA installation and operating system integration.
💡 Core concepts: The modern Favicon is not "a file", but a carefully planned combination of icons, using the most suitable size and format for each device and situation.
Apple Touch Icon: iOS-specific brand identity
Apple Touch Icon It is a website icon specifically for iOS and iPadOS. When a user pins a website to their phone's home screen through Safari's "Add to Home Screen" feature, the system loads this icon and displays it as an application icon. Standard size is 180×180。
Different from general Favicon, Apple Touch Icon has the following special considerations:
- Automatic beautification — iOS will automatically add rounded corners and visual effects to icons, so icons should not have rounded corners pre-added
- safe margin — About 10% of the area around the periphery of the image will be cropped or covered by the system, and important content should be centered
- opaque background — iOS will fill the transparent area with black, it is recommended to use opaque or web background color
- declaration of independence — through
<link rel="apple-touch-icon">Announcement, set separately from the normal Favicon
PWA Icon: Icon system that can install applications
Progressive Web App（PWA） through site.webmanifest The manifest file declares application metadata, including the installation icon. Google's installation standards explicitly require 192×192(Homepage icon) and 512×512(Installation and splash screen) Two sets of sizes.
The complete PWA icon settings include:
android-chrome-192x192.png— Android home screen iconandroid-chrome-512x512.png— Android installation and splash screensite.webmanifest— Declare icons, names, theme colors, and display modes
The ZIP package generated by this tool already contains all files, which can be used directly after unzipping and placing them in the root directory of the website.
Favicon best practices
Use high-resolution original images
Recommended to upload At least 512×512 High resolution original image. Reducing from large size to small size will result in better quality; conversely, enlarging from small size will result in blurring. The tool's zoom feature allows you to select the best crop area after zooming in.
Specially designed for small sizes
The 16×16 Favicon only has 256 pixels, and any detail is lost at this size. Make sure the design is legible at very small sizes, using a simplified version for smaller sizes if necessary.
Available in complete size combinations
A complete Favicon package should contain:
favicon.ico(includes 16, 32, 48, etc.) - Root and Old Browsersfavicon-32.png— Modern browser paginationapple-touch-icon.png(180×180) — iOS home screenandroid-chrome-192x192.pngwith512x512.png— PWA
Test all scenarios
After generation, be sure to test various display scenarios: desktop browser paging, mobile browser, adding bookmarks, adding to mobile home screen, PWA installation screen. of this toolInstant preview The function simulates three scenarios of browser pagination, bookmarks and mobile phone home screen, allowing you to confirm the effect before it occurs.
Browser compatibility
This tool is developed based on modern web standards (Canvas API, Blob, FileReader) and is compatible with the latest versions of all major browsers:
- Google Chrome 60+
- Mozilla Firefox 60+
- Apple Safari 14+
- Microsoft Edge 60+
- Opera 60+
It is recommended to use the latest browser version for the best experience.
Privacy protection
ToolHub takes the privacy of your data seriously. Favicon Generator adopts 100% pure front-end architecture: Images are read through the browser's local FileReader and processed through the Canvas API. All operations are completed on your device.No image data will be uploaded to external servers. We will not store, analyze or share any image content you upload, please feel free to use it.