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.
In this guide
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 are several examples:
Select the appropriate tab for your admin interface style:
To upload a site icon in the Default view:
- Visit your site’s dashboard.
- Navigate to Settings → General.
- Click on the “Change” button underneath “Site Icon.”
- Note that this selection may take you to the Site Identity area of your Customizer to choose an image, depending on your theme. If it does, click on the “Select Site Icon” button that appears on the new page.
- 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.
- After selecting an image, click the “Continue” or “Select” button.
- If your image is already at a perfect square dimension, your site icon with be set.
- If your image is not a perfect square dimension, you’ll be given the option to crop the image (this step can be skipped on some themes, but is not available on all themes). Once you select a square crop, click the “Done” button to move forward.
- Once the site icon has been selected and/or cropped, it will be saved automatically.
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:
- Keep it simple. Remember, you don’t have a lot of space to play around with!
- 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.
- 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.
- 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.
Select the appropriate tab for your admin interface style:
