What is Favicon and How To Make and Install One on Your Site?
What is Favicon and how to make a favicon is going to be explored in this post. We will talk about making a favicon using free online favicon maker(s) and also installing your newly created website icon to your site.
What is Favicon
A favicon (short for Favorite Icon), appears in the upper left side of your browser’s address bar. It’s usually a 16×16, 32×32 or 64×64 pixel square image (icon), whcih is also known as a website icon, shortcut icon, URL icon or bookmark icon.
It is basically an image that distinguishes a website/company from others. What’s the first thing that comes to your mind when you see the following image?…
That is Google's very well-known Favicon
Google of course!
You see how easy it is to advertise and embed your brand in people’s mind. That’s the power of favicon. Simply put: a favicon for your blog or website, is another way to make your brand easily recognizable.
Making a favicon using an online favicon maker
Making a favicon is very easy. It’s basically making an image that you like in above mentioned sizes and saving it as a “ico” file. There are many free favicon generators online like DynamicDrive or AnimatedFavicon.
You can also use the built in favicon generator of image editing softwares like GIMP or PhotoPlus to create your own favicon.
How to add a favicon to your site?
Here is the step by step instruction on how to add a favicon onto your blog or website:
- Use your image editing software or any favicon generator to make a favicon.
- Save your favicon as favicon.ico
- Upload the favicon image to your ”public_html” folder (in case of word press, upload it to “public_html/wp-content/themes/my-theme-name/”).
- (WordPress/blog) Go to your WordPress Admin Dashboard. Navigate to Design – Theme Editor – Header (header.php), and insert this line of code <link rel=”shortcut icon” href=”<?php bloginfo(’template_directory’); ?>/favicon.ico” /> between <head> and </head> of your (header.php) file. Don’t get confused, the best place to put it is the upper section, where your css file link is located.
- (Website) Go to your Web Root (public_html/www) and navigate to your “index.html” file. Insert this line of code <link rel=”icon” href=”favicon.ico” type=”image/x-icon”> <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”> into the head tag of your “index.html” file and hit update.
- Open a new browser and type in your blog/site url. Congratulation! There is your blog’s/site’s favicon on the upper left side.
That’s it! Making and installing a favicon can’t get any easier than that. Using a free online favicon maker, makes easy and quick work of making a favicon.
loading...
loading...
You May Also Like:
