{"id":13410521,"url":"https://github.com/audreyfeldroy/favicon-cheat-sheet","last_synced_at":"2026-04-06T00:03:07.238Z","repository":{"id":49342544,"uuid":"11898182","full_name":"audreyfeldroy/favicon-cheat-sheet","owner":"audreyfeldroy","description":"Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)","archived":false,"fork":false,"pushed_at":"2022-03-18T06:52:04.000Z","size":329,"stargazers_count":9880,"open_issues_count":44,"forks_count":403,"subscribers_count":280,"default_branch":"master","last_synced_at":"2025-10-09T20:02:45.997Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/audreyfeldroy.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-05T12:54:19.000Z","updated_at":"2025-10-06T09:14:21.000Z","dependencies_parsed_at":"2022-09-08T11:20:24.640Z","dependency_job_id":null,"html_url":"https://github.com/audreyfeldroy/favicon-cheat-sheet","commit_stats":null,"previous_names":["audreyr/favicon-cheat-sheet"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/audreyfeldroy/favicon-cheat-sheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audreyfeldroy%2Ffavicon-cheat-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audreyfeldroy%2Ffavicon-cheat-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audreyfeldroy%2Ffavicon-cheat-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audreyfeldroy%2Ffavicon-cheat-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/audreyfeldroy","download_url":"https://codeload.github.com/audreyfeldroy/favicon-cheat-sheet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audreyfeldroy%2Ffavicon-cheat-sheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27778921,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-17T02:00:08.291Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T20:01:07.460Z","updated_at":"2025-12-17T06:55:03.927Z","avatar_url":"https://github.com/audreyfeldroy.png","language":null,"funding_links":[],"categories":["miscellaneous","Others","Other"],"sub_categories":["Favicon"],"readme":"favicon-cheat-sheet\n===================\n\nA painfully obsessive cheat sheet to favicon sizes/types. Compiled from:\n\n* http://mathiasbynens.be/notes/rel-shortcut-icon \u003c-- special thanks `@mathiasbynens`_\n* http://mathiasbynens.be/notes/touch-icons \u003c-- special thanks `@mathiasbynens`_\n* http://www.jonathantneal.com/blog/understand-the-favicon/\n* https://en.wikipedia.org/wiki/Favicon.ico\n* http://snook.ca/archives/design/making_a_good_favicon\n* http://www.netmagazine.com/features/create-perfect-favicon\n* http://www.ravelrumba.com/blog/android-apple-touch-icon/\n* http://msdn.microsoft.com/en-us/library/ie/gg491740(v=vs.85).aspx\n\n.. _`@mathiasbynens`: https://github.com/mathiasbynens\n\nThe HTML\n--------\n\nBasics\n~~~~~~\n\nFor the main favicon itself, it's best for cross-browser compatibility not to\nuse any HTML. Just name the file `favicon.ico` and place it in the root of your\ndomain. [1]_ [2]_\n\nThis works in every desktop browser/version all the way back to IE6, except for SeaMonkey. [1]_\n\nOptional But Encouraged\n~~~~~~~~~~~~~~~~~~~~~~~\n\nYou probably also want the following:\n\n1. Touch icon for iOS 2.0+ and Android 2.1+:\n\n    .. code-block:: html\n\n        \u003clink rel=\"apple-touch-icon-precomposed\" href=\"path/to/favicon-180.png\"\u003e\n   \n2. IE 10 Metro tile icon (Metro equivalent of apple-touch-icon):\n\n    .. code-block:: html\n\n        \u003cmeta name=\"msapplication-TileColor\" content=\"#FFFFFF\"\u003e\n        \u003cmeta name=\"msapplication-TileImage\" content=\"/path/to/favicon-144.png\"\u003e\n\n   Replace #FFFFFF with your desired tile color.\n3. IE 11 Tile for Windows 8.1 Start Screen\n\n    .. code-block:: html\n\n        \u003cmeta name=\"application-name\" content=\"Name\"\u003e\n        \u003cmeta name=\"msapplication-tooltip\" content=\"Tooltip\"\u003e\n        \u003cmeta name=\"msapplication-config\" content=\"/path/to/ieconfig.xml\"\u003e\n\n        \n    ieconfig.xml\n\n    .. code-block:: xml\n\n        \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n            \u003cbrowserconfig\u003e\n              \u003cmsapplication\u003e\n                \u003ctile\u003e\n                  \u003csquare70x70logo src=\"/path/to/smalltile.png\"/\u003e\n                  \u003csquare150x150logo src=\"/path/to/mediumtile.png\"/\u003e\n                  \u003cwide310x150logo src=\"/path/to/widetile.png\"/\u003e\n                  \u003csquare310x310logo src=\"/path/to/largetile.png\"/\u003e\n                  \u003cTileColor\u003e#FFFFFF\u003c/TileColor\u003e\n                \u003c/tile\u003e\n              \u003c/msapplication\u003e\n            \u003c/browserconfig\u003e\n\n        \n\nVery Optional, for the Obsessive\n~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\nIf you're obsessive, you want all this too:\n\n1. Largest to smallest apple-touch-icons [3]_:\n\n    .. code-block:: html\n\t\t\u003c!-- For Iphone 6 plus running iOS 8: --\u003e\n\t\t\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"180x180\" href=\"/path/to/favicon-180.png\"\u003e\n\t\t\n        \u003c!-- For iPad with high-resolution Retina display running iOS ≥ 7: --\u003e\n        \u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"152x152\" href=\"/path/to/favicon-152.png\"\u003e\n\n        \u003c!-- For iPad with high-resolution Retina display running iOS ≤ 6: --\u003e\n        \u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"144x144\" href=\"/path/to/favicon-144.png\"\u003e\n\n        \u003c!-- For iPhone with high-resolution Retina display running iOS ≥ 7: --\u003e\n        \u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"120x120\" href=\"/path/to/favicon-120.png\"\u003e\n\n        \u003c!-- For iPhone with high-resolution Retina display running iOS ≤ 6: --\u003e\n        \u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"/path/to/favicon-114.png\"\u003e\n\n        \u003c!-- For first- and second-generation iPad: --\u003e\n        \u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"76x76\" href=\"/path/to/favicon-76.png\"\u003e\n\n        \u003c!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --\u003e\n        \u003clink rel=\"apple-touch-icon-precomposed\" href=\"/path/to/favicon-57.png\"\u003e\n\n2. Favicons targeted to any additional png sizes that you add that aren't covered above:\n\n    .. code-block:: html\n\n        \u003clink rel=\"icon\" href=\"/path/to/favicon-32.png\" sizes=\"32x32\"\u003e\n3. Favicon Chrome for Android\n\n    .. code-block:: html\n\n        \u003clink rel=\"shortcut icon\" sizes=\"196x196\" href=\"/path/to/favicon-196.png\"\u003e\n        \nThe Images\n----------\n\nCreate at least this:\n\n============= =============== =======================================================================\nSizes         Name            Purpose\n============= =============== =======================================================================\n16x16 \u0026 32x32 favicon.ico     Default required by IE. Chrome and Safari may pick ico over png, sadly.\n============= =============== =======================================================================\n\nMore about favicon.ico below. Yes, it's 1 file with multiple sizes.\n\nIf you also sort of care about iOS and Android but are lazy:\n\n======= =============== =======================================================================\nSize    Name            Purpose\n======= =============== =======================================================================\n180x180 favicon-180.png General use iOS/Android icon, auto-downscaled by devices.\n======= =============== =======================================================================\n\nBut keep in mind that icons with complex detail often don't downscale well.\nOften you have to tweak subtle design details for smaller sizes.\n\nIf you're obsessive, create these too:\n\n======= =============== =======================================================================\nSize    Name            Purpose\n======= =============== =======================================================================\n32x32   favicon-32.png  Certain old but not too old Chrome versions mishandle ico\n57x57   favicon-57.png  Standard iOS home screen (iPod Touch, iPhone first generation to 3G)\n76x76   favicon-76.png  iPad home screen icon\n96x96   favicon-96.png  GoogleTV icon\n120x120 favicon-120.png iPhone retina touch icon (Change for iOS 7: up from 114x114)\n128x128 favicon-128.png Chrome Web Store icon\n128x128\tsmalltile.png\tSmall Windows 8 Star Screen Icon\n144x144 favicon-144.png IE10 Metro tile for pinned site\n152x152 favicon-152.png iPad retina touch icon (Change for iOS 7: up from 144x144)\n180x180 favicon-180.png iPhone 6 plus\n195x195 favicon-195.png Opera Speed Dial icon (Not working in Opera 15 and later)\n196x196 favicon-196.png Chrome for Android home screen icon\n228x228 favicon-228.png Opera Coast icon\n270x270\tmediumtile.png\tMedium Windows 8 Start Screen Icon\n558x270\twidetile.png\tWide Windows 8 Start Screen Icon\n558x558\tlargetile.png\tLarge Windows 8 Start Screen Icon\n======= =============== =======================================================================\n\nICO File\n--------\n\nAn .ico file is a container for multiple .bmp or .png icons of different sizes.\nIn favicon.ico, create at least these:\n\n======= =======================================================================\nSize    Purpose\n======= =======================================================================\n16x16   IE9 address bar, Pinned site Jump List/Toolbar/Overlay\n32x32   New tab page in IE, taskbar button in Win 7+, Safari Read Later sidebar\n48x48   Windows site icons [4]_\n======= =======================================================================\n\nIf you're obsessive and don't mind 1-3kb extra size, also include these sizes\nin your .ico:\n\n======= =======================================================================\nSize    Purpose\n======= =======================================================================\n24x24   IE9 Pinned site browser UI\n64x64   Windows site icons [4]_, Safari Reading List sidebar in HiDPI/Retina\n======= =======================================================================\n\nCreate your .ico out of optimized .png files.\n\nTODO: get confirmation that IE9+ supports .ico files that contain .png files (issue `#9`_)\n\n.. _`#9`: https://github.com/audreyr/favicon-cheat-sheet/issues/9\n\nSVG File\n--------\n\nPinned tabs in Safari 9+ use an SVG vector mask for the favicon instead of any other PNG/ICO/etc. favicons that may be present. Vector artwork in the SVG file should be black only (no shades of black or other colors) with a transparent background. Also, a fill color needs to be defined in the \u003clink\u003e tag - a hex value or color shorthand will work. Here's the markup for adding the icon:\n\n    .. code-block:: html\n    \n    \t\u003clink rel='mask-icon' href='icon.svg' color='#ff0000'\u003e\n\nHelpful Tools\n-------------\n\nI recommend:\n\n1. OptiPNG, to optimize .png files before putting them into an .ico: http://optipng.sourceforge.net/\n2. ImageMagick, to create an .ico from .png files: http://blog.morzproject.com/convert-multiple-png-images-into-a-single-icon-file/ \u0026 http://www.imagemagick.org/Usage/thumbnails/#favicon\n\n    .. code-block:: bash\n\n        $ convert favicon-16.png favicon-32.png favicon.ico\n\nOthers that I haven't tried:\n\n* Favic-o-matic: http://www.favicomatic.com - A favicon generator that cares of .ico, .png and HTML code to make your website shine on every platform, browser or device\n* Ubuntu/Debian package `icoutil` (Fedora package `icoutils`_) provides the program `icotool` which creates .ico from .png files.\n* MSDN recommends this web-based .ico creator: http://www.xiconeditor.com\n* Resize favicons: http://faviconer.com\n* More resizing: https://github.com/abrkn/icon\n* Dynamically setting favicons: https://github.com/HenrikJoreteg/favicon-setter\n* Fancy favicon tricks: https://github.com/component/piecon\n* Web Icon - a simple shell script that generates favicon and touch icons: https://github.com/emarref/webicon\n* Icon Slate app (OS X): https://itunes.apple.com/us/app/icon-slate/id439697913\n* png2ico wrapper for ImageMagick: https://github.com/bebraw/png2ico\n* `GIMP`_: export as .ico, each layer is saved as an image\n\n.. _`icoutils`: https://apps.fedoraproject.org/packages/icoutils\n.. _`GIMP`: https://www.gimp.org/\n\nForcing a Favicon Refresh\n-------------------------\n\nNot normally needed. This is only for those frustrating times when you can't\nget your favicon to refresh, during development:\n\n* Clear the browser cache on Windows (Ctrl+F5 or Ctrl+Shift+R) and on Mac (Command + Shift + R).\n* Also close and reopen browser if IE.\n* If still stuck, try opening new tab. Or see http://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh\n* Temporarily add explicit HTML markup and append a query string. Remove\n  this when you're done:\n\n    .. code-block:: html\n\n        \u003clink rel=\"shortcut icon\" href=\"http://www.yoursite.com/favicon.ico?v=2\" /\u003e\n        \u003clink rel=\"icon\" sizes=\"16x16 32x32\" href=\"/favicon.ico?v=2\"\u003e\n\nFor large versioned deployments, if all site visitors need their favicon\nforce-refreshed in an extreme situation:\n\n* Add explicit HTML markup (customize the sizes part) and put your version\n  number in the filename.\n\n    .. code-block:: html\n\n        \u003clink rel=\"shortcut icon\" href=\"/favicon-v2.ico\" /\u003e\n        \u003clink rel=\"icon\" sizes=\"16x16 32x32\" href=\"/favicon-v2.ico\"\u003e\n\n  TODO: find edge cases where this markup doesn't work (issue `#3`_).\n\n.. _`#3`: https://github.com/audreyr/favicon-cheat-sheet/issues/3\n\nFAQ\n---\n\n**What about having both a default root favicon.ico and favicon.png?**\nI think it's actually better to provide only `favicon.ico` and not `favicon.png`, because:\n\n* An `.ico` is a container for multiple `.bmp` or `.png` files. If you specify 1 default `favicon.png`, and if that `favicon.png` overrides the `favicon.ico`, you are giving up control over how the favicon looks at different resolutions and allowing the browser to do all resizing. For example, you might want the 64x64 version to contain text and the 16x16 version to not display the text at all, since at 16x16 it would be unreadable anyway.\n* There is no `favicon.png` in the HTML5 specification, just `/favicon.ico`. From http://www.w3.org/TR/html5/links.html#rel-icon:\n   - 'In the absence of a link with the icon keyword, for Documents obtained over HTTP or HTTPS, user agents may instead attempt to fetch and use an icon with the absolute URL obtained by resolving the URL \"/favicon.ico\" against the document's address, as if the page had declared that icon using the icon keyword.'\n\nMore about this in http://stackoverflow.com/questions/1344122/favicon-png-vs-favicon-ico-why-should-i-use-pngs-instead-of-icos/1344379#1344379 (Note: the text in the chosen answer about alpha transparency is incorrect. See the 2nd answer.)\n\n**Is it true that favicons should be in the site root?**\nNo, that's only if you don't explicitly specify the browser/device-specific\n`\u003clink\u003e` tags with a favicon path. See https://en.wikipedia.org/wiki/Favicon.ico.\n\nIf you don't have favicon.ico in the root consider adding one, or returning a HTTP 204 instead.\nMany tools and services e.g. bookmarking sites, feed readers, web crawlers etc., request a \nfavicon.ico from the site root, and so receive a HTTP 404 if it's not present. In the worst \ncase some frameworks will return a custom error page which is likely to be many times larger\nthan the missing favicon.\n\n**Is it true that the png has to be named favicon.png?**\nNo, this has never been true as far as I can tell from my obsessive research.\n\n**Is it true that the ico has to be named favicon.ico?**\nIf you don't explicitly specify its `\u003clink\u003e` tag, yes. Explicitness is best,\nso we both name it `favicon.ico` and explicitly specify the `\u003clink\u003e` tag.\n\n**Why not prefix with \"apple-touch-icon\"?**\nIf you don't specify `\u003clink\u003e` tags, iOS looks for files prefixed with\n`apple-touch-icon` or `apple-touch-icon-precomposed`. Many (e.g. HTML5\nBoilerplate) rely on this assumption, but:\n\n* Explicitly specifying `\u003clink\u003e` tags is clearer and supported by Apple.\n* Not hard-coding names as `apple-touch-icon` clears up confusion as to whether\n  the same icons can be reused for other purposes as-is, e.g. reusing\n  favicon-144.png for Windows pinned site.\n\n**Why use iOS precomposed icons?**\n\n* iOS non-precomposed icons add rounded corners, drop shadow, and reflective\n  shine. Sounds great in theory, but in practice the results can be very\n  frustrating, especially to designers.\n* Non-precomposed icons don't work with Android 2.1.\n\n**Why absolute paths?**\nSome Firefox versions require absolute paths. Since all browsers support them,\nit's the simplest choice.\n\n**Why not append a query string to force-refresh for all visitors?**\nSome proxies and load balancers can fail to read query strings in edge cases.\n\nContribute!\n-----------\n\nSend pull requests if you have anything to add/change, providing citations\nand justification. I'd love to see this improve. \n\nNote on March 6, 2020: I'm behind on merging PRs but am slowly catching up. \nBear with me while I get this repo caught up. ❤️\n\nReferences\n----------\n\n.. [1] http://mathiasbynens.be/notes/rel-shortcut-icon\n.. [2] http://www.w3.org/TR/html5/links.html#rel-icon\n.. [3] Adapted from http://mathiasbynens.be/notes/touch-icons\n.. [4] No specifics given by MSDN.\n.. [5] http://blog.morzproject.com/convert-multiple-png-images-into-a-single-icon-file/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faudreyfeldroy%2Ffavicon-cheat-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faudreyfeldroy%2Ffavicon-cheat-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faudreyfeldroy%2Ffavicon-cheat-sheet/lists"}