How to Make a Favicon and a Free Application icon

Have you ever thought to make the Website or blog that you manage more attractive? For example how to make a favicon for a blog. Sounds trivial, but this has the potential to influence the attention of the visitor to click on the site or blog that you manage.

Apart from the theme design and appearance of a website, this is very influential for a website. In addition to making a website more beautiful, the blog favicon also aims to inform visitors about the differences between the website you manage and other websites.

In this article, I will share How to Make a Favicon for Blogs and Apps. Previously, you had to go to the free and online favicon builder website at here.

How to Create Free Favicon and App Icons

1. The first step you have to do is open a website https://www.favicon-generator.org

It should be noted, you must first create a logo on the logo maker site or you can do your own design, such as on Pixlr, Adobe Photoshop, and others. The image format to be converted into an icon must have an image format of jpg, png, jpeg, etc. which may be supported by the favicon generator website.

2.Upload the image that you have prepared for conversion to an icon, click Choose File , then select the image that you will make the icon. After that, click Create Favicon.

3. For the next arrangement, it has the following explanation:

Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps

It creates icons for the Web, Android applications, and has various other icon sizes.

Generate only 16x16 favicon.ico

Only for icons that are small, i.e. 16x16 (pixel)

Maintain Image Dimensions (don't resize to be square)

Serves so that the icon that is created is not converted into a grid or square shape.

Include your favicon.ico in the public gallery.

The icon you have created will be added to the favicon-generator.org public storage gallery

4. After following point number 2 (two), you will be redirected to the download page. Where your favicon has been made, then it depends on how you process it.

From the image above, you can immediately download the iconic image by clicking Download the generated favicon.

You can also use the HTML script code that has been prepared, for example as follows.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

Keterangan :

a. You can replace the URL marked with the color red with your own URL, for blogspot, we can create your own image storage area, for example /p/apple-icon-57x57.html, and for WordPress, it usually has its own storage area, such as /assets/apple-icon-57x57.php.

5. Done

Well, for the free favicon creation stage you are finished. However, maybe some of you still don't understand how to install a favicon on Blogger on the latest version. Yes, initially the feature was in blogger's Layout Menu, but for some reason, this feature has been moved.

For those of you who don't understand how to install a favicon on the latest version of Blogger, you can follow these steps:

How to Install Favicon on the Latest Version of Blogger

1. Enter your respective Blogger Account

2. Then click Menu Settings.

3. Click on Favicon (under Google Analytics Property ID), then you will be switched to a new tab where you will change the favicon.

4. Then click Choose File, then select the image that you downloaded earlier to make your website icon.

5. Finally, click Save.

For how to create an icon for the application that you have created, you can read the full version at Easy Ways to Create Applications on Appsgeyser.