A favicon is the icon that appears in a browser's address bar next to the URL. If you want to create one for your own website, we have described several methods you can use to achieve that.
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 .png 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.
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.
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 .png 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.
To create your favicon using IrfanView you would start by downloading the free application from here. You can open up your 16×16 png 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.
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, .ico, or .cur 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.
Now that you know how to create and add a favicon to your website, here are a few helpful tips on how to make one that is eye-catching and easy to remember by your visitors.
Considering the tiny size of a favicon, users won’t be able to make out what is in the photo as it will most likely look blurred and unattractive.
A single character or two are fine as the Yahoo! website favicon illustrates. If you use an entire word inside the favicon, though, it may be impossible to discern when the website renders on a smaller screen.
Yes, that is not an easy task but quite feasible. Take a look at the Procter & Gamble website, for example. We bet you will recognize the brand the moment you see their favicon.
Why is that important? Various web page viewers have their specific selections of colors. That means that your favicon may look one way in Mozilla Firefox and another in Microsoft Edge, for instance.
It’s highly recommended, then, that you test the favicon on several different backgrounds, with black, gray, and white being a minimum required set.
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.
What makes an e-commerce business successful? A vast and varied inventory, multiple ways to accept payments, friendly and helpful customer support via multiple channels, or on-time delivery? Yes, all of that. Plus an easy-to-use and visually interesting website, as it is the ease of interaction with a site that can make a real difference. In […]
Learn about the key principles common to all email marketing strategies for small business In this post, we provide the main guidelines that every small business owner should follow when setting up and running an email marketing campaign. Just like every organized event, we can break down an email marketing campaign into three stages: preparation, […]
Keep these important considerations in mind when creating a lawyer website In this post, we discuss the basic elements that every law firm website should have in order to attract leads and convert them into сlients. From layout, navigation, and content to SEO and performance, every detail is crucial if you’re serious about taking your […]