How to Create and Add a Favicon to a Blogger Blog?

How to Create and Add a Favicon to a Blogger Blog?

How to Create and Add a Favicon to a Blogger Blog?
Welcome to the blog, on this point, I am going to teach you how to create a Favicon for Bloggers Blog which works in all platforms and browsers and then how to add it to the blog.

The method I will teach is that we will create icons of different sizes in png and SVG format, and it will also contain JSON and XML files which we will upload to the CDN server and add to our blog theme.

So if you want to know what Favicon is, how to create them, and how to host them on the fastest CDN servers, and how to integrate them into the Blogger theme, follow these steps.

What Is a Favicon?
Favicon is a small icon image file that is uploaded to the root directory of a website or blog and appears in the Browsers tab and in bookmarks before the title of the web page.

This icon is the logo of the website and is usually 16x16 pixels in size. However, sometimes it is enlarged, such as the default Blogger icon at 32x32 pixels. And its extension is ".ICO".

How to Create a Favicon for a Blogger's Blog?
We need Adobe Photoshop to create a favicon for our blog. If you do not have this program installed, you can download it from this link. Once you have the Adobe Photoshop program installed on your system, you need to download the Sample Favicon PSD file from the link below and open it in Adobe Photoshop.

The Favicon PSD file of this sample is in square dimensions and the ratio is 512x512 pixels, I know the ratio is excessive, this is so that we can easily edit our blog's Favicon inside the Adobe Photoshop program, and Android Chrome's large favicon is 512x512 pixels. And after editing, we will convert it to ICO format with the help of online webs, which will automatically reduce the icons file size and dimension. And below is a picture of the structure of the dimensions of Favicon.

Image of Favicon's dimension example.

The sample favicon zip file contains two PSD files of circle and rectangle, you can open one of the files as per your need in the Adobe Photoshop program. As soon as you open the Sample Favicon file in the Adobe Photoshop program, then create a Favicon using your site logo or the first alphabet of your domain name and save it in the PNG image format.

Edit your favicon in Adobe Photoshop, and save it as a png image.

When you save your Favicon image file, go to this website and click the blue "Select Your Favicon Image" button on the top right of this website, then browse and open the Favicon image file you created. As soon as you open the image of your Favicon on this site then this site will generate your favicon for different devices which will have different dimensions and sizes and then take you to its configuration page.

Once you open the website, browse, select, and open your favicon png file in it.

When you're on the Favicon Settings page, Choose "Use the original image as is." in the Favicon for Desktop Browsers and Google Result Pages configurations as shown in the picture below.

Select Use the original image as is an option.

Then, scroll down and go to "Favicon for iOS - Web Clip" and select the option "Add a solid, plain background to fill the transparent regions." and customize your favicon background color and margin size to suit your needs.

Select Add a solid, plain background to fill the transparent regions option. Adjust colors and margins.

Go to the "Assets" option, and just check "In the HTML, declare only the icon with the highest resolution" option as you can see in the picture below.

In the Assets menu, select In the HTML, declare only the icon with the highest resolution option.

Scroll down and go to the "Favicon for Android Chrome" configuration and select the option "No change, keep the master picture as it is." And type your blog name in the "App Name" box.

select No change, keep the master picture as it is option and type your blog name in the app name box.

Go to the Options menu and select the "Standalone" and "Not specified. Android Chrome will behave as it usually does when the user rotates his/her device." option, and type your blog URL address in the "Start URL" box.

Select the Standalone and Not specified option and type your blog URL.

Go to the Assets menu, select "Create only recommended, high resolution icons" in the Modern versions, and check the "Declare the icon in the HTML code" box in the legacy version.

Select Create only recommended, high-resolution icons and Declare the icon in the HTML code.

Scroll down again and go to Windows Metro configuration, then select "Use the original favicon as is." option and add hex color code to the Windows Metro user interface box according to your favicon color.

Select Use the original favicon as is an option and add a hex color code.

Go to the Assets menu and check the "Medium, square icon, declared with two HTML markups" and "Medium, square icon" boxes.

Select Medium, square icon, declared with two HTML markups and Medium, square icon option.

Scroll to the macOS Safari layout and select the "Turn your picture into a monochrome icon. Play with the threshold to get the best result." option and add the theme color hex code that suits your favicon.

Select Turn your picture into a monochrome icon. Play with the threshold to get the best result and add your custom theme color.

Now scroll to the "Favicon Generator Options" and select the "I cannot or I do not want to place favicon files at the root of my website. Instead I will place them here:" option and add this URL in it. Before adding this URL replace "GITHUB-NAME" with your GitHub account username, because we will use a GitHub account to host our Favicon files on the CDN server.

Add the CDN URL with your GitHub account name.

Then go to the Compression menu and select the second" Very high quality, very low compression factor Expected compression rate: 58%" option.

Select Very high quality, very low compression factor option.

Go to the Scaling Algorithm menu, and select the first "Mitchell" option.

Select the first Mitchell option.

Go to the "App Name" menu, then select a "Specific app name, override the page title." option, type your blog name in it, and click the "Generate your Favicons and HTML code" button.

Select the Specific app name, override the page title option, and type your blog name in it.

After a few seconds, the Real Favicon website will prepare the Favicon package file and redirect you to the install your favicon page. On this page you will download a zip file by clicking on the "Favicon Package" button, which will include images of your Favicon in different sizes, XML and manifest files. And copy the "HTML5" code to a notepad, we have to include this code in our blog theme.

Download the Favicon package file and save the HTML5 code in Notepad.

After downloading the Favicon package file to your computer, create a folder named favicon, and extract all the zip files in it.

Extract the Favicon package file into a favicon folder.

Okay, now that Favicon and all the other required files are ready, now we have to host these files on the CDN server and add the HTML5 code to the Blogger theme. To do this, follow the next step.

How to Add a Favicon to the Blogger Blog?
Blogger's Basic Settings has the Favicon option where you can upload your blog's Favicon, and the file size of this icon should be a maximum of 100KB (Kilobyte). If you manually add a Favicon to your blog theme using the rel="shortcut icon" tag, then there will be no limit on the size of the favicon.

So we're using our HTML5 code method to add a favicon to our Blogger blog, which is compatible with all browsers and devices, so let's start the process of adding a favicon to the blog.

First, go to your GitHub account, and click the "+" icon in the top right corner, and click "New repository".

Click the plus icon and then click New Repository.

Type a favicon in the Repository name, select the "Public" privacy option, and then click "Create Repository" button.

Type favicon in repository name, choose Public privacy and click on the create repository.

Once your favicon repository is created, click "uploading an existing file" link as you can see in the image below.

Click on the uploading an existing file link.

Click the "choose your files" link and select all your favicon package files, and wait until all the files have been uploaded, and then click the "Commit changes" button.

Upload favicon files and click Commit changes.

Once you click on the "Commit changes" button, you will see a screen of "Processing your files...", you have to wait on this screen until the processing is complete.

Image of Processing your files on the GitHub repository.

When your favicon files are uploaded to the GitHub repository, your favicon repository will look like this.

Image of favicon files in the GitHub repository.

OK, now our favicon files is on the GitHub account storage, and all this file will be automatically transferred to the CDN server, all we have to do is use the CDN URL according to our GitHub account favicon files directory, which we've already used it when we were generating the favicon on the real favicon generator website.

Go to the Blogger Dashboard, select the blog in which you want to add the favicons, and go to the "Themes" menu, click the drop-down arrow, and then click the "Edit HTML" option.

Select the Blog, Themes menu, and click Edit HTML Options.

Paste the HTML5 code copied from the "Real Favicon Generator" website under the head of your theme, and at the end, add a / to each Favicon HTML5 code line, as you can see in the image below, as I added the slash before the greater-than sign in my code, and click the "Save Theme" icon in the top right corner.

Insert the HTML5 code at the bottom of the head, add a slash before the greater-than sign, and click the Save icon.

That's all now your Favicons have been added to your blog, which will appear on all browsers and devices. And now that this post is over, I hope you have learned something from this post, and if you have any questions about this post, you can do so in the comments section.
Load comments