Favicon Size in 2023: Tips And Requirements

  • Favicon definition and detailed description for a better understanding. 
  • How big is a favicon? Chart of possible favicon sizes that are required by different browsers. 
7 min. read
Favicon Size in 2023: Tips And Requirements


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.

Favicon Size Infographics

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>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>



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.

  1. Left side of browser tabs 
  2. Browser history 
  3. Bars in search engines 
  4. Toolbars of applications 
  5. Browser history drop-down 
  6. Recommendations in a search bar 
  7. Bookmarks menu 
  8. Shortcut favicons on desktop 
  9. Taskbar shortcut icons
Where you can find favicons

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

What size should a favicon be in 2023?

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.

  • 48x48
  • 96x96
  • 144x144
  • 192x192
  • 256x256
  • 384x384
  • 512x512

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.

  • For macOS – 32x32 
  • Favicon size for iPhone – 120x120 
  • Dimensions of a favicon for iPad – 152x152 
  • Fav icon size for iPad Retina – 167x167 
  • For iPhone Retina favicon size is 180x180

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.

  • Small-sized tiles – 70x70 
  • Medium size of a favicon on a tile – 150x150 
  • Wide tile favicon dimension – 310x150 
  • Large tile size – 310x310
Microsoft Windows favicon dimensions for tiles

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.

Browser Favicon
file type
Chrome + + + + +
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.

Lead of Software Development
Lead of Software Development
Even though some development projects might appear challenging, professionals of our team take it upon themselves to create an unparalleled solution. We develop programs keeping in mind business needs and goals of our clients.
Talk to Expert

Talk to Expert

Type your questions below to communicate with our experts and receive comprehensive answers.

Email does not exist

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.

  • favicon.ico in sizes 16x16 and 32x32 
  • favicon-16x16.png which is considered to be a more recent equivalent for the ICO format 
  • favicon-32x32.png required by Safari to set by default for browsers and macOS 
  • icon-192.png suited for Chrome and Android 
  • apple-touch-icon-180.png 
  • safari-pinned-tab.svg 
  • mstile-150x150.png 
  • manifest.json file 
  • browserconfig.xml file

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):

  • favicon.ico (32x32 by default), 
  • icon.svg, 
  • apple-touch-icon.png (180x180); 
  • icon-192.png and icon-512.png for web app manifest.

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" }



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.

Nataliia Huivan
Nataliia Huivan
Professional author in IT Industry

Author of articles and news for Atlasiko Inc. I do my best to create qualified and useful content to help our website visitors to understand more about software development, modern IT tendencies and practices. Constant innovations in the IT field and communication with top specialists inspire me to seek knowledge and share it with others.

Share your thoughts in the comments below!

Have any ideas or suggestions about the article or website? Feel free to write it.


No mention of DPI at all? "DPI" doesn't even show up on searching the page? I get that 1 pixel = 1 pixel, but with the diversity of densities across devices, there should be (at the very least) some treatment of the topic in here. Just saying.

Nataliia Huivan Replying to B

Hi! Thank you for pointing it out. We are currently working on improving this article, so your comment will be helpful for us. Subscribe to our newsletter to receive our latest updates.

James James

Nice explanation, havent thought such little thing would be so important

Nataliia Huivan Replying to James James

Thank you for the feedback! Glad you find our explanation comprehensive!

Any Questions?

Get in touch with us by simply filling up the form to start our fruitful cooperation right now.

Please check your email
Get a Free Estimate