A website icon, also known as a favicon, is the small image that appears next to your site’s name in browser tabs, bookmarks, and search results. It’s a simple but powerful way to reinforce your brand and make your site look more professional.
Changing the icon in WordPress is easy and does not require a plugin:
Step 1: Prepare your icon
Make sure your image is:
- Square (e.g., 512×512 pixels)
- Uses a transparent background for a cleaner look
- Saved as PNG or ICO format. JPEG works but does not support transparency.
- Visually clear even at small sizes
You can use tools like Canva or https://favicon.io to create one. Remember to preview your icon at very small sizes to ensure it remains readable.
Step 2: Set the icon
- Sign into your WordPress website as an admin
- From the side menu, select Settings > General.
- Look for the Site Icon section (normally third from top)
- Click Select Site Icon or Change Site Icon
The button has a different label depending on whether you already uploaded an icon. Either way, click the button to open the media library where you can select an existing image or upload a new one.
- Select or upload your site icon
- Scroll to the bottom and click Save Changes
Output
WordPress automatically creates several different sizes for different devices. If you examine your HTML source, you will see links similar to the following:
<link rel="icon" href="https://humanextended.com/wp-content/uploads/2025/07/human-extended-logo-512x512-150x150.png" sizes="32x32" />
<link rel="icon" href="https://humanextended.com/wp-content/uploads/2025/07/human-extended-logo-512x512-300x300.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://humanextended.com/wp-content/uploads/2025/07/human-extended-logo-512x512-300x300.png" />
<meta name="msapplication-TileImage" content="https://humanextended.com/wp-content/uploads/2025/07/human-extended-logo-512x512-300x300.png" />Troubleshooting
If you don’t see the icon:
- Do a full refresh in your browser, e.g., Ctl+F5.
- Flush your website or hosting cache.
- Make sure your theme does not override the icon
Reference
- Create a Favicon – Documentation – WordPress.org – also has instructions for older versions of WordPress.
- How to set WordPress Favicon | Site Icons | WordPress.com Support – although intended to support wordpress.com sites, it has useful guidance for creating a good-looking icon.
- Define Website Favicon for Search Results | Google Search Central | Documentation | Google for Developers – guidelines from Google
Leave a Reply