Upload an image or enter text to generate favicons in all sizes — ICO, PNG, Apple Touch Icon. Free, no server upload.
Click to upload or drag & drop
Recommended: square image, 512×512px+
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
A favicon (short for "favourite icon") is the small icon that appears in browser tabs, bookmarks, history lists, and increasingly in search engine results. Despite its tiny size — often as small as 16×16 pixels — the favicon is one of the most important brand touchpoints on your website. It is visible every time a user has your site open in a tab, giving your brand constant visual presence throughout every browsing session.
Modern websites need multiple favicon sizes to cover all use cases. The classic favicon.ico contains 16×16 and 32×32 pixel versions for legacy browser compatibility. The 180×180 Apple Touch Icon is used when users add your site to their iOS home screen. Android Chrome uses 192×192 and 512×512 PNG favicons for home screen and splash screen display. Windows tiles use 150×150 or 310×310 images. For the best coverage, generate all sizes and reference them in your HTML <head>.
The .ico format is a Windows-native format that can contain multiple image sizes in a single file. It has the broadest legacy browser compatibility and should always be included. PNG favicons offer better quality and full alpha transparency but require separate files per size. SVG favicons — referenced with <link rel="icon" type="image/svg+xml"> — are supported in modern browsers and scale perfectly to any size without quality loss, but lack ICO compatibility for older browsers. The best approach is to provide both: an SVG for modern browsers and an ICO as fallback.
Most logos do not work well as favicons at small sizes. Complex wordmarks, detailed illustrations, and logos with thin lines all become illegible when compressed to 16 or 32 pixels. The best approach is to create a dedicated favicon version of your brand mark — typically just the first letter of your brand name, a simplified icon element, or a distinctive geometric shape — in a square format with sufficient padding around the edges. Use high contrast between the icon and background to maximise legibility in both light and dark browser themes.
With the widespread adoption of dark mode, a favicon that looks great on a white background may disappear against a dark browser tab. SVG favicons can use CSS media queries with prefers-color-scheme to switch between light and dark variants automatically. For PNG and ICO favicons, choose an icon design that remains legible on both light and dark backgrounds — typically by avoiding pure white or pure black as the only colours.
Place your generated favicon files in your website's root directory. Add the HTML link tags to every page's <head> section — or once in a shared layout template if you use a CMS or framework. After deploying, force-refresh your browser with Ctrl+Shift+R (or Cmd+Shift+R on Mac) to bypass the cached favicon. Favicons are aggressively cached by browsers, so new favicons may not appear for returning visitors until the cache expires — typically 1–7 days depending on cache headers.
If your website is or will become a Progressive Web App (PWA), you also need a manifest.json file referencing your icons at 192×192 and 512×512. The manifest enables "Add to Home Screen" functionality on Android and controls how your app appears on the device home screen and in the Android app switcher. Our generator produces both required PWA icon sizes ready for use in your web app manifest.