How to Create and Add a Favicon to a Blogger Blog?
Blogger Tips
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.
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.
When you save your Favicon image file, go to this realfavicongenerator.net 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.
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.
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.
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.
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.
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.
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.
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.
Go to the Assets menu and check the "Medium, square icon, declared with two HTML markups" and "Medium, square icon" boxes.
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.
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 https://cdn.statically.io/gh/GITHUB-NAME/favicon/main/ 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.
Then go to the Compression menu and select the second" Very high quality, very low compression factor Expected compression rate: 58%" option.
Go to the Scaling Algorithm menu, and 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.
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.
After downloading the Favicon package file to your computer, create a folder named favicon, and extract all the zip files in it.
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".
Type a favicon in the Repository name, select the "Public" privacy option, and then click "Create Repository" button.
Once your favicon repository is created, click "uploading an existing file" link as you can see in the image below.
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.
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.
When your favicon files are uploaded to the GitHub repository, your favicon repository will look like this.
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.
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.
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.