While resurrecting this blog after a year and half long hiatus, I needed to fix various aspects of the new layout I hadn’t yet completed. One of them was fixing the “favicon” in such way that the link graphic would show up correctly also in Android and Apple devices. An ICO file with a single, usually 16×16 pixel graphic would provide the bookmark bar graphic in Chrome or in the site tab, but it wouldn’t provide the other needed resolutions, so I looked into the easiest way to make that happen. Here are my notes.
- Create a sufficiently large image (at least 500×500 pixel – the same size or larger than the largest resolution icon you’re planning to provide), for example, in Illustrator/Photoshop, with transparency if required. Save in PNG format.
- Use Favic-o-matic to generate the various icon sizes (use “Every damn size, sir!” -> Advanced Settings -> “apocalypse” 🙂 )
- set the website URL (it can be s sub-directory)
- set title (this is the title for the link, e.g. on a tablet or phone screen)
- set the background color if required (usually the same as the image background color)
- Download the resulting ZIP archive. You’re good to go at this point if the 16×16 pixel icon is of acceptable quality (it often is not, although in case of the ICO file for this blog it was OK, as it was just a slanted red line). But for my Finnish forum, for example, it was too fuzzy, and so it had to be manually adjusted. If you opt not to adjust the 16×16 pixel icon further, you can now skip to step 5. Otherwise, you have a few options (I’m sure more exist, but these are the ones I chose):
- Open the ICO file in Axialis IconWorkshop (a $69.95 commercial software for Windows). This will allow you to open the ICO file containing the multiple differently-sized images, edit them as needed, and then save back into the ICO file, all from within one program.
–or– - Extract the images from the ICO file (from the ZIP archive that was provided by Favic-o-matic) using icotool command of icoutils package in Linux/macOS, like so:
icotool -x -o . favicon.ico
This will allow you to edit the 16×16 pixel file with any image editor (Photoshop, GIMP, even Paint.NET), or to replace the file in question with a previously prepared 16×16 pixel icon. If you go this route, you will have to recomposite the individual PNG image files back into a singular ICO file. To do so, you can use web-based ICOConvert tool, or use Imagemagick’s convert command, like so:
convert favicon_1_16x16x32.png favicon_2_24x24x32.png favicon_3_32x32x32.png favicon_4_48x48x32.png favicon_5_64x64x32.png newfavicon.ico
- Open the ICO file in Axialis IconWorkshop (a $69.95 commercial software for Windows). This will allow you to open the ICO file containing the multiple differently-sized images, edit them as needed, and then save back into the ICO file, all from within one program.
- With the ICO file adjusted (and a new individual 16×16 pixel icon created), replace the favicon.ico in the set created with Favic-o-matic with the one you customized. Also replace the individual image file favicon_1_16x16x32.png in the set created with Favic-o-matic with the individual 16×16 pixel file you created (note that if you used Axialis IconWorkshop to adjust the 16×16 pixel icon, you can export an individual image of the ICO image set into a PNG file by right-clicking on the 16×16 pixel icon thumbnail in Axialis IconWorkshop, then select Export > PNG with transparency)
- Upload the images (the [possibly adjusted] favicon.ico, and the individual PNG files from the set created with Favic-o-matic) to the web server at a desired path (it needs not be site root, and in fact it is cleaner not to have them in the site root).
- Finally, modify the references provided by Favic-o-matic in the code.txt file to reflect the path you uploaded the images to (in the case of this blog, I added to each image path “wp-content/lib/ico/”, as can be seen in the example below). Also add x-icon reference to the favicon.ico file (the last ‘link’ line in the example below). You can give the full path for the favicon.ico (which resides in the same subfolder as the individual PNG icons), or symlink it from the site root as I have done below, so that favicon.ico is findable in the site root by the standard convention):
- Now you can add the above reference block into your site’s header, such as that of WordPress.
Update/continued 2017-01-03: Some time after I had completed the above work, I sent a link to my blog to someone on WhatsApp, and realized the icon that was pulled was not the favico, but rather part of the first image on the site (which happened to be the header banner). The same happened when sharing the link on Facebook. It turns out the icon scraped by WhatsApp, Facebook, and likely other sharing sites can be controlled via Open Graph metadata.
After some research and trial-and-error I ended up with the following “
Some notes on the above code block:
- There are string-length limits on some of the fields like title or description.
- Set og:image:type according to your image format, i.e. image/png, image/gif, or image/jpg.
- The image should be 200 × 200 pixels. Make it larger, and Facebook will complain. Facebook also enforces a limit on the physical size of the image file.
- The og:updated_time is simply a unique string (I use the current epoch), as is the “version” number in the query string (…/logo-randomaccess.png?v=1483236382). If you change the image or the other parameters, you can increment/change the updated_time or the “v=” value to force reload.
- Facebook offers a handy Sharing Debugger (you need to register as a FB developer to access) to make sure your Open Graph logo is downloaded correctly. If it works in Facebook, it will almost certainly work in WhatsApp and other sharing targets that utilize Open Graph.
- When adding the Open Graph metadata block to your site, be sure to check the produced header code by viewing the final page source (usually Ctrl/Cmd-U), as depending on the environment, some “og” headers may already be present. For example, the “publicize” component of WordPress Jetpack creates “og” headers that may conflict, or at least that you’ll want to take into account so that you won’t add duplicate headers (in many cases you can disable the headers, such as in case of Jetpack publicize, you can either turn off the publicize component, or add the following line in your theme’s functions.php:
add_filter( 'jetpack_enable_open_graph', '__return_false' );
Other environments (like, say, xenForo forum) also add some “og” headers, so keep an eye out for them and disable/modify as needed.