Creating a favicon for your website

Creating a favicon for your website

It’s amazing that a tiny little image can make a big difference on how your site appears to the viewer.  The tiny icon (favicon) next to your website name on the tab in your browser a small token of your tech savvy design and should not be overlooked.

If you don’t have a favicon for your site, the browser with put up a default icon. Safari displays an blue globe, but most just show a blank document icon:

It’s pretty simple to make a favicon.  Using a program to illustrate and a program to turn your image into a font is all you need–along with your creativity, of course!  Many browsers now accept favicons as .png.   Internet Explorer did not accept .png favicons until IE11.  To be on the save side of all users seeing a favicon on your site, I suggest using an .ico file.

There are many tutorials about setting up the size (16px X 16px) (32px X 32px), etc. for your favicon.  It will depend on what platform you are using it for.  I created a 16px X 16px favicon in this tutorial for simplicity.

I chose to use this for my favicon image:

I created it in illustrator with the font from my logo and saved it as a .png file.   Once you have your .png file created need to take it and upload it at favicon.cc  where your file will be switched to an .ico file.

To do this:  go to www.favicon.cc.  Click on ‘Import Image’ on the left side.  It will bring up an option to browse and then upload your file.  When you’ve done that, it will look like this:

Next, ignoring all the ads on the site to download external things, click on the actual download button to get your ico file.

Favicon.cc will put your icon on their browser tab so you can see what it will look like when you upload it to your own site.   (This is temporary, it will not stay on their site!)

Now, you have the favicon.ico file you need.  Put this in your images directory and direct your html to find the .ico file.  Refreshing your browser and deleting your cookie history will ensure the new favicon shows up on your browser tab.

It’s really that simple and makes your browser tab look sharp.