Change the Favicon on Blogger

First thing you need to do is create your own custom made favicon. In this case you do not have to use an image to favicon generator, but your image should be either a .gif or a .png. In you example we are going to use a .png file. If you are not sure what kind of image to use browse through some of the free favicons that we offer, perhaps there will be one there that you would like to use. If you do decide to use one of the many favicons we have to offer don’t click “Download this favicon” because that will give you a file in the Windows .ico format. Instead right click on the image of the and choose “Save Picture As”.


After you have the image you would like to use as your favicon, goto your Blogger.com blog and create a new post. It does not matter what you call it since you don’t need to publish it. Once you have created a new post use the image upload / Add Image (Blue button next to the ABC Spell Checker) button to upload your favicon to your Blogger.com blog.





Once you have uploaded the image, you will need to switch to “Edit HTML” mode if you are using the “Compose” mode. Once you are looking at the HTML you will see something like this:. You need to highlight and copy the part in quotes right after src. In this case it would be: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnTOHFwggn9rdky8bCmoRTrBtUCuFciPVKIbyda6L9KFAAspFaJGBbXNSXsfkeTECezG5wGD8coKYaNtqYTOB9ziWEEolMnKegIqr1-czLxuT10cpKDtP-lTSImyIupqK-t5fUdAEm3lF/s400/favicon.png. You should paste it into Notepad or another text editor. You don’t want to lose this and you will be closing the Blogger.com editing window next. Once you have the location of the image you uploaded copied, you can click on the Layout tab of your Blogger.com blog. Once you are at the Layout, you need to click “Edit HTML” Look in the HTML for a tag that says and right below it paste: < link href="" rel="shortcut icon" >< link href="" type="image/png" rel="icon" >Once you have those lines pasted into the template, copy the src of the image you want to use as you favicon that you uploaded earlier and paste it into the two lines you just added where the href=” is. In our case it looks like this: < link href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnTOHFwggn9rdky8bCmoRTrBtUCuFciPVKIbyda6L9KFAAspFaJGBbXNSXsfkeTECezG5wGD8coKYaNtqYTOB9ziWEEolMnKegIqr1-czLxuT10cpKDtP-lTSImyIupqK-t5fUdAEm3lF/s400/favicon.png" rel="shortcut icon" >< link href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnTOHFwggn9rdky8bCmoRTrBtUCuFciPVKIbyda6L9KFAAspFaJGBbXNSXsfkeTECezG5wGD8coKYaNtqYTOB9ziWEEolMnKegIqr1-czLxuT10cpKDtP-lTSImyIupqK-t5fUdAEm3lF/s400/favicon.png" type="image/png" rel="icon" >
Click save template and your Blogger.com should now have your fancy new custom favicon showing on the address bar when you visit your blog.

If for some reason it does not work, visit the following site :
freefavicon.com