Looking for a guide on how to generate a favicon for your website? or you already have it in place, but browser and device support is the obstacle. I’ll guide you to generate a curated set of favicon and add it to your website that would support the majority of browsers and devices using www.favicon.one.
favicon.one is built for every user. It logically processes the uploaded image, helps you to adjust it for various devices, and quickly generate a curated set of favicon.
Kumar Deepak
First of all, you need a logomark of your brand. Logomark looks good as a miniature icon on top of the browser’s tab. If you don’t have a logomark, then I would recommend using the first letter of your logotype (the brand name). For example, if the brand name is “Adidas“ – so I would use the letter “A” out of it and not the complete name/logotype.
How many icons are required and of what size?
The different device requires various sized favicon. It’s laborious to generate a favicon image of each size and add it to the code. favicon.one takes this hassle away and simply generates 6 icons and 1 webmanifest file under default settings. These files guarantee that your favicon is accurately working on desktop browsers, Android, and iOS devices.
Minimum favicon files that are generated by favicon.one are listed below.
-
favicon-16×16 & favicon-32×32
These are the standard size for most desktop browsers.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> -
android-chrome-192×192 & android-chrome-512×512
As the name implies, these sizes support android devices with the Chrome browser. Icons are configured using the
.webmanifestfile. -
manifest.webmanifest
The web app manifest is a JSON file that tells the browser about your PWA and how it should behave when installed on the user’s desktop or mobile device. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched.
<link rel="manifest" href="/manifest.webmanifest"> -
apple-touch-icon
There are about nine combinations for apple-touch-icons, based on the screen size and iOS versions. Starting from 60x60px to 180x180px. favicon.one creates a 180x180px favicon because it will automatically scale down for smaller devices like the iPhone/iPad.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> - favicon.ico Yes, it’s still on the list due to historical reasons.
Steps to generate favicon.
1. Visit www.favicon.one
2. Upload your logomark (logo)
You can easily drag and drop your logo to the website or just click the upload box and browse one.
PNG file of size 500x500px is recommended. I will be using a sunny plant logo for demo purposes with a dimension of 1000x1000px. You can surely use your own logo to generate a favicon set.
Once the image is ready, you can adjust the image for Apple, Android, and Windows devices (if required). You can easily adjust image background color, image size, add description and much more.
3. Click “Generate Favicon”
Once satisfied with the settings of your image, click Generate Favicon button placed at the end.
Please wait while your favicon set is being generated. Once processed, you would be redirected to the download page where you will find your download and the link & meta tags code snippet that you need to paste inside the <head> tag of each webpage of your website.
5. Click “Download Favicon”
Unzip the downloaded faviconone.zip file and place its content in the root directory of your project.
Copy the code from link & meta tags section and paste it inside the <head> tag of each page of your website. Make sure every required file is uploaded to the server and refresh the website.
Congrats! 🎉 You have successfully generated a favicon set providing support for all the modern browsers and devices. I highly recommend using favicon.one for generating favicons for your website.
If you liked favicon.one please spread the love. For any help, feel free to drop a comment below.