Search our site for training courses:

Date: Tuesday, September 3, 2013

Author: Antonio Ooi

Designing Favicon & Logo for Effective Branding and Online Marketing

• Date:

Content Summary:

  • What is Favicon? Why is it a BIG DEAL?
  • Strategically Plan for your Logo Design for Publication Diversity and Maximum Branding Result — 5 Strategies.
  • Designing your Favicon using Microsoft PowerPoint 2010 and Make It Work for your Web


What is Favicon? Why is it a Big Deal?

What is Favicon?

If you're our regular site visitor, you may notice that we've changed our Favicon for our MalaysiaTraining.net website since the day we launched our new blog site in August 2013. As shown in the picture above, Favicon is a small little icon that appears on your site visitor's web browser tab and bookmark.

So what is the big deal of this small little icon? For some Malaysian businessmen in particular, such small little thing is usually not a big deal, but for Americans, it is a BIG DEAL — this is oen of the reasons why they're more advance than us. Americans are paying more attention to details whereas many Asians, at least based on my personal observation and career experience, are less attending to details. Why such small details are so important? — Because they target on consumer's subconscious mind. This is what "branding" is all about. In a typical situation, human actions are dictated by their subconscious mind and branding is to trigger consumer for such effect: When you think of "training", what kind of "image" that will subconsciously appear in your mind that subsequently lead you to visit the website again and again? — This is an example of branding via company or product logo.

So when logo is important, the same goes to FAVICON. Imagine when visitors visit your site and bookmark it on their web browser, how many times they need look at your favicon each time they circulate through the tabs and accessing their bookmark? — This is the key! Even recently, Microsoft Bing is making new experiment by displaying favicon of each website on their new search results — isn't this added more values to the favicon? But sadly to say, some traditional Chinese businessmen in particular had not been serious with their logo design, not to mention about valuing the importance of favicon on their website. This is why some bosses do not know how to appreciate what their employees had been doing for them but accusing their employees for doing something "unproductive" instead. Sometimes lack of such knowledge and sensitivity may lead us to be more unproductive than the good intention of our employees that often being misunderstood by us. Some newer generations know how to appreciate it, just that sometimes they do not know how to explain to their boss and ended up get screwed by their boss for nothing.

Therefore, understanding the value of favicon and the importance of attending to details will not only help us to boost our business performance but also make us a good leader. Sounds like a "big deal" huh? ^^

Strategically Plan for your Logo Design for Publication Diversity and Maximum Branding Result

Every design task will become more guided and inspirational when you design with clear purpose in mind rather than designing just for the sake of having it when someone else also have it without knowing the true purpose behind — the same goes to favicon and logo design. In a typical situation, favicon of most websites evolved from their original logo but not the other way around; but for us, we always keep the following effectiveness of publication diversity in mind, including favicon, when designing our MalaysiaTraining.net logo:

  1. Clarity and visibility of logo pattern when scaling down to 16x16 favicon.

    Favicon Clarity The key trick here is SIMPLICITY. If your logo is too complex with too many details, you won't be able to clearly communicate such details when it is being scaled down to 16x16 pixel in size. Many people have a typical mindset that "simplicity" means they need to sacrifice a lot — this is totally wrong. When simplicity means clarity and when clarity means not missing the full picture, what are you needing to sacrifice about? Furthermore, when you gain more than you lose in terms of expressing your favicon well to your audiences, what are you sacrificing actually? Making it too complex until you're unable to express every single detail to your audiences, which in turn making your entire icon out of shape is in fact a HUGE SACRIFICE! Just make it simple and clear of what it means to your business philosophy and leave the details to your daily business operation and the way you deal with your customers — This is it! The details can only be proven by action, not by logo!

  2. Appearance effect on certain major social media like Google+.

    Favicon ClaritySome social media are very funny, they purposely make the display of your profile picture so different from other social networks, for example the round shape of Google+ profile photo. But if Google+ is too major to you, then you might need to make sure your logo is still presentable without modifying much of it; otherwise you may need to come up with another design tailor-made for Google+ without losing its orginal pattern and meaning. For example, for our square logo to fit into a round shape frame will leave some ugly white spaces on top, right, left, and bottom (see picture). In that case, we can easily create a round shape version by eliminating those white spaces even though we haven't really done so. But for most social media like Facebook and LinkedIn, a square logo should be good enough.

  3. Extensibility and transformable of logo size and orientation for publication diversity.

    Fundamentally, we start our logo design in square shape, e.g 200x200, as it fits most of the publications like favicon and social media. We also strategically design it to make extensible to various shapes that can be used to fit into other types of publication requirement and presentation need. For example, we can tranform our square logo into rectangular logo by adding "MalaysiaTraining.net" at the right without losing the consistency of our core logo, that is the square version of it. Also, when comes to a need, we can even remove the square logo, leaving only "MalaysiaTraining.net" by itself and yet without losing the colour theme of it — Isn't this amazing? Do not start your design with a rectangular shape until you bring yourself a difficulty on how to come up with a square version — it is always easier to extend it rather than subtract it. Essentially, start your logo design with a simplest square version first and foremost to ensure its design consistency and extensibility when using it with other publications for maximum branding result. If you lose out the consistency, you lose out the subconscious mind programming effect and hence your branding effectiveness — you get what I mean?

    Squre MalaysiaTraining.net Logo

    Type I: Square MalaysiaTraining.net Logo
    Square Logo Only. For favicon, most social media, avatar, and other presentation needs.


    Squre MalaysiaTraining.net Logo

    Type II: Rectangle MalaysiaTraining.net Logo
    Square Logo + Brand Name. For other publications and presentation needs, e.g. forum signature.


    Squre MalaysiaTraining.net Logo

    Type III: Rectangle MalaysiaTraining.net Logo
    Brand Name Only. For other publications and presentation needs, e.g. course display image's watermark.


  4. Everlasting trend and the practical use of selected colour combination.

    Choosing the colour combination for your logo design isn't really as simple as you think. It requires some forward thinking:

    1. Are you going to use the colour scheme of your logo as the theme colour of your web design and even the packaging of your products and interior design of your office? If yes, is this combination of colours going to look great and trendy to your audiences for a successful corporate image?
    2. Will this colour scheme be easily outdated and out of trend?
    3. Is the chosen colour scheme philosophically and psychologically represent your business in a right way?
    4. Can you afford to change it in future? How much cost will it involve if you were to change your colour scheme at the later stage?

    There could be more other factors to consider, but these are something that you really need to take into consideration if you're truly serious about your business. There are something that are not so easily reversible once you've made a wrong first step as it will be very costly to undo it in future. For example, you need to strategically think of a good colour combination for your logo so that you can make use of the same set of colours to design your website for not just a trendy look but also for high contrast between text and background that can be readable and acceptable by a wider audience. If you fail to do so, then redesigning your logo may lead to the redesign of your website — isn't this too costly?

  5. High degree of uniqueness to avoid confusion by consumer

    Undeniable, no matter how unique your logo is, you're still unable to prevent others from copying it, especially when you've become very successful one day. Copying your logo design is basically for one purpose: To confuse your customers and make them think that they are your company, if not part of your company, and hence the purchase decision. Yes, some buying decisions were being made based on brand, especially when your brand has become a trusted brand. But some similar logos and favicons that exist in the market are just a coincidence due to limited spaces to fit the whole orginal logo into one small box. For example, you just can't make the whole world "Google" as favicon but simply a letter "G" instead. As I mentioned above, if you don't strategically design your logo in advance, this will be the result — The first letter of your company within a square box with different colour and font from others. As you can see, you can't do much on it in terms of unqiueness. Therefore, uniquely design your logo with simplicity will not only help you to stand out from the crowd but also to prevent consumer confusion, which could also prevent a great loss to you business.

Designing your Favicon using Microsoft PowerPoint 2010 and Make It Work for your Web

As this subtitle implies, creating favicon is not something that can only be achieved by techies. By just using your familiar MS PowerPoint, you can create your own trendy and great looking logo and convert it into favicon that can be used for your website. Once you've created your square shape logo on PowerPoint 2010, you can create a transparent PNG image file by following the steps below:

  1. Select all the layering objects that form your square logo (see picture below). As some elements may have shadow or rotation effect, selecting them all may not look like a square shape to you. Please do not worry about it, we can crop it later on using Microsoft Office Picture Manager that comes together with MS Office Suite.
  2. Right-click on it and select Save as Picture. Make sure you save it as .PNG file.
  3. Now go to the folder where you saved your PNG file and open it with Microsoft Office Picture Manager.
  4. On MS Office Picture Manager toolbar, click Edit Pictures. You'll see an Edit Pictures sidebar on your right.
  5. In the Edit Pictures sidebar, select Crop. You'll see some cropping marks that allows you drag-and-drap in order to chop away the parts that you don't need. You'll also see that the Edit Pictures sidebar has changed to Crop, allowing you to view the existing dimension of your picture and to perform a manual cropping.
  6. Your picture dimension may not be in exact square shape due to the layering objects that you selected in PowerPoint earlier. Just crop away those transparent backgrounds until the dimension shows something like 393x393 (width x height). Do not bother about the size of your logo at this point.
  7. Once you've cropped your logo to become an exact square, save it.
  8. Now click on Edit Pictures toolbar button again and select Resize. The Edit Pictures sidebar has now been changed to Resize.
  9. Select Customer width x height and enter 16 x 16. Click OK.
  10. Verify the clarity of your logo in the actual size of a favicon. If you're happy with the quality of it, go to File menu and select Save As. Name it as favicon16x16.png. Note that it can also be any name as you like as long as you save it with .PNG file extension.
  11. Upload this favicon16x16.png to your website where you usually store the images of your website, e.g. http://www.mywebsite.com/images/favicon16x16.png.
  12. If you know the master page template of your website, open it in HTML code format now. If you do not know, please consult your agent or webmaster.
  13. In your master page template file, find this HTML tag <head> and place this line of code below it as shown below:
    <head>
       :
    <link rel="shortcut icon" type="image/png" href="http://www.mywebsite.com/images/favicon16x16.png" />
       :
    </head>
  14. Save your master page template file and visit your website to see if the favicon has appeared on the browser tab as shown in the very beginning of this article. If it doesn't show up, try refreshing your browser again. If it still not showing up, it must be either your code was not properly inserted or your uploaded image is not accessible. Try copy your image URL and paste it on another tab to see if it is being shown properly on your browser. If it can, check your code again.

We hope that you will find this article a very fruitful and complete one. I wish you a great success on your branding and marketing strategy! Feel free to comment if you need any help or advice. Have a great day! :)