Favicons. You might not be familiar with the word, but you’ve definitely seen them. Favicons are those little graphic icons displaying next to a website’s title at the top of your browser in the tabs.
If you have a website you can add a custom favicon to it.
Favicons help websites stand out, show up, and reflect your brand amongst the other open tabs.
Let’s explore adding a custom favicon to your website the easy way (using a favicon generator boilerplate-style tool). And then I’ll link you to a more in-depth explanation and guide to doing in the hard way — i.e. instructions for making all the little icon images yourself.
Bare Minimum Favicons
At the bare minimum, you need a 16×16 pixel graphic named favicon.ico to use as the favicon for your website. That’ll cover you in most of the modern web browsers like Edge, Chrome, Opera, Firefox, and Safari.
You can add a basic favicon to your website’s <head> with the following HTML:
<link rel="shortcut icon" href="favicon.ico">The Easy Way — Favicon Generators
Moreover, it’s just as easy to start with a larger image and generate favicons. That’s the easy way to create favicon icons for your website. You can cover all your bases using a free Favicon Generator tool.
By supplying a 260×260 pixels image (or larger) the favicon generator provides you with all the additional intermediary-sized icons and HTML code required to add each of them to your site.
The different sizes incorporate all the different browsers, apps, operating systems, and devices that someone might try to turn your website’s URL into an icon for — like a link on their PC desktop, a Window’s App screen icon, or an icon-link on a smart phone.
Here’s an example of the HTML and different sized favicons you can expect from a favicon generator.
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="favicon.ico">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="theme-color" content="#ffffff">As you can see, you get a variety of favicons.
- Apple touch icon
- 16×16 pixel favicon PNG
- 32×32 pixel favicon PNG
- site.webmanifest
- safari-pinned-tab.svg
- favicon.ico
- browserconfig.xml
If you need more icons you’re likely working with specialized devices or minority-market-share browser vendors. This favicon lineup covers the requirements for most people’s needs.
Adding Favicons the Hard Way
For an more in-depth exploratory guide of favicons — or if you want to know everything there is to know about these tiny icons and how to manually establish them in your website (the hard way) — there’s a detailed explanation over at evilmartians.com. The article is actually quite interesting, but using a favicon generator tool like I shared above is way easier and works for most websites 99% of the time, so that’s what I recommend you try first.
0 Comments