Site Icons

Loading a site icon to your website will create a unique icon in shortcut lists and on browser tabs. it is a neat touch that identifies your website in a very visual way. The problem is that there is a dizzying array of icons needed to support the various browsers and devices. One format for chrome, another for Internet Explorer, one for iOS devices, etc., etc.

Rosette
NGC2244, the Rosette Nebula, the current site icon image for Darker View
Fortunately the later versions of WordPress make it easy. A built in function of WordPress creates all of the needed icons from a single image. The function is found in the theme, and is supported by many modern themes. Simply go to Appearance->Themes, then select Customize->Site Identity for your current theme. At the bottom should a place to load your site icon image.

The only issue then is to select your site icon image. This is easier said than done as not all images work. You need an image that will scale well to the smaller icon sizes used by many devices. An image that looks good at a larger size is very likely to look like mush when scaled to a much smaller size.

WordPress suggests an original size of 512×512 pixels. This will be scaled down to the needed sizes for the various site icons. I would suggest testing your image by resizing it back and forth in an image editor. This should show you how the image will look at sizes from 512×512 to 16×16 pixels. It may take some experimentation to get right.

Author: Andrew

An electrical engineer, amateur astronomer, and diver, living and working on Mauna Kea, Hawai'i.

Leave a Reply

Your email address will not be published. Required fields are marked *