Generating a Favicon
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.
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 File > New
Set the width and height to 260
Set the Fill With option to Transparency
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 Rectangle Select Tool and then in the settings area mark the checkbox named Rounded Corners.
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 Favicon Package 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">
