A Site Icon, also known as a favicon, is a unique icon for your website. This guide will show you how to add a site icon to your WordPress.com website.
The site icon is shown on your WordPress.com dashboard, in your site visitors’ browser tab, as a bookmark, in mobile search results, and as a home screen app icon when saved to a browser or phone. Here are several examples:
You can upload a Site Icon by following these steps:
- Starting from your dashboard, go to Settings → General.
- Click on Change. Your Media Library will be shown. Note that you may need to click on Site Identity before being able to open the Media Library, depending on your theme.
- Choose an existing image or upload a new one.
- Click Continue. You may then be given an option to crop the image to make sure it’s square. You can also skip the cropping step if you wish.
- Click the Done button when you’re happy with the icon, and your changes will be saved automatically.
Upload a square image that is at least 512 x 512 pixels.
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 and 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 and create something that evokes that logo rather than unnecessarily trying to squeeze 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, try to keep it concise in your favicon.
- Think about color. Different web browsers (like Google Chrome, Android Chrome, Safari, and Edge) use different color palettes. And, with the increasing popularity of night mode, you’ll want to make sure your favicon looks great regardless of the user’s browser. All you have to do is ensure that the favicon looks good and stands out at least on white, gray, and black background colors.
You can remove a custom Site Icon by going to General → Settings and clicking on the Remove button.
