Published on May 29th, 2013 | by Mark Ammay0
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.
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
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
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:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
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
- upload your logo or image to an outside server
- let the website compress the image for you
- download the image your previously uploaded
- copy and paste the source code it spits out
Favicon Generator: http://favicon-generator.org/
Another Favicon Generator: http://www.favicon.co.uk/
And another: http://www.degraeve.com/favicon/
Can I see your favicon? Reply with a link to your website so I can visit your website and see your favicon!