How to Create a Favicon in 3 Simple Steps

A quick guide to making favicons for your website.

Choose input method from three tabs. Image tab uploads your logo. Text tab creates favicon from letters with font selection. Emoji tab uses emoji icons.

Set colors using two pickers. Background color for the base. Text color for the icon or letters. High contrast recommended.

Border radius slider adjusts corner rounding from square to circle.

Preview shows browser tab simulation with 16×16 favicon and grid of all eight sizes.

Copy buttons get HTML code for your website and manifest JSON for apps.

Download buttons for each size or Download All ZIP with complete package including favicons, manifest, and instructions.

How to Make Favicons for Your Website

Create favicons instantly with our free online generator. Choose from three methods: upload an image, type text (1-3 characters), or use an emoji. Customize background and text colors with color pickers. Adjust border radius from square to circle using a slider. Tool generates all 8 standard favicon sizes: 16×16, 32×32, 48×48, 64×64, 128×128, 180×180, 192×192, and 512×512 pixels. Preview your favicon in a simulated browser tab and see all sizes at once. Copy ready-made HTML code for your website. Download individual files or get everything in one ZIP package with installation instructions.

This favicon maker works completely in your browser with total privacy. Perfect for websites, blogs, web apps, online stores, portfolios, and business sites. Create unlimited favicons free.

What Is a Favicon Generator?

A favicon generator creates the small icon that appears in browser tabs, bookmarks, and mobile home screens. This free tool makes all the different sizes you need automatically. You can start with an uploaded image, type some text, or pick an emoji. Customize colors and corner rounding. The tool creates every size from tiny 16×16 pixel browser icons to large 512×512 pixel app icons. You get the HTML code to add to your website and a complete download package ready to use.

Step-by-Step Guide to Create Favicons

Step 1: Pick Your Input Method

Choose how you want to create your favicon.

Click the Image tab to upload your logo or graphic. This works best if you already have a company logo or brand image. Click the button and select your image file, or drag and drop it.

Click the Text tab to create a favicon from letters or numbers. Enter 1 to 3 characters like your initials or company abbreviation. Pick a font from the dropdown menu. Impact font works well for bold text. Arial is clean and simple.

Click the Emoji tab to use an emoji as your favicon. Type or paste any emoji like a rocket, heart, or palette. This creates a fun, colorful favicon perfect for personal sites.

Switch between tabs anytime to try different options and see what looks best.

Step 2: Choose Your Colors

Set the background and foreground colors for your favicon.

For background color, click the colored square to open a color picker, or type a hex code directly into the text box. Use your brand colors to match your website theme. Blue creates a professional look. Black is elegant and modern. White is clean and minimal.

For text or icon color, use the second color picker. Make sure there’s strong contrast so your favicon is easy to see. White text on dark backgrounds works well. Dark text on light backgrounds is also clear. Test that your design looks good at small sizes.

The color pickers update your favicon preview instantly so you can see changes right away.

Step 3: Adjust Border Radius

Use the slider to round the corners of your favicon.

Move the slider from 0 to 50 percent. Zero gives you sharp square corners for a traditional look. The default 20 percent adds subtle rounding that looks modern but professional. Move it all the way to 50 percent to make a perfect circle, which looks like a mobile app icon.

Check the browser tab preview to see how different corner styles look at actual size. Match the style to your website design.

Step 4: Preview All Sizes

Look at how your favicon appears at every size.

The browser tab preview at the top shows exactly how your 16×16 pixel favicon will look in a real browser tab next to your page title. This is the most important size since people see it most often.

Below that, you’ll see eight preview boxes showing all the sizes: 16×16 for browser tabs, 32×32 for standard displays, 48×48 for Windows, 64×64 for high resolution, 128×128 for Chrome, 180×180 for Apple devices, 192×192 for Android, and 512×512 for high-quality Android icons.

Make sure your design is clear and recognizable at the smallest 16×16 size. If details get lost, simplify your design or increase contrast.

Step 5: Copy HTML Code

Get the code to add favicons to your website.

Scroll down to the HTML Code section. You’ll see a dark box with all the code you need. This tells browsers where to find your favicon files and which sizes to use.

Click the Copy HTML Code button to copy everything to your clipboard. Then open your website’s HTML file and find the head section between the opening and closing head tags. Paste the code there. Save your file.

The code includes links for the classic favicon, modern PNG files, Apple touch icons, and the manifest file for web apps.

Step 6: Copy Manifest File

Get the manifest JSON for progressive web apps.

Below the HTML code is the manifest JSON section. This file enables features like installing your site as an app on Android phones. The tool automatically fills in your chosen colors as the theme colors.

Click Copy Manifest to copy the code. Create a new file called manifest.json on your computer. Paste the code and change “Your App Name” to your actual website or app name. Save the file. You’ll upload this to your website along with the favicon images.

Even if you’re not making a progressive web app right now, it’s good to include this file for future compatibility.

Step 7: Download Your Favicons

Get all your favicon files to use on your website.

You can download files individually by clicking the eight download buttons. Each button downloads one specific size. This is helpful if you only need to update one size or want to test specific files.

For most people, click the big Download All as ZIP button. This gives you one compressed folder containing all eight favicon images, the manifest JSON file, and a README text file with installation instructions.

Extract the ZIP file on your computer. You’ll see all the favicon files with their correct names. These names are important – don’t rename them because browsers expect these exact filenames.

Step 8: Upload Files to Your Website

Put the favicon files on your web server.

Upload all the favicon images to the root directory of your website. The root directory is the main folder where your index or home page lives. Don’t put them in a subfolder – they need to be at the top level so browsers can find them easily.

Also upload the manifest.json file to the same root directory.

If you use a website builder or content management system, look for a file manager or media uploader. Upload to the main site folder, not inside images or assets folders.

Step 9: Test Your Favicon

Check that your favicon appears correctly.

Open your website in a browser and look at the tab. You should see your favicon next to the page title. If you don’t see it right away, try refreshing the page by pressing Ctrl and F5 together on Windows, or Command and Shift and R on Mac. This clears the cache and forces the browser to load the new favicon.

Check on different devices too. Look at your site on your phone to see the larger icons. Add your site to your phone’s home screen to test the app icons.

Browsers can take a few hours to update favicons due to caching, so be patient if it doesn’t appear immediately.

Step 10: Troubleshoot If Needed

Fix common favicon problems.

If your favicon doesn’t show up, first check that you uploaded all files to the root directory, not a subfolder. Verify the HTML code is in the head section of your page. Make sure the file names exactly match what’s in the code.

Clear your browser cache and cookies, then reload the page. Try viewing your site in a private or incognito browser window. Check that your file permissions allow the server to read the favicon files.

Test in multiple browsers since they cache favicons differently. Chrome, Firefox, Safari, and Edge should all show your favicon once it’s properly installed.

Favicon Creation Tips

Keep your design simple and bold. Complex details disappear at small sizes. Use high contrast between background and foreground. Test at the smallest 16×16 size first.

Choose colors that match your brand but ensure visibility. Your favicon needs to work on both light and dark browser interfaces. Avoid very light colors on white or very dark colors on black.

For text-based favicons, use 1-2 characters maximum. Three characters can get cramped. Bold fonts like Impact work better than thin fonts at small sizes.

Square images work best. The tool will center and fit your image, but starting with a square design gives you more control. Use PNG or JPG files with transparent or solid backgrounds.

Common Uses

Websites and blogs use favicons for brand recognition in browser tabs and bookmarks. Online stores need favicons to look professional and trustworthy. Portfolio sites use favicons to reinforce personal branding.

Web apps and progressive web apps need the full icon set for installation on mobile devices. Business websites use favicons as part of their professional web presence. Landing pages benefit from branded favicons for marketing campaigns.

Frequently Asked Questions

What size should a favicon be? Modern websites need multiple sizes. The smallest is 16×16 pixels for browser tabs. The largest is 512×512 pixels for high-resolution Android icons. This tool creates all eight standard sizes automatically.

How do I add a favicon to my website? Upload the favicon files to your website’s root directory. Copy the HTML code from the tool and paste it into the head section of your HTML. Save and upload your HTML file. Clear your browser cache to see the new favicon.

What file format is best for favicons? Use PNG files for modern browsers and ICO files for older browser support. This tool generates both. PNG files offer better quality and transparency support.

Can I use a logo as a favicon? Yes. Upload your logo image using the Image tab. The tool will resize it to all the necessary dimensions. Make sure your logo is recognizable at small sizes.

Why is my favicon not showing? Common causes are files in the wrong folder, cached old favicon, or incorrect HTML code. Upload files to the root directory, clear your browser cache, and verify the code is in your head section.

Do I need all those different sizes? Yes. Different devices and platforms use different sizes. Browser tabs use 16×16, Apple devices use 180×180, and Android uses 192×192 and 512×512. Providing all sizes ensures your favicon looks good everywhere.

Can I use text instead of an image? Absolutely. Click the Text tab, enter your letters or initials, choose a font, and set your colors. Text-based favicons are simple, professional, and don’t require a logo file.

What is manifest.json? The manifest file enables progressive web app features. It lets Android users install your website as an app on their home screen. Include it even for regular websites for better mobile support.

Are these favicons free to use? Yes. All favicons you create with this tool are yours to use for any purpose, commercial or personal, with no restrictions.

How do I make a circular favicon? Move the border radius slider all the way to 50 percent. This creates a perfect circle. You can also use any percentage between 0 and 50 for different amounts of rounding.

Why Use This Favicon Generator

Creates all eight standard sizes automatically. Upload an image once and get every size you need from 16×16 to 512×512 pixels.

Three input methods give you flexibility. Use an existing logo, create a text-based design, or pick an emoji. Choose the method that works best for your project.

Full color customization lets you match your brand. Set background and foreground colors using color pickers or hex codes. Adjust border radius for modern or classic styling.

Live preview shows exactly how your favicon will look in browser tabs and at every size. No surprises after downloading.

Ready-made HTML code and manifest JSON save time. Just copy and paste the provided code into your website. No need to write it yourself or look up the correct format.

Complete download package includes everything. Get all favicon files, manifest, and installation instructions in one ZIP file. Upload and go.

Works entirely in your browser. Your images and designs never upload to a server. Complete privacy and fast generation.

Free with no limits. Create as many favicons as you need for all your websites and projects. No registration, subscriptions, or hidden costs.