Documentation › Creating and Installing a Favicon

Creating and Installing a Favicon

The favicon is the teeny, tiny little image that appears in your browser tab when viewing a page on your site. It’s also used in many browsers when your site is bookmarked. When designing your favicon, keep in mind that you want it to be legible and understood at a tiny size; so a shrunken version of your logo likely won’t work. You’ll want to take one recognizable part of your brand and simplify it. Sometimes this is as simple as taking a graphic or letter from your brand name and using that as your favicon. Currently, the most wide-spread support for favicons is in the .ico format, so you’ll need to convert your new .png or .jpg graphic to an .ico format. You will want to generate a 32×32px favicon (which will be scaled down to 16x16px in some browsers). See below, “Taking it a Step Further”, for more information on different favicon formats and sizes. Once you have your new .ico file, you can upload it to the WordPress Media Library, grab that URL, and dump it right into Headway ► Options ► General ► Favicon URL:

Taking it a Step Further

If you’re interested in taking your favicon a little further, you can start by understanding the favicon a little better. Jonathan Neal discusses the different options you have when it comes to favicons. There are a few options here you may want to implement in addition to the standard favicon option Headway offers by default in the General options. You can add these code snippets to the Scripts/Analytics “Header” box.

Add support for PNG files as favicons for some browsers

Not all browsers support this, unfortunately:

Chrome, Firefox, Opera 7+, and Safari 4+ all accept the PNG favicon, but Chrome and Safari will opt to use the ICO favicon when both are presented, regardless of the order in which they are declared. On the other hand, Internet Explorer does not support PNG favicons, but it will ignore the PNG favicon and use the ICO favicon, regardless of the order in which they are declared. —Jonathan Neal, Understand the Favicon

We can use a little bit of code to accomplish it for those browsers that do support it, however:

<link rel="icon" href="path/to/icon/favicon.png"> 

Add a special icon for IE10 / Windows 8 users who “pin” your site to their desktop

Jonathan Neal sums it up nicely:

With IE10 Metro we can display a unique tile icon when the visitor pins our site to their Start screen. These tile icons are 144×144 PNG files, and for best results they use a transparent background. A background tile color can be specified using a hex RGB color (using the six-character #RRGGBB notation), a CSS color name, or the CSS rgb() function. The markup is pretty simple.

<meta name="msapplication-TileColor" content="#D83434">  <meta name="msapplication-TileImage" content="path/to/tileicon.png"> 

—Jonathan Neal, Understand the Favicon

Add a special icon for IOS devices to use when bookmarking

<link rel="apple-touch-icon" href="path/to/icon/apple-icon-touch.png"> 

This article was last updated for Headway version 3.8.3

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress