A website favicon is the icon that is displayed at the top of web browser. The title bar contains this image and is a unique identification image for your website.
Several websites have website favicon built according to their own custom patterns.Even you can have a website favicon for your personal website. Make an icon and just put it there! Yes, it is that simple. However, this requires some basic knowledge of Photoshop and HTML.
In this tutorial, we will learn how this website favicon can be your next unique identity on the web. You might have noticed several times that, many websites including major ones like Google, Facebook, Twitter, etc. have a small icon on their title bar.
This icon does not change. This is like the trademark website favicon for a particular brand.
So, before we start with the procedure of launching your favicon, let us chalk down the sequence of steps that we need to follow.
- First we create a website logo and convert it to .ico.
- Next we upload the icon file to the web server.
- Finally we code our html accordingly and launch the website favicon
The Photoshop job
In order to create a vibrant little icon, we need the best of imaginations. For the simplicity of this tutorial, I have not elaborated on the procedure of designing a professional looking logo. Maybe that is to come in some other tutorial later.
Here in this tutorial, I am demonstrating the procedure of making a basic image to suit our present needs of making a company website favicon or a personal website maybe.
So, first we open Adobe Photoshop application from the Start button (for Window users it’s the Start button, Mac user kindly take the required alternative). When the window is open, we start our job by opening a new file with a square dimension. (So the canvas size has the same height and width, no matter how big in pixels- 500 or 5000).
So we go to – File > New. When the window opens we provide the same height and width, and the white canvas window opens before us. Now it’s up to your knowledge in Photoshop as to what design you want to prepare.
Here in this tutorial, I have used my own website favicon as an example. As you can see the image below, I had prepared the image with a pixel resolution of 500 X 500. Then I reduced it to 64 X 64 and saved it as an .icon file. Remember; do not keep the huge file resolution as it might cause problems after uploading.
While saving the image as .ico, you might face some challenges because Photoshop by default does not provide the option to save images as .ico type. So, here you have two options to select from –
- You can download free versions of icon maker software available on the internet. Just Google for it and you will get loads of them. This software accepts images and gives icon outputs.
- Another popular option is to download Photoshop plugins or add-ons, as you might like to call it. These packages once installed, will deliver the option of saving as .ico in the “Save as” section.
Finalizing your website favicon
To website favicon does not take that many hassles as you might think it to be. It’s just that several individuals do not know the actual procedure of execution. Once that is clear, you will be able to complete the job very efficiently.
So, our next step in the procedure to make a website favicon is uploading the icon to the server.
Now, at this point, a very crucial point is that the image file must be strictly named as “favicon”. This is a trend and syntax you might say. The browser understands the difference between other images and this. Not only this, website favicon are traced back later by search engines and other websites that link to your website. At that time, this name determines the image that gets displayed.
So, we name the file “favicon.ico” and upload it to the root directory of the server. So our motive to display a website favicon is almost complete.
Final step to display a website favicon – the HTML
To all of you who are getting tensed about the html section; please do not worry even a bit. The best part is, a website favicon display only requires a single html statement at the <head> region.
So, the final step of logo design for website is to study that command of html.
<link href="favicon.ico" rel="shortcut icon" />
The rel is equal to shortcut icon and the href gives the respective URI. (Please change the source address according to your personal settings).
Once this line is present in the <head> section, your website development is complete with a blossoming website favicon. So, now you can make a website logo for yourself. Congratulations!