Designers and developers are often asked to add Favicons to websites. But, most of them still use a single icon for supporting web browsers on the desktop only. Recently, Favicon support has evolved with new devices, OS updates, and platforms.
This article will detail what a Favicon is and its use. Then, you will learn the best way to provide the correct Favicon support for your platforms.
What is a Favicon?
Favicon is shorthand for “favorite icon.” It’s a file containing a small icon. That icon represents your brand on website tabs, desktop apps, mobile apps, or other places. Browsers must support the file type to show your branded favicon.
Why Should My Brand Use Favicons?
Visual brand consistency is key to marketing any company. You want people to commit your branding to memory. Favicons are a wonderful design element to reinforce your brand recognition.
If you have your favicon in various places on a user’s web browser, you will elevate their user experience. You’ll want your favicon to be legible and in its best possible presentation.
Initial Favicon Design Specs
Your initial favicon design should be 260 pixels by 260 pixels for optimal results in (.png, .jpg, .svg, …)
Go to https://realfavicongenerator.net/. Then choose the option to “Select your Favicon image” to start the generating process.
- To begin, you will jump to a page that will show how your image will look on various devices, browsers, and platforms. Use this page to tweak the design in certain situations.
- Under “Favicon Generator Options” make sure to select “I will place favicon files in the root of my website”. Other options within this are up to you.
- Click on “Generate your Favicons and HTML code” button at the bottom of the page.
Finally, download your Favicon package, make a copy of it, and copy the code to share with the developer. The code that you will send to the developer ought to look like the example below:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2bBoxMENwd"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2bBoxMENwd"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2bBoxMENwd"> <link rel="manifest" href="/site.webmanifest?v=2bBoxMENwd"> <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2bBoxMENwd" color="#5bbad5"> <link rel="shortcut icon" href="/favicon.ico?v=2bBoxMENwd"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
How to Implement Favicons
After you receive the favicon package, add both the assets for the images generated in the download package to the root of the website. Also, add the generated code to the <head> section of the website.
Please ensure to add the assets to any git repos.
Have Questions About Favicons?
Our designers and developers can raise your favicon game. We champion brand consistency, recognition, and better user experiences. Put us to the task to create and implement a favicon for your site. Or, reach out if you have any questions.