How To Add Or Change A Favicon On Blogger

Favicon (Favorites Icon) is that little image (usually 16px x 16px in size) you see beside some site's name in your browser's address bar. Having your own Favicon with a pleasing graphical reminder of your web site might be an excellent technique to grab guests attention. So to understand the full details on how to add or change favicon on blogger please make sure to read this post to the very last.

Blogger users will add a custom favicon on their blogs by going to the 'Layout' section and click on the 'Edit' link on the "Favicon" component. "For several bloggers, having a custom favicon (the small image displayed in your browser’s window or tab) is that the crowning glory that ties along the look and identity of an excellent trying web log.

See Also : How To Invite Or Add Multiple Authors on Blogger

Today, we're happy to announce that Blogger in Draft users will currently add a customised favicon to their web log." - Blogger in Draft

How To Add a Favicon to Your web logger Blog

Step 1. Log into your Blogger's Dashboard, then head to the "Layout" and click on the "Add a Gadget" link

Adding A Gadget

Step 2. Click on the "Edit" link on the "Favicon" setting on top of the navbar component.

Edit Favicon

Step 3. A pop-up window can open wherever you'll be able to rummage around for a picture in your drive which will replace the default Favicon image. Click on the "Browse" button and rummage around for your favicon (please note that it ought to have the .ico extension), then click on the "Save" button.

Choosing A File

See Also : How To Delete A Blogger Blog Permanently

Step 4. Currently you must see your own Favicon rather than the Blogger's default favicon.

Your Favicon

Please have in mind that it'd take your time till your new Favicon can seem in your Browser's tab or window.
If you would like to feature animated favicons to your Blogger blogs, then use the subsequent technique instead.

How to Add An Animated Favicon On Blogger Blog

Step 1. Log in to your Blogger account > model > Edit hypertext mark-up language.


Step 2. Click anywhere at intervals the code area and press the CTRL + F keys to open the search box. Write or paste the next tag at intervals in the search box and hit Enter to go looking out it:


Step 3. Paste the code below just above it:

<link href=" your-favicon-links-goes-here" rel="icon" type="image/gif">

Note: Replace your-favicon-links-goes-here together with your Favicon link location

AndroidBrag​ is A perfect place to be tutored and also learn great tips and tricks. Try out these:

Here you'll be able to realize some cool favicons for your web site or blog: . Simply transfer the favicon you prefer, transfer it on tinypic or on a blogger's post, then copy the link address/direct link.


<style type="text/css">.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;height:11px !important;width:11px !important;}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><hr><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'/></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" type="text" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

Step 4. Save the template and you are done adding the Favicon in your Blogger blog. That's all you have to do in this short tutorial. Remember to give us some feedbacks with the comment box below.

Next Post »


Click here for comments
5 May 2018 at 09:34 ×

What i don't realize is in fact how you're now not actually a lot more smartly-preferred than you might be right now. You are very intelligent. You recognize thus considerably in relation to this subject, produced me in my view believe it from a lot of varied angles. Its like men and women don't seem to be involved unless it's one thing to accomplish with Woman gaga! Your own stuffs excellent. All the time take care of it up! login

Congratulations Stefan Forge can PERTAMAX...! Please queue at the nearest pom heheheh...

DO NOT MISUSE THE COMMENT BOX Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Thanks for your comment