sven
12/10/2015 - 9:05 AM

Notes on Favicons, Tile Icon and Tab Icons

Notes on Favicons, Tile Icon and Tab Icons

README.md
content_copyfile_download
  • Rendered
  • Source

Favicons and more

Favicon

Tutorial: https://scotch.io/tutorials/all-favicons-for-all-devices-and-sizes

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

Alternatives

Tile Icon

Generator: http://www.buildmypinnedsite.com/

Tab Icon

Tutorial: https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/

Clear Safari browser cached icons: ~/Library/Safari/Template Icons

index.html
content_copyfile_download
<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>