A favicon (short for "favorite icon") is a small icon associated with a website. It appears in browser tabs, bookmark lists, browser history, and search results. Favicons help users quickly identify your website among multiple open tabs and bookmarks. Most modern browsers support multiple favicon sizes for different contexts — from tiny 16×16 pixel tab icons to large 512×512 pixel icons used by Progressive Web Apps (PWAs) for home screen shortcuts and splash screens.

What sizes do I need for a favicon?

For comprehensive cross-browser and cross-device support, you need: 16×16 (standard tab icon), 32×32 (HiDPI tab icon), 48×48 (Windows site icon), 180×180 (Apple Touch Icon), 192×192 (Android Chrome icon), and 512×512 (PWA install icon). PNGtoFavicon generates all of these automatically from a single PNG upload, plus a multi-size favicon.ico file.

How do I add a favicon to my website?

After downloading your favicon package from PNGtoFavicon, extract the ZIP file to your website's root directory and add the provided HTML link tags inside your section. PNGtoFavicon generates the exact HTML code snippet you need, ready to copy and paste.

Is my image uploaded to a server?

No — your image never leaves your browser. PNGtoFavicon processes everything 100% client-side using JavaScript and the HTML5 Canvas API. No data is sent to any server, making this the most private favicon generator available.

What file formats are supported for input?

PNGtoFavicon accepts PNG (recommended, supports transparency), JPG/JPEG, SVG (vector format), WEBP (modern format), and GIF. For best results, use a square PNG image of at least 512×512 pixels with a transparent background.

Can I use this tool on mobile?

Yes! PNGtoFavicon is fully responsive and works on any device with a modern web browser — including smartphones and tablets. You can upload images, configure options, and download your complete favicon package right from your mobile device.

What is the difference between .ico and .png favicons?

The .ico format is a legacy container that can hold multiple icon sizes in a single file, required for compatibility with older browsers. Modern browsers prefer individual .png files specified with link tags, offering better quality and smaller file sizes. PNGtoFavicon generates both formats.

What is site.webmanifest and do I need it?

The site.webmanifest is a JSON file that tells browsers about your web application — including its name, theme color, and icon references. It's essential for Progressive Web App (PWA) functionality and improves compatibility with Android Chrome and other modern browsers.

How to Add a Favicon to WordPress (2026 Tutorial)

Adding a favicon to WordPress is handled through WordPress's built-in Site Icon feature. You do not normally need to create a favicon.ico file, edit your theme files, or install a favicon plugin. In WordPress, the favicon is called a Site Icon. You can add one from General Settings on WordPress 6.5 and later. Older WordPress versions use the Customizer, while block themes can also manage the icon through the Site Logo block.

Before starting, prepare a square image that is at least 512 × 512 pixels. WordPress recommends PNG for the Site Icon.

What Is a WordPress Favicon?

A favicon is the small image associated with a website. Browsers can display it beside the page title in browser tabs, bookmarks, the address bar, browser history, and other browser interfaces. It can also be used as an application icon on some devices. WordPress calls this image a Site Icon.

The Site Icon and Site Logo are not necessarily the same thing:

Site Icon: The small icon used to identify your website in browser interfaces and other supported locations.
Site Logo: The larger brand image displayed as part of your website's design, such as in the header.

You can use the same image for both, but you do not have to. WordPress specifically supports using a Site Logo image as the Site Icon in block themes.

What Should You Prepare Before Adding a Favicon to WordPress?

Prepare the image before opening your WordPress settings.

Use a square image: WordPress requires the Site Icon image to be square and at least 512 × 512 pixels. A square canvas also makes sense visually because browsers display favicons as small square icons.
Use PNG when possible: WordPress recommends PNG for the Site Icon. PNG works particularly well for logos, symbols, initials, and graphics that need clean edges or transparency.
Keep the design simple: A favicon is displayed at a very small size. A detailed logo may look good at 500 pixels but become unreadable when reduced to a browser icon. Avoid long text, small lettering, thin lines, complicated illustrations, and too many visual elements. A simple symbol, initial, or recognizable brand mark usually works better.
Use strong contrast: Make sure the main element of the icon remains visible against its background. For example, dark text on a dark background can become difficult to recognize when the icon is reduced.
Start with a high-quality image: Do not enlarge a very small image and expect it to produce a sharp favicon. Start with clean artwork and then prepare the square version you need for WordPress.
Do not assume your Site Logo is automatically the best favicon: A full business logo may work well in a website header but poorly as a favicon. For example, a horizontal logo containing a symbol plus a long company name may become unreadable when reduced. In that case, use the symbol or a short monogram instead.

How Do You Add a Favicon to WordPress?

For WordPress 6.5 and later, WordPress moved the Site Icon setting to General Settings. This is the primary method to use on current WordPress installations.

Log in to your WordPress dashboard: Open your WordPress admin area and sign in. You need administrator-level access or sufficient permissions to change the site's settings.
Open General Settings: From the WordPress dashboard, open Settings → General.
Find the Site Icon setting: Look for the Site Icon section. You should see an option labeled Choose a Site Icon.
Upload or select your favicon: Click Choose a Site Icon. WordPress will let you select an image from your Media Library or upload the prepared image. Choose your square favicon image (at least 512 × 512 pixels, PNG recommended).
Confirm the image: After selecting the image, check the preview carefully. Make sure the correct image is selected, the important part of your design is visible, the icon is not unnecessarily complicated, and the image is square. If the image contains a logo with very small text, consider preparing a simplified version before using it as the Site Icon.
Save the Site Icon: Save the General Settings changes. The Site Icon is now associated with your WordPress website.
Open the live website: Open your website in a new browser tab. Check the icon beside the page title. Do not judge the result only from the WordPress admin screen. The real test is the published website in a browser.

Where Is the Favicon Setting in WordPress?

The location depends primarily on your WordPress version and theme setup.

Where Is the Favicon Setting in WordPress 6.5 and Later?

For WordPress 6.5 and later, use:

WordPress admin → Settings → General → Site Icon

WordPress moved the Site Icon from the Customizer to General Settings in WordPress 6.5. This is the current standard route.

Where Was the Favicon Setting in Older WordPress Versions?

In WordPress versions 4.3 through 6.4, the Site Icon was managed through the Customizer:

WordPress admin → Appearance → Customize → Site Identity → Site Icon

You then selected or uploaded a square image of at least 512 × 512 pixels. This explains why older WordPress tutorials may show a different navigation path. If your dashboard does not match those instructions, first check your WordPress version before assuming the feature has disappeared.

Where Is the Favicon Setting in a Block Theme?

Block themes provide another workflow through the Site Editor. The Site Logo block includes a Use as site icon option. When enabled, the image assigned to the Site Logo block is also used as the Site Icon. This is especially relevant when you're working with a modern block theme and spending most of your time in Appearance → Editor.

How Do You Add a Favicon With a WordPress Block Theme?

A block theme can manage the Site Icon through the Site Logo block.

Open Appearance → Editor: From your WordPress dashboard, go to Appearance → Editor. This opens the WordPress Site Editor for a block theme.
Find or add the Site Logo block: Your theme may already have a Site Logo block in its header. Select it. If one does not exist, add a Site Logo block through the block inserter. WordPress's documentation explains that the block can be inserted into templates in the Site Editor.
Add your image: Select the Site Logo block and upload an image or choose one from the Media Library.
Open the block settings: With the Site Logo block selected, open the settings sidebar. Look for the Use as site icon option.
Enable "Use as site icon": Turn on Use as site icon. WordPress will use that image as the Site Icon.
Save your changes: Save the changes in the Site Editor, then open the live website and check the browser tab.

The Site Logo and Site Icon can also be different. WordPress documents a Site Logo workflow where the logo can be used to initially set the icon and then a different Site Icon can be selected afterward.

How Do You Create a Favicon for WordPress?

You have several ways to create the image before uploading it.

How Do You Create a Favicon From Your Logo?

Start with your existing brand logo. If the logo is already a simple square symbol, you may only need to resize and export it. If the logo is horizontal, simplify it first. Remove unnecessary text or use the most recognizable part of the logo. Do not translate the logo or alter the brand name as part of the favicon creation process. Preserve the original brand identity while adapting the artwork to a small square format.

How Do You Create a Favicon From Initials or Text?

A favicon can use one or two letters instead of a full logo. For example, a company called North Star Digital could use NS rather than trying to fit the complete name into the icon. Use large, readable characters with enough contrast.

How Do You Convert a PNG Into a Favicon?

If you already have a PNG image, you can use a favicon conversion tool to prepare a favicon version. For example, PNGtoFavicon.com can convert an existing PNG into favicon artwork. This is useful when you already have a suitable logo or icon but need to prepare a favicon version before uploading it to WordPress. After conversion, check the resulting image at a small size before using it as your Site Icon.

The important WordPress requirement is still the same: the image should be square and at least 512 × 512 pixels.

What Size Should a WordPress Favicon Be?

WordPress requires a Site Icon to be square, at least 512 × 512 pixels, and recommends PNG format. These are WordPress's current documented requirements.

Do not confuse the size of the image you upload with the size at which the browser ultimately displays the favicon. A browser can display the icon at a much smaller size than the original uploaded image. That is why starting with a sufficiently large, clean image is important.

How Do You Check if Your WordPress Favicon Is Working?

After saving the Site Icon, check the live website.

Check the browser tab: Open your website and look at the browser tab. The Site Icon should appear beside the page title. This is the easiest way to confirm that the favicon is being served by your website.
Check a bookmark: Bookmark the website and check whether the icon appears beside the bookmark. Favicons can also be used in browser history and other browser interfaces.
Test the site in a private or incognito window: If your old favicon is still visible, open the website in a private or incognito window. This gives you a cleaner test because your normal browser session may still have the previous favicon cached.
Test another browser: Open the website in a second browser. If the new favicon appears there but not in your primary browser, the WordPress setting may already be correct and the remaining issue may be browser caching.
Check the live domain: Make sure you are visiting the correct published domain. Do not accidentally test a staging website, a development installation, an old domain, or a different WordPress installation.

Why Is My WordPress Favicon Not Showing?

A missing favicon does not automatically mean the Site Icon upload failed. Several different issues can cause the same result.

Browser cache

Problem: Your browser continues displaying the previous icon.
Fix: Open the website in a private or incognito window. If the new icon appears there, the Site Icon is likely working. You can also clear the browser cache and restart the browser.

The Site Icon was not saved

Problem: You selected the image but did not save the setting.
Fix: Return to the Site Icon settings, confirm the correct image is selected, and save the changes.

You are checking the wrong website

Problem: The favicon has not changed because you edited a different WordPress installation or domain.
Fix: Confirm the domain you're editing and the domain you're testing.

The image does not meet WordPress's requirements

Problem: The image is not square or is below 512 × 512 pixels.
Fix: Prepare a square image with dimensions of at least 512 × 512 pixels. PNG is the recommended format.

The favicon was changed recently

Problem: WordPress has the new Site Icon, but the browser still displays the previous version.
Fix: Test in another browser or private window before changing the Site Icon again.

Your block theme is using the Site Logo workflow

Problem: You expected to find a traditional Site Icon setting but your theme primarily uses the Site Logo block.
Fix: Go to Appearance → Editor, select the Site Logo block, and check Use as site icon.

A caching plugin is serving an older version

Problem: Your WordPress site uses a caching plugin that has not yet regenerated its cached output.
Fix: Purge the cache from the caching plugin and then test the website again. (This only applies when a caching system is actually being used.)

A CDN or server cache is involved

Problem: The browser continues receiving an older version of the site's assets.
Fix: Purge the relevant CDN or server cache if your hosting setup uses one, then test again in a private window.

How Do You Clear WordPress or Browser Cache After Changing a Favicon?

Caching should be checked only after confirming that the Site Icon was actually saved. Use this sequence:

Confirm the Site Icon is correct in WordPress.
Save the change.
Purge your WordPress caching plugin cache, if one is installed.
Purge your CDN cache, if your website uses a CDN.
Open the website in a private or incognito window.
Test the website in another browser.
Check the favicon in the browser tab.

This separates the WordPress configuration issue from the caching issue. Do not repeatedly replace the favicon simply because your browser continues showing the previous image.

How Do You Change or Replace a WordPress Favicon?

Replacing a Site Icon is similar to adding one.

For WordPress 6.5 and later

Log in to WordPress.
Go to Settings → General.
Find Site Icon.
Choose a different image from the Media Library or upload it.
Confirm the image.
Save the settings.
Open the live website and check the browser tab.

WordPress's current documentation places the Site Icon in General Settings for WordPress 6.5 and later.

For older WordPress versions

On WordPress 4.3 through 6.4, use Appearance → Customize → Site Identity → Site Icon, then select the replacement image and save your changes.

How Do You Remove a WordPress Favicon?

The removal process depends on whether you're using General Settings, the Customizer, or a block theme.

Remove the Site Icon from current WordPress

Open the Site Icon controls under Settings → General and use the available removal or replacement control provided by your WordPress installation. Because WordPress interfaces can vary between versions and themes, do not rely on a specific button name from an older tutorial.

Remove the Site Icon from the Customizer

Older WordPress installations manage the icon through Appearance → Customize → Site Identity. The Site Identity panel contains the Site Icon control and allows the image to be changed or removed.

Remove the Site Icon from a block theme

Block themes can use the Site Logo block to control the Site Icon. Open Appearance → Editor, select the Site Logo block, and review its image and Site Icon settings. Removing the image from the Site Logo block and removing the Site Icon are not necessarily the same operation, so check the Site Icon setting itself when your goal is specifically to remove the favicon.

Can You Add a WordPress Favicon With Code?

Yes, but coding is usually unnecessary. WordPress has built-in Site Icon functionality, so normal websites should use the built-in setting rather than manually adding favicon markup to theme files. WordPress has provided the Site Icon feature since version 4.3.

When Should You Use WordPress's Built-In Site Icon?

Use the built-in option when it is available. It is simpler, easier to maintain, and avoids unnecessary theme-file modifications.

When Might Custom Code Be Necessary?

Custom code may make sense for a custom theme or a specialized implementation where the built-in controls do not provide the required behavior. Before editing theme code, determine whether the existing theme already supports the Site Icon feature. Do not add a second favicon implementation simply because you cannot immediately find the setting.

Do You Need a Plugin to Add a Favicon to WordPress?

No. A dedicated favicon plugin is normally unnecessary. WordPress has built-in Site Icon functionality, and the official documentation recommends using it rather than manually creating and installing a separate favicon.ico implementation. A plugin may be relevant for a specialized requirement, but installing one simply to add a standard Site Icon adds an unnecessary dependency.

Common WordPress Favicon Mistakes to Avoid

Using a non-square image: WordPress requires the Site Icon to be square.
Uploading an image smaller than 512 × 512 pixels: Prepare the icon at the required minimum dimensions rather than starting with a tiny source image.
Using a complicated logo: A detailed logo can become impossible to recognize when reduced to favicon size.
Making text too small: Long business names and slogans usually become unreadable.
Using poor contrast: A low-contrast favicon can disappear against a browser's interface.
Starting with a low-quality source: A blurry or heavily compressed image will not produce a clean result.
Forgetting to save: Selecting an image does not help if the setting is not saved.
Checking only one browser: Use a private window or another browser when verifying a recently changed favicon.
Confusing Site Logo with Site Icon: They serve different purposes. Your Site Logo appears within the website design, while the Site Icon is used as the small browser and app icon.
Editing code unnecessarily: Use WordPress's built-in Site Icon functionality before modifying theme files.
Assuming the favicon failed because the old icon remains visible: Browser caching can make a successful change appear unsuccessful.

WordPress Favicon FAQs

What Is a Favicon Called in WordPress?

WordPress calls the favicon a Site Icon. It identifies your website in browser tabs, bookmarks, and other supported locations.

What Size Should a WordPress Favicon Be?

The Site Icon must be a square image at least 512 × 512 pixels. WordPress recommends PNG as the format.

Can I Use a PNG as a WordPress Favicon?

Yes. PNG is the format WordPress recommends for Site Icons.

Can I Use My Logo as a WordPress Favicon?

Yes. A logo can be used as a Site Icon, but it should remain recognizable when reduced to a very small size. A complicated horizontal logo may need to be simplified into a symbol, monogram, or other recognizable brand element.

Why is my WordPress favicon not showing?

First check that the Site Icon was saved and that you are testing the correct live website. Then open the site in a private window or another browser to rule out favicon caching. If you use a caching plugin or CDN, purge its cache as well.

How do I change my favicon in WordPress?

On WordPress 6.5 and later, go to Settings → General → Site Icon, choose the new image, and save the changes. Older WordPress versions use Appearance → Customize → Site Identity → Site Icon.

How do I remove a WordPress favicon?

Open the Site Icon controls used by your WordPress version and remove or replace the selected image using the available control. Older versions manage it through Appearance → Customize → Site Identity, while block themes may expose Site Icon controls through the Site Logo block.

Do I need a plugin to add a favicon in WordPress?

No. WordPress has a built-in Site Icon feature, so a plugin is not normally required.

Where Is the Site Icon Setting in WordPress 6.5?

Go to Settings → General → Site Icon. WordPress moved the Site Icon to General Settings in version 6.5.

Where Is the Site Icon Setting in Older WordPress Versions?

For WordPress 4.3 through 6.4, use Appearance → Customize → Site Identity → Site Icon.

Can I Use the Same Image for My Logo and Favicon?

Yes, but you do not have to. A full Site Logo may contain details that do not work well at favicon size. In block themes, WordPress also allows the Site Logo image to be used as the Site Icon through Use as site icon.

How Long Does a WordPress Favicon Take to Update?

There is no reliable universal display time because browsers can cache favicon data. After saving the Site Icon, test the live site in a private browser window or another browser. Also clear WordPress, CDN, or server caches when applicable.

How to Create a Favicon Before Uploading It to WordPress

Use this workflow when you do not already have a suitable Site Icon:

Start with your existing logo, symbol, or initials. Keep the original logo and brand identity intact.
Simplify the artwork so it remains recognizable when displayed very small.
Create a square canvas.
Make the image at least 512 × 512 pixels.
Export it as PNG.
Check the icon at small display sizes.
Convert an existing PNG into favicon artwork when necessary.
Upload the finished image to WordPress as the Site Icon.

Conclusion

To add a favicon to WordPress, prepare a square image of at least 512 × 512 pixels, then open Settings → General → Site Icon on WordPress 6.5 and later. Select or upload the image, save the settings, and check the live website in a browser. Older WordPress installations use Appearance → Customize → Site Identity, while block themes can also manage the icon through the Site Logo block. If the new favicon does not appear immediately, check browser, WordPress, CDN, or server caching before assuming the upload failed.