Favicon Size: Tips And Requirements
Intro
Favicon is an important design element for every website. Even though it seems not so significant adding favicon images serves a great purpose. Thus, business owners should not oversee favicon designs and setting up if they want to create proper representation for their company in the digital public space. However, when it comes to creating app and website favicons, the important question arises – “What size is a favicon?”. Actually, it’s quite a tricky query as making one ICO file in one size isn’t enough. Experts of Atlasiko, who are proficient providers of web development services , will help you to understand the topic.
In this article, we’ll determine what favicon size suits the most for particular purposes and what general dimensions for favicons there are. Undoubtedly, this information will be useful both for designers and front-end developers. Read ahead to find out about all possible favicon sizes we’ve compiled in a chart.
What is a favicon?
Let’s give a plain definition to answer the question “What is a favicon image?”. To put it simply, a favicon (short form of “favorite icon”) is a file with small images (one or several) that can be a web browser icon, tab or shortcut icon, bookmark, or have other variants of placement, and serves as a representation of your organization. The main purpose why designers create favicon images and developers set them for websites and apps is to raise brand awareness and make it look more professional. People might not remember the full name of your company but a high-quality favicon will catch their attention and they’ll be able to recognize the brand among many others.
How to add favicon HTML
Adding a favicon to your website isn’t an overcomplicated task. To set it up front-end developers have to save the “favicon.ico” file to the web server root directory or to the created there folder for images. Then in your “index.html” file, add an element <link> with attributes inside the <head> tag.
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
After that they have to save the “index.html” file with the renowned HTML favicon code and reload it in the web browser. As a result, they easily add favicon HTML and it’ll be displayed on the browser tab.
Here is a full code example of how to add a favicon in HTML. In this particular sample, the element <link> is added right after the <title></title>.
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Where you can find favicons
For a better illustration of favicons, let’s enlist some most frequent placements where you can see ICO images and other favicon formats on your web browser or smart devices.
What size should a favicon be in 2023?
If setting up is an easy part then choosing the correct ICO size is rather complicated for designers since there are lots of them. To help you in this task, we found all favicon sizes and described what they are required for. Keep in mind that the best favicon should have high contrast and fewer details, and to display it in great quality you should choose a bigger size. It’s important for designers to make sure their favicon is presentable-looking and can be recognized even in a small size. Take a look at our chart and the favicon examples with various dimensions.
16x16 pixels
Commonly used favicon dimensions for most browsers (standard favicon size)
32x32 pixels
Best size for favicon used for taskbar shortcut icons; favicon dimension for macOS; favicon resolution for retina-based smart devices
48x48 pixels
Favicon size used for Chrome browser
76x76 pixels
Home screen fav icon on iPad
96x96 pixels
Favicon image size for desktop shortcut icons; can be used for Chrome
120x120 pixels
Typical ICO size for iPhone
128x128 pixels
Favicon size for Chrome web store
144x144 pixels
Favicon icon size used for Chrome browser
152x152 pixels
Common favicon dimensions for iPad
167x167 pixels
Favicon pixel size on iPad Retina
180x180 pixels
Mostly used size of a favicon for Apple touch icons and iPhone Retina
192x192 pixels
Size recommendation for a web app manifest by Google Developers
领英推荐
196x196 pixels
Chrome home screen icon on Android
228x228 pixels
Size for favicon for Opera Coast
256x256 pixels
Possible favicon dimensions for Chrome
300x300 pixels
Favicon dimension required by Squarespace
384x384 pixels
Fav icons size for Chrome browser
512x512 pixels
Favicon sizes which WordPress requires
Favicon sizes for Chrome
Google Developers sources recommend 192x192 favicon size for Chrome. A used browser will automatically scale your image to the right size. If you don't want it to be auto-changed, provide variations of your favicons sized on the basis of 48x multiples. Here are all the common sizes of favorite icons possible.
Best favicon size for Safari
Such a widely used browser as Safari provides dimensions for favicons to be displayed on different devices. Let's take a look at recommended sizes of favicons for Apple gadgets.
Safari can also utilize SVG favicon format for displaying it on the pinned tabs bar.
Microsoft Windows favicon dimensions for tiles
Microsoft Windows (versions 8, 8.1, 10, and in Live tiles of Windows 11) uses shortcut icons for tiles. It can be seen on PCs, laptops, tablets, etc.
Favicon format support
Most modern browsers support all favicon file types. Basically, you can add a few favicon formats, and your browser will upload a default favicon for website or according to your settings.
BrowserFavicon file type
ICO imagesFavicon PNGGIFJPEGSVGChrome+++++Safari+++++Opera+++++Edge+++++Firefox+++++
Why favicon.ico is the best
As we can see, designers and developers nowadays can use different favicon formats and file types while in the past .ico format was in favor. Although other types are available, you still have to make the .ico file. The reason is simple – for many browsers .ico format is still a default image type. That means while uploading a favicon your browser will automatically pull up an ICO format from the root directory at first. Only after other file types that you set manually will be loaded, the previous icon in the browser tab can be replaced. Thus, we can assume that images of favicon.ico format give some advantages in speed of loading and ensure your site isn’t left without a fav icon.
Favicon set of files
Summing up all the previous info about favicon sizes and formats, we gathered the set of files that you need to create for a successful addition of a favicon. Naturally, you can configure this list in accordance with your needs.
For an HTML browser the favicon icon and file set contains even fewer components. You need to have 5 icons overall and a JSON file (manifest.webmanifest):
Look at the representation of the favicon HTML code.
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">
And in your web app manifest:
// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Conclusion
We hope that this article provided you with extensive information about favicon size variations, ways of their adding, and possible file formats. This knowledge will help you to create an ultimate favicon set appropriate for all browsers and devices. As favicons ensure the representation of your brand and enhance recognition, make sure your favicon design is clear but striking at the same time to attract attention. In our blog, you’ll find more tips for web designers and developers. Subscribe and don't miss the opportunity to get all insights. We also provide professional web design services , so you can request the creation of your perfect website logo to use as a favicon.