Favicon generator
Type your brand name or initials, pick a color, and download every size a site needs: PNGs, a ready favicon.ico and the HTML snippet. Everything renders in your browser; nothing is uploaded.
Paste this in your <head>
Drop the downloaded files in your site root, then add these tags. The zip includes this snippet as snippet.html.
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Compose a real logo for your brand from hand-curated original marks: clean SVG, favicon, avatar, palette and type pairing. Free to design, $39 once for the files.
Favicon sizes, explained
Browsers, operating systems and phones each ask for a different size, and shipping only one big image means everything else gets scaled badly. This is where each file shows up:
| Size | File | Where it is used |
|---|---|---|
| 16x16 | favicon-16x16.png | Standard browser tab, bookmark bar, history list |
| 32x32 | favicon-32x32.png | Tabs on high-density screens, Windows taskbar pins |
| 48x48 | inside favicon.ico | Windows desktop shortcuts and older Explorer views |
| 64x64 | favicon-64x64.png | High-resolution shortcut and app-switcher contexts |
| 180x180 | apple-touch-icon.png | iOS and iPadOS home screen icon |
| 192 / 512 | manifest icons | Android and PWA install icons, declared in the web app manifest |
The 16 pixel version is the one people see most, so judge your favicon there first. One or two bold letters on a solid color reads clearly; a shrunken full logo rarely does. That is also why the good logo marks are drawn to survive 16 pixels from the start. For the full breakdown, including the modern three-tag head setup and the mistakes that make favicons blurry, read the complete favicon size guide.
Common questions
What sizes does a favicon need?
Two PNGs cover almost everything in a browser: 16x16 for standard tabs and 32x32 for high-density screens. Add a 48x48 inside favicon.ico for Windows shortcuts and a 180x180 apple-touch-icon.png for iOS home screens. Progressive web apps also want 192x192 and 512x512 icons declared in the manifest.
Should I use ICO, PNG or SVG for my favicon?
PNG is the safe default and every modern browser reads it. Keep a favicon.ico as well because older agents and some crawlers still request /favicon.ico directly. SVG favicons are supported in most modern browsers and scale perfectly, but Safari support has lagged, so ship PNG alongside if you use one.
How do I add a favicon to my website?
Put the files in your site root and add link tags in the head of every page: rel="icon" for the PNGs and favicon.ico, and rel="apple-touch-icon" for the 180x180 PNG. This page gives you the exact snippet to paste.
Why does my favicon look blurry?
Usually because a large logo was scaled down to 16 pixels. At that size fine detail turns to mush. Favicons work best as one or two bold letters or a single simple shape with strong contrast, which is exactly what this generator produces.
Is this favicon generator really free?
Yes. It runs entirely in your browser with canvas: nothing is uploaded, there is no signup and no watermark. LogoRay makes money when people want a full logo and brand kit, which is a separate, optional step.