Add a site icon

A site icon, also known as a favicon, is a unique icon representing your website. This guide will show you how to add a site icon to your site.

The site icon is displayed in several places, including:

• Next to your site’s name in your WordPress.com dashboard.
• In your visitors’ browser tab.
• As the icon used when someone bookmarks your site in their browser.
• In search results.
• As a home screen app icon when saved to a browser or phone.

Here is an example:

You can add a site icon using the Site Editor or through your site’s General Settings. The method you use depends on your theme type.

A quick way to determine if your site uses the Site Editor is to check under Appearance in your dashboard. If you see Editor here, you use a block theme. If you see Customize instead, you use a classic theme.

Select the appropriate tab for your interface:

Site EditorGeneral Settings

If your site uses a block theme, you can add or change your site icon directly from the Site Editor.

1. Visit your site’s dashboard.
2. Go to Appearance → Editor.
3. Select Identity from the left-side menu.
4. Click Site Icon.
5. Select an image from your Media Library, or click Upload to add a new file.
6. Click Save to apply your changes.

Your site icon appears in browser tabs, bookmark lists, and mobile home screens.

To upload a site icon to your site:

1. Visit your site’s dashboard.
2. Navigate to Settings → General.
3. Click on the “Choose a Site Icon” button next to “Site Icon“

4. Your site’s Media panel will open where you can:
   • Choose an existing image from the “Media Library” tab.
   • Upload a new image from the “Upload File” tab, following these guidelines.
5. After selecting an image, click the “Set as Site Icon” button in the bottom right of the Media panel.
   • If your image is already at a perfect square dimension, your site icon will be set.
   • If your image is not a perfect square dimension, you’ll be given the option to crop the image (this step cannot be skipped). Once you select a square crop, click the “Crop image” button to move forward.

6. Once the site icon has been selected or cropped, click the “Save Changes” button at the bottom of the page to save the site icon.
   

The image file for your site icon should meet the following criteria:

• Aspect ratio: Upload a square image.
• Dimensions: At least 512 x 512 pixels.
• File type: PNG and SVG image file types are the most common. Any valid favicon format is supported.

Here are some actionable tips you can follow:

1. Keep it simple. Remember, you don’t have a lot of space to play around with!
2. Keep it recognizable. Try to encapsulate your brand in the small space you have to work with. If you’re used to using a logo that isn’t a tiny square, try to create something that evokes that logo rather than unnecessarily squeezing the whole original in.
3. Use as little text or lettering as possible. Remember that the favicon is a small image. Even if your usual logo has your company name spelled out, keep it concise in your favicon.
4. Think about color. Different web browsers (like Google Chrome, Safari, and Edge) use different color palettes. And, with the increasing popularity of dark mode, you’ll want to ensure your favicon looks great regardless of the user’s browser. Ensure the favicon looks good and stands out on white, gray, and black background colors.

To remove a site icon:

1. Visit your site’s dashboard.
2. Navigate to Settings → General.
3. Click on the “Remove Site Icon” button next to “Site Icon,” underneath your current preview image.