Skip to content

RANDOM.AC/CESS

Musings of a Web Technologist

  • My Links at Diigo
  • Ergonomics Resource

Month: December 2016

Working with favicons (ICO shenanigans)

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.

  1. 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.
  2. 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)
  3. 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
  4. 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)
  5. 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).
  6. 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):
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  7. 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 “og” metadata block for this blog:













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.

Author VillePosted on 26 December 201603 January 2017Categories Design, Technical, WebTags favico, favicon, icon, open graph, opengraph, site logo, webLeave a comment on Working with favicons (ICO shenanigans)

Recent Posts

  • macOS: ‘dig’ vs. ‘dscacheutil’ while using split DNS with Viscosity VPN client
  • Remove DRM Easily (?) from Your Audible Purchases
  • Exploring GitHub Flavored Markdown local preview
  • Interactive AWS CLI Query Filtering with JSONPath
  • Easy MFA and Profile Switching in AWS CLI

Recent Comments

  • darry on Remove DRM Easily (?) from Your Audible Purchases
  • John Weems on Remove DRM Easily (?) from Your Audible Purchases
  • dakotajones on Remove DRM Easily (?) from Your Audible Purchases
  • Radwimps-the-best on Remove DRM Easily (?) from Your Audible Purchases
  • Kent on Microsoft Trackball Explorer – The World’s Most Comfortable Trackball

Archives

  • April 2018
  • January 2018
  • November 2017
  • October 2017
  • July 2017
  • April 2017
  • February 2017
  • January 2017
  • December 2016
  • July 2015
  • December 2013
  • September 2013
  • August 2013
  • July 2013
  • May 2013
  • March 2013
  • January 2013
  • August 2012
  • April 2012
  • February 2012
  • January 2012
  • December 2011
  • June 2011
  • May 2011
  • January 2011
  • November 2010
  • July 2010
  • June 2010
  • March 2010
  • February 2010
  • January 2010
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • November 2008
  • October 2008
  • September 2008
  • August 2008
  • June 2008
  • May 2008
  • April 2008
  • March 2008
  • February 2008
  • October 2007
  • September 2007
  • August 2007
  • July 2007
  • June 2007
  • May 2007
  • September 2006
  • July 2005
  • May 2005
  • April 2005

Categories

  • Audio
  • AWS
  • Design
  • DevOps
  • DNS
  • Ergonomics
  • Hardware
  • Linux
  • macOS
  • Mail
  • Miscellanea
  • Networking
  • Programming
  • Rants
  • Security
  • Software
  • Technical
  • Ubuntu
  • UNIX
  • Virtualization
  • Web
  • Windows
  • Workflow

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

StackExchange

profile for Ville on Stack Exchange, a network of free, community-driven Q&A sites

Recent Posts

  • macOS: ‘dig’ vs. ‘dscacheutil’ while using split DNS with Viscosity VPN client
  • Remove DRM Easily (?) from Your Audible Purchases
  • Exploring GitHub Flavored Markdown local preview
  • Interactive AWS CLI Query Filtering with JSONPath
  • Easy MFA and Profile Switching in AWS CLI

Tags

  • /tmp
  • /var
  • 2013
  • Acrobat
  • apache
  • automatic
  • automount
  • aws
  • bash
  • boot
  • centos
  • co-lo
  • co-location
  • comparison
  • DNS
  • enforcer
  • esxi
  • freebsd
  • ftp
  • fusemail
  • Hardware
  • iam
  • install
  • key
  • Linux
  • mailtrust
  • microsoft
  • monitoring
  • nfs
  • RELEASE-7.0
  • script
  • security
  • self-healing
  • shell
  • software
  • sublime
  • tbe
  • trackball
  • ubuntu
  • unix
  • vista
  • vmware
  • Windows
  • windows 7
  • workflow

Blog archive

December 2016
M T W T F S S
 1234
567891011
12131415161718
19202122232425
262728293031  
« Jul   Jan »

PGP/GPG

Keybase: vwal
(PGP Key ID 2E99 86D7 7ED9 9C13)

Tips

BTC:
1LpaZ2vU7jHuqokLEC3dDnbmZrNutCj6o9

ETH:
0xC8c180e80927ED68fD538a46B4e1D88f41CAaEde

XRP:
rwC92P4R7Dj4uXF9gjWbtoVzCnR9RuYnPU

XLM: GAQLY6ITFVXATCGG2Y3VFIGJENNM6RQAUXF43PBLNOCKNQJKJSKGJKTL
  • My Links at Diigo
  • Ergonomics Resource
RANDOM.AC/CESS Proudly powered by WordPress