Menu
I'm using this online favicon generator to create a favicon for my site and the tool output provides a lot of icons, not only the website favicon. I was curious about which of them do you consider mandatory for a website, and which do you think are unnecessary:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
758
A favicon (/ˈfæv. ɪˌkɒn/; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.
Icons are a visual invitation to users to try out the latest and greatest features of your Web application. Icons should capture your users' attention and direct them to the new feature. Once you've grabbed their attention, tell them just what makes the new feature so great.
Why are icons used? As graphic symbols, computer icons help users quickly and easily identify what they need or want. The use of icons also provides a more appealing visual representation, which makes them more enjoyable to use than traditional text-based links.
Unless you have specific needs, your website should probably support all major platforms: desktop browsers, iOS Safari, Android Chrome, etc.
Is the "online favicon generator" you mention RealFaviconGenerator? If so, you may want to know it's undergoing a huge refactoring to produce a minimalist set of icons.
While its output is still in testing phase, here it is:
manifest.json file for Android Chrome, with two 192x192 and 512x512 icons.browserconfig.xml file for Windows 8.1 and 10, with a single icon.favicon.ico and two 16x16 and 32x32 icons. Maybe some of these icons might be dropped.In the end, the code:
<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="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#14b036">
... if you put the files in your root directory. Else, you need to declare browserconfig.xml and favicon.ico, too.
Full disclosure: I'm the author of RealFaviconGenerator.
87
You want to have ICO pictures at least for these standard dimensions: 16x16, 32x32 and 48x48 pictures in ICO format. However, in same cases you may want to have up to 196x196. I would keep them all, so that each client configuration can pick its preferred one.
References: Ref1 Ref2 Ref3
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
