Web Tip add-a-favicon-header

Published on May 29th, 2013 | by Mark Ammay

0

Add a Favicon

The easiest things, are the most amazing things, especially when learning how to add a favicon to your website! Quick story, I was talking to a web developer (but I won’t say who), and they were showing me their portfolio website. Everything looked good on the outside (I wasn’t looking at the source code though), but I noticed they didn’t know how to do one thing…

How to add a favicon!

But don’t fret – he just never tried it! So here’s how to add  a favicon to your website.

What You’ll Need:

  • A very simplistic icon or image
  • Some image editing software (or not)

What You’ll Learn / Get:

  • A 16×16 Favicon
  • Code to add to your website

Why a Favicon?

Basically, a favicon is a small 16×16 icon image that you see when you bookmark a website, or even in the web browser’s tab section.

Here’s a collection of favicons from many different types of websites and what they look like in different web browsers. The favicon is the small square on the left of the website’s page title and URL domain name.

  • The left FireFox tabs are favicon icons I made, for either my own website or a clients.
  • The Chrome tabs are favicon icons of popular brands and websites
  • The right Safari url bars are from random websites I chose.

add-a-favicon


Step 1 – Create the image

If you have an image editing software like Adobe Photoshop or Illustrator, you can create your image in there. Keep in mind that you can start off with a larger sized image as long as it’s a square; you will be reducing the size to 16x16px later on.

Things to Keep in Mind

Here are a few things to keep in mind when creating a favicon:

  • KISS: Keep it simple stupid
  • Make sure it reflects your brand
  • Try to have a contrasting favicon image

add-a-favicon02


Step 2 – Compress and reduce the size

Now you’ll want to reduce the image size of your icon or logo. In Photoshop, you can go to image > image size.

Reduce your image size to 16x16px, and save it as “icon.png“.

Now, change your file extension from .png to .ico

add-a-favicon03


Step 3 – Add your favicon to your website

Now, upload your favicon to the root folder of your website.

Read how to upload using FTP if you need a quick refresher.

After that, all you need to do is add some code to the <header> section of your website:


Wait… I found a way to cheat…

So here’s a resource to use if you just want to skip most of this guide and just make a favicon. It’s by using a 3rd party website where you

  1. upload your logo or image to an outside server
  2. let the website compress the image for you
  3. download the image your previously uploaded
  4. copy and paste the source code it spits out

Resources:

Favicon Generator: http://favicon-generator.org/

Another Favicon Generator: http://www.favicon.co.uk/

And another: http://www.degraeve.com/favicon/


Your Turn

Can I see your favicon? Reply with a link to your website so I can visit your website and see your favicon!

Tags:


About the Author

Hey it's Mark Ammay. I'm a Web Developer with over 5 years of professional experience in the industry. I help individuals start their own website from scratch, as well as through WordPress. I'm also an Online Entrepreneur who blogs at www.MarkAmmay.com



0 comments
Back to Top ↑