Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site icon generation feature suggestion #1

Open
bastdan opened this issue Apr 19, 2018 · 1 comment
Open

Site icon generation feature suggestion #1

bastdan opened this issue Apr 19, 2018 · 1 comment
Assignees

Comments

@bastdan
Copy link

bastdan commented Apr 19, 2018

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 alegauss self-assigned this Apr 19, 2018
@alegauss
Copy link
Contributor

Hi Daniel,

This is great feature and it will be part of Image Post Processing.

Thanks,
Alexandre

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants