{"id":24,"date":"2026-10-15T19:16:27","date_gmt":"2026-10-15T19:16:27","guid":{"rendered":"https:\/\/refracttools.com\/blog\/?p=24"},"modified":"2026-10-15T21:07:16","modified_gmt":"2026-10-15T21:07:16","slug":"favicon-sizes","status":"publish","type":"post","link":"https:\/\/refracttools.com\/blog\/image-optimisation\/favicon-sizes\/","title":{"rendered":"What favicon sizes do you actually need?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Favicon sizes are one of those topics where old advice never dies. Search for it and you will find lists of twenty or more icons, Windows tile images and XML files that modern browsers ignore. In practice a current site needs about five files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide lists the favicon sizes that still matter, explains what each one is for, gives you the HTML to paste in, and covers what Google needs to show your icon in search results.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-refract-takeaways is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Key takeaways<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You need a <code>favicon.ico<\/code>, a 180\u00d7180 Apple touch icon, and 192\u00d7192 and 512\u00d7512 PNGs in a web app manifest. An SVG favicon is a worthwhile extra.<\/li>\n\n\n<li>SVG favicons now work in every major browser, including Safari since version 26.<\/li>\n\n\n<li>Give the Apple touch icon a solid background. iOS fills transparent areas with black.<\/li>\n\n\n<li>For Google search, the icon must be square, crawlable and at a stable URL. Larger than 48\u00d748 is recommended.<\/li>\n\n\n<li>Windows tiles, <code>browserconfig.xml<\/code> and dozens of PNG sizes are no longer needed.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The favicon sizes you actually need<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><div class=\"table-scroll\" tabindex=\"0\" role=\"region\" aria-label=\"Scrollable table\"><table><thead><tr><th>File<\/th><th>Size<\/th><th>Used by<\/th><\/tr><\/thead><tbody><tr><td>favicon.ico<\/td><td>16, 32 and 48px inside one file<\/td><td>Browser tabs, bookmarks, older browsers and tools that request \/favicon.ico directly<\/td><\/tr><tr><td>favicon.svg (optional)<\/td><td>Any (vector)<\/td><td>Sharp tab icons at any zoom level in current browsers<\/td><\/tr><tr><td>apple-touch-icon.png<\/td><td>180\u00d7180<\/td><td>iPhone and iPad home screens<\/td><\/tr><tr><td>icon-192.png<\/td><td>192\u00d7192<\/td><td>Android home screen, listed in the manifest<\/td><\/tr><tr><td>icon-512.png<\/td><td>512\u00d7512<\/td><td>Android splash screens and app install prompts, listed in the manifest<\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Everything else is optional. Some generators also output 16\u00d716 and 32\u00d732 PNGs, which do no harm, but the ICO file already covers those sizes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">favicon.ico is still worth having<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">ICO is an old format, but it has one big advantage: lots of software asks for <code>\/favicon.ico<\/code> at the root of your domain without reading your HTML at all. Feed readers, some link preview services and older browsers all do this. Without the file, those requests return a 404 and the icon is blank.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An ICO file can hold several sizes in one file. 16, 32 and 48px covers standard and high-density screens, and the 48px version also meets Google&#8217;s recommended minimum.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">SVG favicons now work everywhere<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For years, SVG favicons worked in Chrome, Edge and Firefox but not Safari. Safari 26, released in 2025, added SVG support for icons throughout its interface, including favicons, so a vector favicon now works in every major browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An SVG stays sharp at any size and can even adapt to dark mode with a media query inside the file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 32 32\"&gt;\n  &lt;style&gt;\n    path { fill: #1d1b4b; }\n    @media (prefers-color-scheme: dark) {\n      path { fill: #ffffff; }\n    }\n  &lt;\/style&gt;\n  &lt;path d=\"M4 4h24v24H4z\"\/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Keep the ICO alongside it for older browsers and tools that only look for <code>\/favicon.ico<\/code>. If your logo is complex, simplify it for small sizes. Fine detail disappears at 16px whatever the format.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Apple touch icon<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When someone adds your site to their iPhone or iPad home screen, iOS uses the Apple touch icon. One 180\u00d7180 PNG covers current devices. iOS applies its own rounded corners, so supply a square image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Two things trip people up. iOS fills any transparent area with black, so a transparent logo usually ends up on a black square. Give this icon a solid background colour. And leave some padding around the logo so it does not touch the edges once the corners are rounded.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Android and the web app manifest<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Android uses icons listed in a web app manifest, a small JSON file linked from your HTML. Chrome looks for 192\u00d7192 and 512\u00d7512 icons in it when deciding whether your site can be installed as an app.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"Your Site\",\n  \"short_name\": \"Site\",\n  \"icons\": [\n    { \"src\": \"\/icon-192.png\", \"sizes\": \"192x192\", \"type\": \"image\/png\" },\n    { \"src\": \"\/icon-512.png\", \"sizes\": \"512x512\", \"type\": \"image\/png\" }\n  ],\n  \"theme_color\": \"#1d1b4b\",\n  \"background_color\": \"#ffffff\",\n  \"display\": \"standalone\"\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Android can also crop icons into circles and other shapes. If you add a <code>\"purpose\": \"maskable\"<\/code> icon, keep the important part of the logo inside the central 80% of the image so nothing is cut off.<\/p>\n\n\n<aside class=\"tool-card tool-card--inline\"><span class=\"swatch\" style=\"background:#2f4bff\" aria-hidden=\"true\"><\/span><div class=\"tool-card__body\"><p class=\"tool-card__eyebrow\">Free tool<\/p><p class=\"tool-card__name\">Favicon generator<\/p><p class=\"tool-card__blurb\">A complete favicon pack and HTML tags from one logo.<\/p><\/div><a class=\"btn primary\" href=\"https:\/\/refracttools.com\/favicon-generator\/\">Try it free <span aria-hidden=\"true\">\u2192<\/span><\/a><\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">The HTML to add to your head<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"icon\" href=\"\/favicon.ico\" sizes=\"32x32\"&gt;\n&lt;link rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xml\"&gt;\n&lt;link rel=\"apple-touch-icon\" href=\"\/apple-touch-icon.png\"&gt;\n&lt;link rel=\"manifest\" href=\"\/site.webmanifest\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>sizes=\"32x32\"<\/code> on the ICO line is deliberate. Without it, some browsers pick the ICO even when an SVG is available. If you are not using an SVG, drop the second line.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Put the files in the root of your site, the same folder as your home page, so the paths above work and <code>\/favicon.ico<\/code> is where tools expect it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Favicons in Google search results<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Google shows a favicon next to your site name in search results, which makes a clear, recognisable icon worth getting right. Google&#8217;s guidelines ask for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A square icon. The minimum is 8\u00d78px, but larger than 48\u00d748px is recommended so it looks good everywhere it appears.<\/li>\n\n\n<li>A stable URL that does not change often.<\/li>\n\n\n<li>An icon file and home page that Googlebot is allowed to crawl.<\/li>\n\n\n<li>One favicon per hostname. A subdomain can have its own, but a subfolder such as \/blog\/ cannot.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">After changing your favicon, Google can take anywhere from several days to several weeks to pick it up. Requesting indexing of your home page in Search Console can speed that along.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What you can safely drop<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>browserconfig.xml<\/code> and <code>msapplication<\/code> meta tags for Windows Start screen tiles.<\/li>\n\n\n<li><code>rel=\"mask-icon\"<\/code> pinned tab icons, which current Safari no longer needs.<\/li>\n\n\n<li>Long lists of Apple touch icons at 57, 72, 114, 152px and so on. One 180\u00d7180 icon is enough.<\/li>\n\n\n<li>Separate Android icons at 36, 48, 72 and 96px. The manifest&#8217;s 192 and 512px icons cover them.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group is-style-refract-callout is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Browsers cache favicons aggressively. If an updated icon will not show, open the favicon URL directly and hard refresh, or test in a private window. For a site-wide change, renaming the files or adding a version query string forces a fresh download.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Make the whole set from one logo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You do not need to export each size by hand. Drop a square logo of at least 512\u00d7512px, or an SVG, into the <a href=\"https:\/\/refracttools.com\/favicon-generator\/\">favicon generator<\/a>. It builds the ICO, the Apple touch icon with a solid background, the Android icons and the manifest, previews them in a browser tab and on a phone home screen, and gives you the HTML. Everything runs in your browser. If your logo needs converting first, the <a href=\"https:\/\/refracttools.com\/image-converter\/\">image converter<\/a> can turn an SVG into a high-resolution PNG.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The short list of favicon sizes a modern website needs, what each one is for, the HTML to add, and what Google requires to show your icon in search.<\/p>\n","protected":false},"author":1,"featured_media":36,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_refract_tool":"favicon-generator","footnotes":""},"categories":[9],"tags":[21,5,22],"class_list":["post-24","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-image-optimisation","tag-favicons","tag-image-tools","tag-seo"],"_links":{"self":[{"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":1,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/posts\/24\/revisions\/25"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/media\/36"}],"wp:attachment":[{"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}