Have you ever wondered how websites fit those little icons next to their names on your browser’s tabs? Today, we’ll be looking at how you can add them to your WordPress site and spice up your website’s personality.
Let’s take a quick and basic look at an example of how to create a favicon with photoshop in case you want to do it manually.
The result of this design is what we will add to our WordPress website. Now, let’s follow the following steps that will allow us to load our icon.
In most cases, favicons are a resized version of your company logo. The recommended size for this is 512x512px. WordPress will automatically resize if you try to add a larger image.
2. Click Select image and then upload the image you want to use as favicon:
3. If your image doesn’t fit the recommended size, WordPress will allow you to crop it to the correct size. You can also preview it in mobile and desktop modes.
4. Be sure to save and publish later:
5. Now you can visit your website and see the favicon:
While WordPress supports favicons natively, that doesn’t stop developers from adding their Favicon plugins. RealFaviconGenerator’s Favicon plugin allows you to customize your favicon to appear on multiple devices without decreasing in quality. It also will add app icons for mobile.
2. Select Favicon, click “Select from media library” to open the WordPress media library, and select your favicon image. The favicon must be at least 70 x 70 pixels in size, but 260 x 260 pixels or larger is recommended. After selecting the image, confirm your selection by clicking the “Generate Favicon” button.
3. Confirm the insertion of the Favicon, and the plugin will automatically redirect you to your website. When the image has loaded, you will also have some optional settings. If you want, you can adjust the favicon display for the desktop browser, Google search results, or different smartphone formats.
If you have done all the settings or want to skip the rest, click the “Generate your favicons and HTML code” button at the bottom of the page.
The plugin will redirect you back to the backend and confirm the installation of the favicon in WordPress.
No matter what type of method you need or want to use, both meet the requirements for your page icon to display correctly in the browsers tab.