Skip to main content

Here is how to create a favicon and add to your blog

favicons of websites
Website favicons
How to create a favicon and add or change it in your website or blog.This is a very important thing.Every website has a favicon whether it's google, facebook or youtube, every site has its own unique favicon.It reflects the quality of your website as well.The better favicon your blog has, the more professional it will look.I have answered all of your questions about creating and adding a favicon in this article.

What is a favicon?

Favicon as a favourite icon or website icon.It is shown in the tabs of a browser or in the bookmarks whenever someone bookmarks your website.Without favicon, more it does not look good and makes it difficult for the users to find your site inside their bookmarks collection.It is like an identity of your website.The examples of favicon are given in the main picture above.

Best website icon size:

I recommend the website icon size of 64px by 64px.This will improve the quality of your favicon and will make it clearer to look at.

What is a square image?

An image whose width and height are equal is called a square image.Following picture shows the example of what sizes of image should be used.

Example:

favicon size
correct favicon size
For example, An image whose width is 32 pixels and height is also 32 pixels in size.This is the correct size for your favicon.Don't choose other sizes as they are not compatible for a website favicon.

How to make favicon?

The question i mostly hear is,"how do you create an icon for a website"?It is very easy to create it.Following are the steps required to create a favicon for your website.
  1. Make a graphic that is unique and is relevant to your site.You can make it using an image editor or graphic software such as paint, adobe photoshop, adobe illustrator, gimp e.t.c.
  2. Make sure it is a square image.
  3. Convert your final image to .ico format (.ico format is required for an image to be a favicon).
  4. Upload the .ico file to your blog or website.

How to create favicon in photoshop?

It's really simple to make a favicon in photoshop.Now, why use photoshop to make a favicon image?Because it's a high quality software that will give you great results in making a favicon for your website.

Steps to make favicon in adobe photoshop:

  1. Open up photoshop and make a new project
  2. Keep the canvas size of your project as squared.I recommend width and height of 64 and 64 pixels respectively
  3. Now use the desired tools to make your favicon image in photoshop.
  4. Save it as jpeg or png (recommended)

How to make favicon in illustrator?

This is my most favorite application when it comes to making a favicon for my website.The benefits of illustrator are that it can make vector graphics.This means no matter how much you re size your favicon, its quality will remain the same.The steps in illustrator are as same as for photoshop.I recommend you to use illustrator if you can for the best possible results.

How to create favicon in paint (for beginners)?

Everyone knows how to draw in microsoft paint.You can use it to make a favicon for blog whether it's blogger or wordpress.The good thing is, it's easy to use.I, however, recommend this only for newbies who don't have any experience in graphics designing.The steps are also same as above mentioned tools's.Always make sure to make a square image.

How to create favicon in HTML?

I don't really recommend this option if you are a beginner and can add favicon with other easier ways.But on some websites, you have to add it in the html code.Here are the steps.
  1. Upload your favicon file to your website.
  2. Add this code to your website html : <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  3. Remember to best this code just after the starting <head> tag.

How to convert image to .ico file?

To convert your image to .ico file, you will need a .ico generator also called favicon generator.There are a lot of favicon .ico generators available online but only a few of them work well and don't ask for a sign up before you create your favicon.ico file.I have given the link for best favicon.ico generator in the paragraph below.

Best favicon generator:

The best .ico generator in my opinion is Favicon generator by dynamic drive.It is very easy to use and will convert your image to .ico file for free.You will not need to sign up for this site.All you have to do is to choose your favicon image and download it after it converts that image to .ico file.You can also make favicon image using this tool.

How to add favicon to your site/blog?

Now after you have created your favicon, it's time to upload or add it to your blog or website.Here i will mention only two platforms, Blogger and Wordpress.The procedure for other sites is almost the same.

How to change/add favicon to blogger?

Follow these steps to change the the favicon in blogger.
  1. Go to your blogger blog's dashboard.
  2. Click on the layout button on the left hand pannel
  3. Click edit button located inside the favicon box.
  4. Click on chose file.
  5. Look for your .ico file in the place where you kept it and select it to open it.
  6. Click save.

How to change the favicon in wordpress?

You can use "wordpress favicon plugins" for this.It is relatively easy to add favicon to wordpress.The best plugin for .ico wordpress is "All in one favicon".To install this .ico wordpress plugin,
  1. Go to your wordpress dashboard.
  2. Click on plugins at the left panel.
  3. Click add new button located at the top of the page, next to "plugins".
  4. Search for "All in one favicon" and install it.
  5. Click on activate plugin.
  6. Move your mouse over settings option in the left panel and click on All in one favicon.
  7. In All in one favicon settings, click on upload in .ico framework option
  8. choose your .ico file and save.
  9. Now refresh your wordpress site to see changes.

New favicon is not changed/appearing 

Is your new favicon not appearing in the tabs or bookmarks and you see the old favicon?Or, you think your favicon has not been changed?If so, then don't worry.It will start appearing.The problem is in your browser.Clear your browser cache or use another browser and check if it works.

Labels:
Location: United States

Comments

Post a Comment

Popular posts from this blog

Top 5 best AMP blogger templates for faster page speed

Blogger templates of current age do not provide high-speed browsing experience for the users and also consume a lot of mobile data at the same time that makes it very inefficient for the visitors of your blogspot blog.Blogger blog should have SEO optimized, high speed and responsive templates.But most of the blogger templates lack this and are not that light and SEO optimized as their creators claim.The solution is in AMP. What is AMP (Accelerated Mobile Page)? Acceleration mobile pages also, abbreviated as AMP, is a great new project by the tech giant Google.In this growing world of mobile phone users and because of an increase in internet usage on mobile devices as compared to other devices, someone had to come up with an idea that can make it easier and better for mobile users to browse the internet.AMP is a perfect solution to the slow internet connections as a lot of mobile phone users are restricted to slow network speeds of their respective mobile networks.AMP makes browsing...
12 comments
Read more

Remove footer credit links from blogger template without redirecting

How to Remove footer credit links from blogger without redirecting? How to remove footer credit links from blogger template Remove credit footer links from blogger templates without redirecting to other sites: There are a lot of premium and professional templates for blogger available online and most of them are only paid.Nowadays it is very important to make our blog look more professional.But what most of the bloggers do is they get the free versions of those premium templates that have those ugly and unprofessional looking credit links at the bottom and when they try to remove them, their site gets redirected to some other site.We don't want this to happen.In this tutorial, am going to tell you how to permanently hide those credit links from your blogger template.Follow the steps below. How to hide/remove credit links from blogger: This is a very easy process and you don't need to be an expert in coding.Just use your brain a little bit and copy paste a single line...
9 comments
Read more

9 best tips and tricks to get adsense approval for new blogger blog

Adsense approval for new blogger blog How to get Adsense approval for new blogger Blogspot blog: nowadays, thousands of new blogger or Blogspot blogs are created.Only a few of them are successful in getting Adsense approval.But why is this so?Because they don't meet the requirements of AdSense.There are a lot of things you need to consider before applying for Google Adsense other wise your Adsense account will not be approved.To earn money online  you will have to get Adsense approval if you have a website or a blogger blog.But if you don't get Adsense approval, there are loads of other options through which can generate a lot of income for your blogger blog.But let's just stick to Adsense approval for now. It is easier to get Adsense approval for blogger: Yes, it is easier to get Adsense approval for the blogger than for a website.The reason is the blogger is Google's property just as youtube and if you get Adsense approval for any of these two platforms, then...
Post a Comment
Read more