Generating favicons for your website can be created in many ways. You can use any graphic editor you wish but for this article we will be using GIMP. It is free and for suited for our uses here in this article.

https://www.gimp.org/

We will also be using an online generator with our image that will generate all the needed icons for different platforms.

https://realfavicongenerator.net/

GIMP

Select

Set the and to

Set the option to

Now you have a canvas to create your icon. Remember this is a large image and will be shrunk down to image sizes such as 16x16 and 32x32. Making it this large to begin with is recommended by the realfavicongenerator app.

To make rounded corners select the and then in the settings area mark the checkbox named .

Now select an area that isn’t quite as big as the whole canvas.

Fill in the background with your color schema and add some text with your logo. Make sure it isn’t going outside the selection. Give it some headroom so it won’t get cutoff when generating the icon.

Real Fav Icon Generator App

Now go to:

https://realfavicongenerator.net/

Upload your image and it will give you some options about what icons to generate.

Usually stick with the defaults.

Then it will show a download button. Click that and download your icons.

It will also tell you where to put your assets and what HTML to use, such as:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest"><link rel="mask-icon" href="/safari-pinned-tab.svg">
<meta content="#da532c">
<meta content="#ffffff">

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store