This month WordPress added Site Icons. I saw this when I updated my site to the latest release of WordPress and in looking at what is new, I saw the Site Icon feature. I lost my site icon when I moved my site from a Windows server to a Linux server. So, I have needed to redo it for some time. So, I figured this might be a quick way.

Prior to this a site owner could only use the Windows Favorite Icon and the Mac equivalent to create an icon that can be used with bookmarks. Not an exactly a user friendly thing. With release 4.3 I thought adding the site icon got easier. But, the feature isn’t what I expected or what I think most of us will expect. So, here is how to use a WP Site Icon and create a favorite icon that is used with bookmarks.

The WP Site Icon feature is for theme builders. It doesn’t do much for site owners that aren’t into coding. Konstantin Obenland, release lead for 4.3, says,

This v1 marries Jetpack’s Site Icon module with the Media Modal, reusing code from the Custom Header admin. For now, the core-provided icons will be limited to a favicon, an iOS app icon, and a Windows tile icon, leaving .ico support and additional icons to plugins to add.

So, as best I can tell, implementing the feature on my site did nothing. That means the favorite icon I lost moving my site from Windows to Linux still has to be redone. At some point the WP peeps plan to add favorites icon support. 

The older style favorite.ico is a bit outdated too. With mobile we need a collection of icons of different sizes and file names. So, I am going to cover what we need starting with the old style and ending with the WP Site Icon information so you can enable it.

The Old Way to Make ICO Files

First, to create a Favorite Icon the old way, one need to build the image then size it to; 16×16, 32×32, and 48×48. Then use a program to pack those images into a ICO file named favorite.ico. Then just upload it to the root public folder of your web site.

There are numerous free programs one can use to make the ICO file. For Photoshop there are free plugins that allow one to open and create ICO files. See Photosop ICO File plugin. With the plugin making a favorite.ico is no more difficult than making any other image.

Telegraphics has a plugin, but it didn’t work with PS CC 2015 for a time. As of June 2015 word is it does work. I tried it, it worked.

I know from past experience file formatting plugins have to go in a special folder:

C:\Program Files\Adobe\Adobe Photoshop CC 2015\Plug-ins\File Formats

Copy the plugin to that folder and restart PS. The video shows how to do it on a Mac.

Another free plugin is available here: Icon Plugin for PhotoShop. This one gives you more options when saving an ico file. But, this is for PS CS… not CC, and earlier.

Updated Favorite Icon

Another way to open and create ICO files is to use the web site: ConvertIcon.com.This is a great tool as it allows you to pack multiple sizes in the ICO file. If you plan to use this for the site icon that will be used in favorites and appear in the address field of the browser, use the sizes from 96×96 and down. The fewer sizes you include the smaller the file.

Name the result favorite.ico and place it in the root folder of your web site.

The WordPress Site Icon Tutorial

My first problem was finding how to use the new WP feature. The feature is hidden in Themes, which while logical and intuitive when your customizing a theme isn’t so intuitive when you are not thinking theme.

So, go to Appearance->Themes. On your active Theme there will be a customize button, click it. Next there is an item Site Identity, click it. Look for the Site Icon section and the Select File button.

This takes you to the Media Library where you can pick an image previously uploaded or upload a new one. They recommend you use a 512×512 image. I’ll tell you it HAS TO BE SQUARE. Not square doesn’t work.

WordPress will create some standard size images:

• 32x32px favicon.
• 180x180px app icon for iOS up to the iPhone 6+.
• 192x192px Android/Chrome app icon.
• 270x270px medium-sized tile for Windows.

Where WP puts the images depends on your settings. I have mine set to store uploaded images in folders named by year and month. So, mine went in:

wp-content\uploads\2015\09

or

wp-content\uploads\[current_year]\[current_month]

I don’t find the sizes they say will be there. I found one full size (512×512), a 150×150, a 260×160 ?, a 387×160 ?,and a 500×500. The 260×160 and 387×160 look to be useless. They are just a part of the image. It looks like the top and bottom 50 or 60+ pixels are just chopped off. This suggests you would have to figure out a ‘safe zone’ that shows at all sizes for the important part of your image.

You can find the image in your Media Library. It is marked Site Icon.

My take is that as of this September 2015 release the feature is way incomplete. They are providing the foundation for theme builders to work with and little if anything for the site admin or bloggers.

There are a number of WP plugins that will handle creating and placing the ICO files in the right places. Open Plugins and search for Site Icon. I have no idea which is best. I don’t use them. But, I do see most of them handle setting up icons for various devices. So, using a plugin is probably a better choice than creating your own ICO file for most of us.