Word Press Site Icon

In this guide

1. Where Site Icons Appear
2. Add Your Site Icon
   1. Site Icon Image Guidelines
3. Remove a Site Icon

Where Site Icons Appear

• 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 are several examples:

Add Your Site Icon

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 and/or cropped, click the “Save Changes” button at the bottom of the page to save the site icon.

Site Icon Image Guidelines

• 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.

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.