Favicon Generator

What is a favicon?

A favicon is the small icon that represents your website in browser tabs, bookmarks, history and on phone home screens. Google also shows favicons next to your site name in mobile search results, so a clear icon helps your brand stand out. Google explains the requirements in its guide to favicons in search results.

Different devices need different sizes, which is why a modern website uses a small set of icon files rather than one.

What you get

This favicon generator creates everything in one ZIP file:

Plus a ready HTML snippet to paste into your site's <head>.

How to create a favicon

1. From image: upload your logo. A square image of 512 × 512 px or larger works best. Wide logos are center-cropped to a square.
2. From text: type one or two letters, choose colors and a shape (rounded square, circle or square), then click Create.
3. Enter your app name and theme color for the web manifest.
4. Check the previews, then click Download all (ZIP).
5. Upload the files to the root folder of your website and paste the HTML code inside <head>.

On WordPress, you can instead upload a 512 px PNG under Appearance, Customize, Site Identity, Site Icon.

Tips for a great favicon

• Keep it simple. At 16 pixels, detailed logos turn into blurry dots. Use your logo mark or first letter, not the full name.
• Use strong contrast so it stands out on both light and dark browser themes.
• Use a square design. Crop your logo first with the Image Cropper if needed.
• Match your brand colors. Find exact codes with the Color Picker.

The manifest file follows the Web App Manifest standard. Browsers cache favicons heavily, so if you do not see your new icon, open your site in a private window. See all text and developer tools.

The favicon files a modern site needs

This generator creates all of these in one ZIP, plus the HTML code to paste into your <head>.

Favicons in Google Search

Google shows a small favicon next to your site name in mobile and desktop results. According to Google's favicon guidelines, your favicon should:

• Be a square image, at least 48 x 48 pixels (multiples of 48 are recommended).
• Have a stable URL that does not change often.
• Be crawlable, not blocked by robots.txt.
• Represent your brand and be suitable for all audiences.

After adding a new favicon, Google can take days or weeks to update it in search results.

Designing an icon that works at 16 pixels

A full logo with words becomes unreadable at tab size. Instead:

1. Use one letter, initials or a simple symbol from your logo.
2. Choose strong contrast, for example white on your brand colour.
3. Avoid thin lines and fine details; they disappear when scaled down.
4. Test it on a light and a dark browser theme.

The "From text / letter" option in this tool is a quick way to create a clean, readable icon with your brand colour. Pick the exact colour code with the Color Picker.

Installing your favicon

• Static HTML sites: upload the files to your site root and paste the provided code inside <head> on every page.
• WordPress: go to Appearance > Customize > Site Identity > Site Icon and upload the 512 x 512 PNG; WordPress creates the other sizes.
• Shopify, Wix and other builders: look for "Favicon" in the theme or site settings.

After uploading, open your site in a private window to see the new icon, because browsers cache favicons aggressively. You can check that your page links to a favicon with the Meta Tag Checker, and resize a logo first with the Image Resizer if needed.

Troubleshooting a favicon that does not appear

If your new icon is not showing:

1. Clear the cache or open the site in a private window; browsers keep old favicons for a long time.
2. Check the file path. Open https://yourdomain.com/favicon.ico directly; it should show the icon, not a 404 page.
3. Check the HTML. The <link rel="icon"> tags must be inside <head> on every page.
4. Check robots.txt does not block the icon files.
5. Wait for Google. Search results update the favicon only after Google re-crawls your homepage, which can take days or weeks.

Quick favicon checklist

• A simple, square design that is readable at 16 pixels.
• favicon.ico in the root of your domain plus the PNG sizes.
• An Apple touch icon for iPhone home screens.
• A web manifest with your site name and theme colour.
• The provided HTML tags inside the head of every page.
• Icons not blocked by robots.txt, so search engines can fetch them.

Last updated: October 25, 2026