Install imagemagick:
brew install imagemagick
Creating the .ico file with multiple sizes:
convert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.ico
magick convert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.ico
Tutorial: https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/
Clear Safari browser cached icons: ~/Library/Safari/Template Icons
| <head> | |
| <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="http://domain.com/favicon.ico"> | |
| <link rel="apple-touch-icon" sizes="57x57" href="/img/icons/favicon-57.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/img/icons/favicon-57.png"> | |
| <link rel="apple-touch-icon" sizes="72x72" href="/img/icons/favicon-72.png"> | |
| <link rel="apple-touch-icon" sizes="114x114" href="/img/icons/favicon-114.png"> | |
| <link rel="apple-touch-icon" sizes="120x120" href="/img/icons/favicon-120.png"> | |
| <link rel="apple-touch-icon" sizes="144x144" href="/img/icons/favicon-144.png"> | |
| <link rel="apple-touch-icon" sizes="152x152" href="/img/icons/favicon-152.png"> | |
| <meta name="application-name" content="My website"> | |
| <meta name="msapplication-TileImage" content="/img/icons/favicon-144.png"> | |
| <meta name="msapplication-TileColor" content="#000000"> | |
| <link rel="mask-icon" color="#000000" href="/img/icons/pinned.svg"> | |
| </head> |