-
-
Notifications
You must be signed in to change notification settings - Fork 32
Open
Labels
Description
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.
alegauss