Turn a logo - or just a letter or emoji - into a complete favicon package: a multi-size favicon.ico, an SVG favicon with dark mode, PNG, Apple touch and Android icons. Pick a square, rounded or circle shape, preview it in real browser tabs, then download one ZIP with the HTML code. Only need one ICO? Use PNG to ICO.
Drop your logo hereor click to browse - you can also paste with Ctrl+VPNGJPGSVGWEBPGIFup to 20 MB
Runs in your browser - your image is never uploaded
image.png1024 x 1024
Text or emoji
Font
Emoji look slightly different on Windows, Mac and Android - the PNG and ICO files keep the one you see here.
Choose the area
Drag the square to choose the part of the image to use.
256 x 256
Drag to move, corners to resize
Shape, padding and background
Shape
Uses the whole square - the classic favicon.
None
Adds space around the logo so it does not touch the edges.
Background
With a rounded or circle shape, the corners stay transparent. Apple icons get their own background - see Download package.
12 files + READMEfavicon.ico + PNG + Apple + Android - one ZIP with the HTML code
Upload your logo or type text. Drop a PNG, JPG, SVG, WebP or GIF, paste one with Ctrl+V, or make a favicon from text or an emoji instead. A square image of 512 px or more works best.
Crop and style it. Drag the square to pick the area, or choose Fit or Stretch. Pick a square, rounded or circle shape, and add padding and a background colour if the icon needs breathing room.
Check the preview. See it at 64, 48, 32 and 16 px, in light and dark browser tabs and as a phone home-screen icon.
Pick the package. favicon.ico, favicon.svg with dark mode, PNG favicons, Apple touch icons with their own background, and Android / PWA icons with site.webmanifest - tick what you need.
Download and install. Download the ZIP, upload the files to your site root and paste the HTML code into the head of your pages.
Want rounded corners or a circle behind your logo first? Design it in the Icon Maker, then bring the PNG back here.
Make a favicon from text or an emoji
No logo yet? A single letter or an emoji on a coloured square is one of the most readable favicons there is.
Click No logo? Make one from text or emoji, type up to three characters, and choose the font, colours and shape. The preview updates as you type.
One or two letters read best at 16 px. Three letters work in bold fonts only.
Strong contrast - white on a saturated colour, or dark on a light one.
Emoji are drawn by your system, so they look slightly different on Windows, Mac and Android. The PNG and ICO files keep exactly the one you see.
Text favicons also get a favicon.svg, where the letters stay sharp at any size. For a styled logo with rounded corners, try the Icon Maker.
SVG favicons with dark mode
A dark logo disappears on a dark browser tab. An SVG favicon can fix that, because it can carry its own dark-mode colours.
When you upload an SVG or make a text favicon, tick favicon.svg. Under In dark mode, pick a dark background, invert the logo colours, or both. The dark tab in the live preview shows the result.
Chrome, Firefox and Edge use the SVG and switch automatically. Browsers that do not support SVG favicons use favicon.ico. Only have a PNG logo? Convert it with PNG to SVG first.
What is a favicon.ico file?
A favicon.ico is the small icon a website shows in browser tabs, bookmarks, history and search results. The name comes from "favorite icon" - Internet Explorer 5 introduced it in 1999 for bookmarked pages.
The .ico format can hold several image sizes in one file. A typical favicon.ico contains 16x16, 32x32 and 48x48 px versions, and each browser picks the one it needs.
Modern browsers also accept PNG and SVG favicons, but .ico is still the most compatible option. For a single conversion, try PNG to ICO, JPG to ICO or SVG to ICO.
Favicon sizes - which ones do you need?
Different places use different sizes. Here is every common size, where it shows up and how much it matters.
Size
Where it is used
Format
Priority
16x16
Browser tabs, address bar
ICO / PNG
Essential
32x32
High-DPI tabs, taskbar shortcuts
ICO / PNG
Essential
48x48
Windows site shortcuts
ICO
Recommended
96x96
Google Search results, desktop shortcuts
PNG
Recommended
180x180
Apple touch icon (iPhone and iPad home screen)
PNG
Essential
192x192
Android home screen, Chrome
PNG
Recommended
512x512
PWA splash screen, app install
PNG
Recommended
At minimum you need a favicon.ico with 16 and 32 px inside, plus a 180 px Apple touch icon. The generator above makes all of these at once.
Three formats are used for favicons today. Each has its strengths.
ICO
The original favicon format. Holds several sizes in one file and works in every browser.
Universal support
Many sizes in one file
Larger file
No vector scaling
PNG
Modern and small, with full transparency. One size per file - the standard for Apple and Android icons.
Full transparency
Small files
One size per file
Not in very old IE
SVG
A vector icon that stays sharp at any size and can switch colours for dark mode with CSS.
Sharp at every size
Dark mode support
Older Safari ignores it
Detailed logos get busy
The safest setup combines them: .ico as the fallback, PNG for Apple and Android, and SVG for modern browsers if you have a vector logo. Got one? The SVG to Favicon converter handles it.
How to add a favicon to your website
Two steps: upload the files, then link them from the <head> of every page. This is the full setup for every browser and device.
Clear the cache - browsers keep old favicons for a long time. Press Ctrl+Shift+R or add ?v=2 to the file URL.
Most browsers look for /favicon.ico in your site root even without a link tag. Adding the tags still matters - it is how Apple, Android and Google find the larger icons.
Browser support for favicon formats
Browser
ICO
PNG
SVG
Animated
Chrome
Firefox
Safari
Edge
Opera
The dash means partial support: only recent Safari versions use SVG favicons, so always keep an ICO or PNG fallback.
Favicon troubleshooting
Not showing at all - open https://yoursite.com/favicon.ico directly. If it 404s, the file is in the wrong folder. Also check the link tags sit inside <head>, not <body>.
Old favicon still showing - browsers cache favicons hard. Hard-refresh with Ctrl+Shift+R, open the site in a private window, or add ?v=2 to the icon URLs.
Blurry or pixelated - start from a 512 px or larger image and keep the logo simple. Fine text disappears at 16 px, so use just the symbol or first letter.
Works locally, not live - the files must be publicly readable (644 permissions) and served as image/x-icon or image/png.
White box around a transparent logo - your source is probably a JPG or has a white background. Remove it with the PNG Background Remover and keep Background on Transparent.
Still having trouble? Please contact us and we'll be happy to help!
Where do favicons appear?
Browser tabs
Next to your page title, so visitors spot your site among many open tabs.
Bookmarks
In the bookmarks bar and menu, where an icon is faster to find than a title.
History and new tab
In browser history and the shortcut tiles on the new tab page.
Desktop shortcuts
When someone drags your site to the desktop or pins it to the taskbar.
Search results
Google shows it next to your result. Missing? See the fix guide.
Phone home screens
The Apple touch icon and Android icons act as your app icon when a visitor adds your site.
Frequently Asked Questions
A favicon.ico should hold 16x16, 32x32 and 48x48 px images in one file. That covers browser tabs, bookmarks, high-DPI screens and Windows shortcuts.
A file like that is usually 5-15 KB. The generator above builds exactly that set. To look inside an existing one, use the ICO Analyzer.
A square PNG or SVG of at least 512x512 px with a transparent background gives the cleanest result. Simple logos with bold shapes read best at 16 px.
Yes. Many browsers, feed readers and tools request /favicon.ico from the site root automatically, even without a link tag.
Without it you get 404 errors in your logs and a blank icon in some places. The package here includes both.
No. The Favicon Generator runs entirely in your browser. Your image is cropped, resized and zipped on your own device and never leaves it.
Click No logo? Make one from text or emoji under the upload box, or open the text favicon maker directly. Type one to three letters or pick an emoji, then choose a font, text colour, background and shape.
You also get a favicon.svg, which stays sharp at every size. Emoji look slightly different on Windows, Mac and Android - the PNG and ICO files keep the one you see.
favicon.svg contains a small prefers-color-scheme media query. When the browser or system is in dark mode, it swaps in the dark background you chose and can invert the logo colours, so a dark logo stays visible on dark tabs.
It is available for SVG uploads and text favicons. Browsers without SVG favicon support fall back to favicon.ico automatically. Have a PNG logo? Vectorise it first with PNG to SVG.
Start from a PNG or SVG that already has a transparent background and keep Background set to Transparent.
If your logo sits on a solid colour, remove it first with the PNG Background Remover, then come back.
Google needs a square icon, recommends one larger than 48x48 px, and your home page must be indexed and link the icon in its <head>. It can take days or weeks to update.
The package includes favicon-96x96.png for this. Our complete fix guide covers every other cause.
A favicon is the small icon in browser tabs and bookmarks, 16 to 48 px. An Apple touch icon is a 180x180 px PNG that iPhones and iPads use when someone adds your site to the home screen.
iOS adds its own rounded corners and turns transparency black, so the generator always makes it square with its own solid background - pick it under Apple background. Your regular favicon can stay transparent or round. More in the Apple Touch Icon Generator.
The web app manifest tells Android and Chrome which icons to use when your site is installed or added to the home screen. It points to the 192x192 and 512x512 px Android icons and sets your site name and colours.
Tick Android and PWA in the package options to include it.
Only Firefox animates GIF favicons. Chrome, Safari and Edge show the first frame. For most sites a static icon is the better choice - you can still try it with GIF to ICO.
