Simple Steps to add or change a favicon for blogger blog.
Simple Steps to add or change a favicon for blogger blog.
.png)
Are you using a blogger custom favicon? If not, you really should get one.
Many blogger owners still use the default favicon for Blogger.
To build a brand identity for your blogger blog, you must replace the default favicon with your custom favicon.
If you have a custom well designed favicon in your Blogger blog, and you'd like to add one, follow these simple and easy steps.
Table Of content:
- What is favicon for blogger blog?
- How to change the favicon in blogger blog?
- Method 1-Changing favicon via settings.
- Method 2-Manual method to add Favicon directly to the HTML.
what is favicon for blogger blog?
A favicon is a small icon that appears in the address bar next to the site URL.
As a favicon, the blogger blog shows its orange default icon file.
By using your customized little icon, you can make the community blog more attractive to your target audience.
Recently, the option to change a Favicon existed in Layout Options.
Blogger has recently released a new interface.
But, the option to add a Favicon no longer appears under Layout.
How to change the favicon for blogger blog?
There are two ways to change the blogger blog favicon, and both of them work.
If you have updated to the new Blogger version, the first method may no longer work for you; instead, try the second method, which will undoubtedly work.
Method 1- Changing favicon via settings.
To get started, follow these simple steps:
1- open your blogger account or sign in.
2- Jump to a Dashboard section (shown on the left), just under the Themes option, click on Settings.
3- You will now see the Favicon Option, Click the "Favicon" link, as shown below.
A new window will show up with the message "Upload custom favicon, Please use a square image less than 100KB."
4- click "choose file" where you can change the favicon or remove it entirely.
As of now, this feature just supports ICO format files for favicons.
If you want to use a regular JPEG or PNG image as a favicon through ICO file format.
you can use an ICO converter or an online IcoFX tool, also convertio to convert the image.
If your ICO favicon is blurry, you can replace it with a high-quality PNG format favicon by using the manual method.
(which we will see later in the article).
5-Simply tap the Save button after you've chosen a favicon image.
Blogger will resize and upload the favicon image you choose for your blog.
The new interface is mobile devices friendly.
As a result, it is useful when using Blogger on a phone.
It will take a little time for your blog to update with your new favicon.
If the favicon on your Blogger blog site does not update, clear all data from the web browser tab before checking again.
Method 2-Manual method to add Favicon directly to the HTML
If the first method does not work for you, you can try another method to add a favicon manually to the Blogger blog, which will work.
Simply follow the steps below carefully.
- To start, you must first back up your Blogger template, Select 'Theme' Then select Backup.
- To save an offline copy of the backup, click Download.
Now, follow the steps below to change the favicon on Blogger blog:
1-Move to "Template" and then "Edit HTML."
2- Then press Ctrl + F to search for '<head>'. Insert the following code after the head tag.
<link rel=" shortcut icon" href="https://yourexample.com/favicon.ico" type="image/x-icon">
Replace the 'href' URL in the preceding line with "https://yourexample.com/favicon.ico," where yourexample.com is the URL or location where your favicon is saved (hosted).
You can upload a favicon to Google Drive.
(the file type should be shared as 'with anyone that has the link') or any other free image hosting web page that enables favicon upload.
End up making your favicon file's name 'favicon.ico.' Update the URL and the suffix '/favicon.ico' in the above code to the updated URL.
5- After adding the code, click "Save" and then refresh your site.
When you open your blog, your new favicon must be visible in the address bar.
If you found this article useful, please leave your feedback in the comments section, and I will do my best to answer all of your questions.
Post a Comment