Go to Favicon To create your icon. After that there will be many options to choose Like Image to icon, text to icon, Emoji to icon. I am going to explain all the steps to create a favicon for your website.
TOC 🎢
Image to Icon 👓
To convert your image logo to icon, Follow these steps
- Drag and drop the image in box and click Download
- After you downloaded icon file extract it and open the folder
- You will see the icon file with many sizes
- And there is a
site.webmanifest
Installation 📀
Open your Editor drag and drop all the files in your project file
Inside the index.html type the following command in your head tag
<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">
And that’s How you will create a Favicons for your website
Text to icon ☯
To Convert text to icon file
- There will be a lot of options to choose and select for your text to icon file
- I will be breaking it down one by one
- Text = This is where you input your text
- Background = This is how your icon shape will be determined
- Font Family = This is where your text will get desired font that you choose
- Font Size = This is how your text size will be
- Font Colour = This is how your Text Colour will be
- Background Colour = The colour in background
Installation 📀
Same as above
Emoji to Icon 😎
Click the emoji that you want to be your icon Download it
Installation 📀
Same as above