Websites have a site icon defined for use in a variety of situations. The small version of the site icon is used when saving bookmark / favorite links in a browser as in the example shown here.
In the example above, the Bluehost icon is the one that your site will display if you are a Bluehost customer and do not have a custom icon set for your site.
A larger version is saved as a smartphone shortcut when saving a site to the home page. Here is an example of how shortcuts might be displayed on a smartphone.
Notice in the example above, Amazon and Pepsi did not prepared a scaleable icon for this size view. The Jetpack Customize feature in WordPress will generate icons for various devices to avoid the above problem.
Some browsers will show large versions of site icons on the startup page for your top-visited sites. In the absence of a site icon, typically a grayscale globe icon might be used by devices. However, hosting companies will usually use their own logo for your website if you’ve not selected another logo for use.
Steps to Set Website Icon
Follow these steps to set a custom image for your website.
- From the WordPress Dashboard, go to Appearance > Customize.
- In the left column select Site Identity.
- The Site Icon section lets you upload an image of 512×512 pixels or larger.
It takes a while for browsers to update the icon file and display the new image. This is because browsers store static images, like website icons, locally.
Simple Logo Design
Successful scaleable icons and logos are ideal. In the examples above, the NPR logo is very familiar and sized for a t-shirt or coffee mug is recognizable. However, when scaled down to a tiny website logo, it’s not as easy to identify. The Target logo is identifiable from a website icon up to a billboard size. Simplicity is usually best with logos. To save time, you might consider creating a 1000×1000 pixel canvas with a single letter to represent your organization or business. Two letters may also be readable at a smaller size. Beyond that, their size is probably too small to recognize.