What exactly is a favicon?

A favicon is the small icon of a website. Browsers show it in tabs, bookmarks and history, and search engines show it next to your result. It is usually a few small files, such as favicon.ico, an SVG and PNG icons for phones.

How can I create my own favicon?

Use a favicon generator like this one. Type one to three letters, pick an emoji or upload your logo, choose the colours and a shape, then download the zip. Put the files in the root folder of your site and paste the link tags into the head.

How can I turn an image into a favicon?

Upload the image in Image mode. The tool crops it to a square from the centre, adds padding and exports it as favicon.ico, an SVG and PNG icons. Use a simple square logo mark, because detail is lost at 16 pixels.

What size should a favicon be?

Use a 32 by 32 pixel favicon.ico with 16 and 48 pixel sizes inside, an SVG for modern browsers, a 180 by 180 Apple touch icon and 192 and 512 pixel PNG icons for Android. For Google search, use a square icon of at least 48 by 48 pixels.

Do I still need favicon.ico?

Yes. Many tools and some browsers still ask for /favicon.ico at the root of your site, and it is a safe fallback when the SVG is not supported. One small ICO file with 16, 32 and 48 pixel images is enough.

Where can I get a free favicon?

You can make one here for free, with no sign-up and no watermark. The files are made in your browser, and your logo is not uploaded to any server.

All free tools

Favicon generator: SVG, ICO and app icons

Make a favicon from letters, an emoji or your logo, and download the full set in one zip: favicon.ico, a dark mode favicon.svg, the Apple touch icon, Android icons and the web manifest. Everything runs in your browser.

Source

Letters (1 to 3)

Weight

Background shape

Background

Foreground

Padding10 %

Dark mode colours in favicon.svg

Dark background

Dark foreground

8 files: favicon.svg, favicon.ico (16, 32, 48), apple-touch-icon.png, icon-192.png, icon-512.png, icon-mask-512.png, site.webmanifest and snippet.html. Made on this device.

Preview

Your app · Landing page

Browser tab, light theme, 16 px real size and 2x zoom

Your app · Landing page

Browser tab, dark theme, 16 px real size and 2x zoom

Your app

iOS home screen (apple-touch-icon)

Your app

Android, maskable icon in a circle

Paste into <head>

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4F46E5">

Single files

How to use it

01Choose text, emoji or image as the source of your icon.
02Pick a background shape, the colours and the padding.
03Set the dark mode colours that the SVG favicon uses in dark browser themes.
04Download the zip and put all the files in the root folder of your site.
05Paste the five lines of the snippet into the head of every page.

What is a favicon?

A favicon is the small icon that a browser shows next to the page title in a tab, in bookmarks and in history. Search engines and phones also use it, so one image becomes your brand mark in many places.

The name comes from favourites, the old name for bookmarks. Today a complete favicon is a small set of files, because each place asks for a different size or format.

Which favicon files do you need in 2026?

Most sites need five files and one manifest: favicon.ico, favicon.svg, apple-touch-icon.png, and two PNG icons for Android and installed web apps. This generator also adds a maskable icon, so Android can crop your icon to its own shape without cutting your logo.

You do not need dozens of sizes. Browsers scale the closest file, and the SVG stays sharp at every size.

The favicon set this tool makes, and where each file is used.
File	Size	Used by	Required?
favicon.ico	32 x 32 (with 16 and 48 inside)	Older browsers, tools that ask for /favicon.ico, Google search	Yes
favicon.svg	Vector	Modern Chrome, Edge and Firefox tabs	Recommended
apple-touch-icon.png	180 x 180, no transparency	iPhone and iPad home screen, Safari	Yes
icon-192.png	192 x 192	Android home screen, web app manifest	Recommended
icon-512.png	512 x 512	Install screens and splash screens of web apps	Recommended
icon-mask-512.png	512 x 512, maskable	Android adaptive icon shapes	Optional

As of October 2026 · Source: Browser documentation and the Google Search Central favicon guidelines

How does a dark mode SVG favicon work?

An SVG favicon can carry a style block with a prefers-color-scheme media query, so the icon changes colour when the browser uses a dark theme. A dark letter that disappears on a dark tab can turn light without a second file.

Chrome, Edge and Firefox support SVG favicons. Safari uses a different set of icons for tabs, so keep favicon.ico and the Apple touch icon as fallbacks. The PNG and ICO files have no dark mode, so pick light colours that also read on a dark background.

How do I turn my logo into a favicon?

Choose Image, then drop a square logo mark, not the full wordmark. Text in a wide logo becomes unreadable at 16 pixels. Use the symbol alone, add some padding, and check the 16 pixel preview in the tab strip.

A simple shape with strong contrast works best. If your mark has thin lines, try a solid background shape so it stands out in both light and dark tabs.

Why is my favicon not showing?

In most cases the browser still shows a cached copy. Browsers keep favicons for a long time, so open the page in a private window or clear the cache to see the new one.

Next, check the paths. Open each file URL, such as yoursite.com/favicon.ico, and make sure it loads. The link tags must sit in the head and point to the right place. In search results, Google shows the new favicon only after it crawls your home page again, which can take days or weeks.

Questions

What exactly is a favicon?: A favicon is the small icon of a website. Browsers show it in tabs, bookmarks and history, and search engines show it next to your result. It is usually a few small files, such as favicon.ico, an SVG and PNG icons for phones.
How can I create my own favicon?: Use a favicon generator like this one. Type one to three letters, pick an emoji or upload your logo, choose the colours and a shape, then download the zip. Put the files in the root folder of your site and paste the link tags into the head.
How can I turn an image into a favicon?: Upload the image in Image mode. The tool crops it to a square from the centre, adds padding and exports it as favicon.ico, an SVG and PNG icons. Use a simple square logo mark, because detail is lost at 16 pixels.
What size should a favicon be?: Use a 32 by 32 pixel favicon.ico with 16 and 48 pixel sizes inside, an SVG for modern browsers, a 180 by 180 Apple touch icon and 192 and 512 pixel PNG icons for Android. For Google search, use a square icon of at least 48 by 48 pixels.
Do I still need favicon.ico?: Yes. Many tools and some browsers still ask for /favicon.ico at the root of your site, and it is a safe fallback when the SVG is not supported. One small ICO file with 16, 32 and 48 pixel images is enough.
Where can I get a free favicon?: You can make one here for free, with no sign-up and no watermark. The files are made in your browser, and your logo is not uploaded to any server.

Your favicon, already on your new landing page

BlockSnap builds your SaaS landing page from proven sections, with your brand colours, your favicon and the head tags ready to publish.

Get early access