How To Create A Bookmark Icon

Design Resources Web & Graphic Design

How Can I Create a Favicon for My Website?

What is a favicon? A favicon is the icon that appears in a browser's address bar next to the URL. Every browser has the ability to show you a website's favorite icon. No matter what browser you are using the icon is always in the same place. If you create a "favorite" (via your bookmarks) […]

thumbnail

What is a favicon?

A favicon is the icon that appears in a browser's address bar next to the URL. Every browser has the ability to show you a website's favorite icon. No matter what browser you are using the icon is always in the same place. If you create a "favorite" (via your bookmarks) out of the URL, you will see the favicon next to your favorite.

A favicon is actually an .ico file and is not a renamed .bmp or .gif file. You will need to follow the instructions below to create one and integrate it in your website. We will show you how to create a favicon using several different methods.

You can see an example of the favicon below.

Wikipedia describes a Favicon as follows:

A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage.^[1] A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab. Some programs allow the user to select an icon of their own from the hard drive, and associate it with a website.

Why would I need a favicon for my website?

After reading the introduction you should know what a favicon is. You should also know why someone would want to have one. We will continue on with asking "Why do other websites have them and what do they do for us?"

The easiest explanation for having a favicon is marketing and branding. By associating your icon with your website you are helping your brand's recognition. People will be able to identify your website with this icon. It can also help users find the website they are looking for quickly from their favorites folders. The little icon really goes a long way.

Every major website has one and getting a favicon for your site can be a small step towards making your website or blog a little more professional.

How do I create a favicon for my website?

There are many ways to create a favicon. We can use a graphics application to create one, we can use a free application to convert any file to a .ico file, and finally we can use a free website that will convert existing graphic files to a .ico file. These .ico files can be used as your favicon.

The standard specifications for the file is a 16×16 .ico file. If you are a Photoshop guru you will have no problem creating your own. For the less technical savvy, we will look to an application called Irfanview (which we will cover a little later in this post.) This will let you convert a 16×16 .bmp file into a .ico file that will function as a favicon.

After uploading your favicon to the root of your website, you will need to link to it from your page's HTML. The best implementation of the code will work on Internet Explorer, Firefox, Opera, Chrome and possibly others. That code is as follows:

          <link rel="shortcut icon" href="https://www.example.com/myicon.ico">

This code appears below the <head> tag.

Creating a favicon using Irfanview

To create your favicon using irfanview you would start by downloading the free application from here. You can open up your 16×16 bitmap file in here by using File –> Open. After you open the file you will see a screen similar to the one below.

Next you will need to open the file menu and choose save as. You will need to drop down the "save as type" menu and select the ICO – Windows icon type.

Now you will be able to save your ico file properly. After it is saved you will be able to upload it to your webserver. The file needs to be in the root folder. After uploading the file you should be able to go to your domain name /favicon.ico and view it in your browser.

Creating a Favicon using a free web service

We saw how to manually create our favicon, create our favicon by saving as a .ico file from Irfanview and now we will show you how to create a favicon using a free website called favicon.cc. You start by visiting the website. You will see a screen similar to the one below.

You will be able to import an image from your local machine and turn it into a favicon. You can do this by clicking on "import image." You will see this screen where you will be able to upload your .jpg, .jpeg, .gif, .png, .bmp or .ico file. After browsing to the folder and file, click on upload. If the image that you are uploading is not already 16×16 you can use the shrink to square icon option above the upload button.

When you are finished you can use their on screen image editor (similar to Microsoft Paint) or you can download your new favicon. It will be in the proper .ico format and ready to upload.

Conclusion

A favicon is an important part of a website's development. It helps create a visual association with the icon and your domain name. We showed you the file specifications if you want to create the .ico file yourself. We also showed you how to convert an existing image to a .ico file from within a free application called Irfanview. Finally we showed you how to use Favicon.cc to upload almost any image and convert it into a favicon.

Do you have other methods for creating favicons? If so, we would love to hear from you in the comments below!

Comments are closed.