Free Favicon Generator

Draw your favicon pixel by pixel. Preview in a live browser tab mockup. Download a complete favicon package with one click.

100%

Import

Tools

Brush: 1px

Colors

32 x 32

Live Preview

Browser Tab

My Website

Google Search

My Website

mysite.com

16px - Tab

32px - Bookmark

48px - Search

64px - App

Site Name

Export

Icon Library

173+ pixel art icons. Click any icon to load it into the editor and make it yours.

Keyboard Shortcuts

BPencil/Brush

EEraser

GFill (Bucket)

IEyedropper

LLine Tool

RRectangle

CCircle

XSwap Colors

Ctrl+ZUndo

Ctrl+YRedo

[ ]Brush Size

What is a Favicon and Why Does Your Website Need One?

A favicon (short for “favorites icon”) is the small icon that appears in browser tabs, bookmarks, and search results next to your website's name. It's one of the most important yet overlooked branding elements of any website. A well-designed favicon makes your site look professional, helps users find your tab among dozens of open tabs, and reinforces brand recognition.

Every Favicon Size You Need

Modern browsers and devices use favicons at many different sizes. Providing the right sizes ensures your icon looks crisp everywhere:

Size	File	Used By
16x16	favicon-16x16.png	Browser tabs, address bar
32x32	favicon-32x32.png	Bookmark bars, Windows taskbar
48x48	favicon-48x48.png	Windows site shortcuts
180x180	apple-touch-icon.png	iOS home screen, Safari
192x192	android-chrome-192x192.png	Android Chrome home screen
512x512	android-chrome-512x512.png	PWA splash screens, app stores
Multi-size	favicon.ico	Legacy browsers, universal fallback

ICO vs PNG vs SVG Favicons

ICO is the traditional format. It's a container that holds multiple sizes (16x16, 32x32, 48x48) in a single file. It has the widest browser compatibility and is the safest choice for the primary favicon.

PNG favicons are simpler to create and widely supported by modern browsers. You need separate files for each size, but the quality is excellent. Most sites use PNG favicons alongside an ICO fallback.

SVG favicons are scalable and look perfect at any size, but browser support is still limited. They're great for simple geometric designs but can't capture the hand-crafted charm of pixel art.

How to Install Your Favicon

After downloading the favicon package from this tool, follow these steps:

Upload all files to the root directory of your website
Add the HTML snippet (included in the package) to your site's <head> tag
Clear your browser cache and reload to see the new favicon
Test on different devices and browsers to verify it appears correctly

Favicon Design Tips

The best favicons are simple, recognizable, and high-contrast. Since favicons display at just 16x16 pixels in browser tabs, complex designs become unreadable. Stick to 2-4 colors maximum. Many successful favicons are just a single letter or a bold geometric shape. Use this tool's live browser tab preview to see exactly how your favicon will look in context.

Frequently Asked Questions

What sizes do I need for a favicon?

A complete favicon setup includes: 16x16 (browser tabs), 32x32 (browser bookmark bars), 48x48 (Windows site shortcuts), 180x180 (Apple Touch Icon for iOS), 192x192 (Android Chrome), and 512x512 (PWA splash screens). Our favicon package includes all of these automatically.

How do I add a favicon to my website?

Upload the favicon files to your website's root directory, then add the HTML link tags to your <head> section. Our 'Download Favicon Package' button generates all the files you need plus the exact HTML code to paste. It's truly one-click.

What's the difference between ICO and PNG favicons?

ICO is the traditional format that can contain multiple sizes in one file (16x16, 32x32, 48x48). PNG favicons are simpler but require separate files for each size. Modern browsers support both, but ICO has the widest compatibility. Our package includes both formats.

Do I need an Apple Touch Icon?

Yes, if you want your site to look good when saved to an iOS home screen. Without one, Safari will use a screenshot of your page instead of your icon. The Apple Touch Icon should be 180x180 pixels. Our favicon package includes this automatically.

Can I import my existing logo?

Absolutely. Click the 'Import' button and select any image file (PNG, JPG, SVG, etc.). The image will be resized to your canvas dimensions, and you can then refine it pixel by pixel to ensure it looks crisp at small sizes.

What is the web app manifest (site.webmanifest)?

The web app manifest is a JSON file that tells browsers about your web application. It includes your app's name, icons, theme color, and display preferences. It's required for Progressive Web Apps (PWAs) and used by Android Chrome for the home screen icon. Our package includes a pre-configured manifest.

How do I make a favicon for WordPress/Shopify/Squarespace?

Most CMS platforms have a built-in favicon upload option. In WordPress, go to Appearance > Customize > Site Identity. In Shopify, go to Online Store > Themes > Customize > Theme Settings. In Squarespace, go to Design > Browser Icon. Upload the 32x32 or 512x512 PNG from our package.

Pro Tips

Keep It Simple

Favicons display at 16x16px in browser tabs. Complex designs become unreadable. Stick to 2-4 colors max.

Use Symmetry

Enable horizontal mirror mode to create balanced icons fast — most great favicons are symmetrical.

Test Both Backgrounds

Use the dark/light toggle in the preview panel to check your favicon on both backgrounds.

Think Multi-Context

Your favicon appears in tabs, bookmarks, Google results, and home screens. Make sure it reads well everywhere.

Bold Contrast

The most recognizable favicons use strong contrast. A dark icon on light, or light on dark, stands out.