Skip to content

Site icon generation feature suggestion #1

@bastdan

Description

@bastdan

I would like to suggest a site icon generation feature for Shiohara. Each browser handles site icon presentation its own way, therefore, its hard to manage all possibilities.

  • The most common icon declaration are:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

Where possible icon sizes are:
Recommended 16x16, 32x32, 48x48
Optimal 16x16, 24x24, 32x32, 64x64

  • Android and iOS can use more hi-res images, since a webpage could be added to the phone or tablet home screen. Several formats can be found at official documentations:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128x128.png" sizes="128x128" />
  • For Windows 8 and newer versions, an website could be pinned to the start menu. Custom meta tags are required for this functionality:
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
  • In addition, for Windows 8 and newer versions, meta application-name will display the site's name on the tile, and also, its possible to choose a tile background color.
    In my opinion, a tile color select funcionality has low priority. Application name value could be the configurated site name at Shiohara's home screen:
<meta name="application-name" content=""/>
<meta name="msapplication-TileColor" content="#FFFFFF" />

To conclude, a single 310x310 image file could be used to generate a 64x64 .ico file and several png files according with the specs above. Also, the required link/meta tags could be generated automatically.
Developers usually rely on third-party applications to manage icon library and link/meta tags. It would be great if Shiohara had this functionality embedded to its core.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions