Make Tails logo the new favicon
favicon.ico is hardcoded. ICO being nothing more than a container format, we could include the favicon in several sizes. That should be confirmed, but starting from 32x32, it probably could be left as is, with its face.
At last, we definitely would want to optimize and compact them before creating that ICO file.
#7 Updated by naar about 5 years ago
- File favicon.svgz View added
- File favicon-nofill.svgz View added
- File favicon-smpl.svgz View added
- File favicon-smpl-nofill.svgz View added
Which one do you prefer:
If you don't or can't see it, the second image has a white background while the third image has a transparent one.
If 16², 32², 48², 64², 128² and 256² px can fit in 2 KiB, I think we should go for it. Otherwise, 16², 32², 48² and 64² should suffice for now. Do you agree?
#14 Updated by Anonymous about 5 years ago
Sorry, I don't agree. A favicon can be 32, 48 or 64 pixels large. Only IE6 cannot handle 64px large favicons, all other browsers can (see also https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16)
Furthermore, one could also add apple touch icons, which have sizes of 57, 72, 114, 144. I am in favour of adding those too.
<link rel="icon" type="image/png" href="http://tails.boum.org/img/favicon.png" /><!-- classic favicon -->
<link rel="apple-touch-icon" href="http://tails.boum.org/img/57.png" /><!-- iphone -->
<link rel="apple-touch-icon" sizes="72x72" href="http://tails.boum.org/img/72.png" /><!-- ipad -->
<link rel="apple-touch-icon" sizes="114x114" href="http://tails.boum.org/img/114.png" /><!-- iphone retina -->
<link rel="apple-touch-icon" sizes="144x144" href="http://tails.boum.org/img/144.png" /><!-- ipad retina -->
(the urls are merely examples).
#15 Updated by far about 5 years ago
And what's the issue?
There is not a single problem to distribute the favicon in any size(s)
Kind of hard to see what's the stop sign in this ticket.
If it is clear what should favicon look like,
shouldn't we take it to the next level and
- State which sizes will be needed
- Do same looking favicon (inverted - in tails color, transparent?) in those sizes
- actually put it on the site?
#16 Updated by Anonymous about 5 years ago
@far a ticket which has an assignee in general indicates that the assignee will take care of it when s/he has the time to do so :)
However, we've stated the needed sizes, so if you want to prepare the images for example, I guess this can be helpful.
@naar i prefer the transparent background too.
#17 Updated by far about 5 years ago
- File favicons.tar.gz added
generated via http://www.favicomatic.com
paths in code may be changed according to where the favicons will be stored on the server.
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://tails.boum.org/img/apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://tails.boum.org/img/apple-touch-icon-114x114.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://tails.boum.org/img/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://tails.boum.org/img/apple-touch-icon-144x144.png" /> <link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://tails.boum.org/img/apple-touch-icon-60x60.png" /> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://tails.boum.org/img/apple-touch-icon-120x120.png" /> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://tails.boum.org/img/apple-touch-icon-76x76.png" /> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://tails.boum.org/img/apple-touch-icon-152x152.png" /> <link rel="icon" type="image/png" href="https://tails.boum.org/img/favicon-196x196.png" sizes="196x196" /> <link rel="icon" type="image/png" href="https://tails.boum.org/img/favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/png" href="https://tails.boum.org/img/favicon-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="https://tails.boum.org/img/favicon-16x16.png" sizes="16x16" /> <link rel="icon" type="image/png" href="https://tails.boum.org/img/favicon-128.png" sizes="128x128" /> <meta name="application-name" content="Tails - Privacy for anyone anywhere"/> <meta name="msapplication-TileColor" content="#FFFFFF" /> <meta name="msapplication-TileImage" content="https://tails.boum.org/img/mstile-144x144.png" /> <meta name="msapplication-square70x70logo" content="https://tails.boum.org/img/mstile-70x70.png" /> <meta name="msapplication-square150x150logo" content="https://tails.boum.org/img/mstile-150x150.png" /> <meta name="msapplication-wide310x150logo" content="https://tails.boum.org/img/mstile-310x150.png" /> <meta name="msapplication-square310x310logo" content="https://tails.boum.org/img/mstile-310x310.png" />
list of files in archive:
apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon-57x57.png apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png code.txt (code to put in the stylesheet) favicon-128.png favicon-16x16.png favicon-196x196.png favicon-32x32.png favicon-96x96.png favicon.ico mstile-144x144.png mstile-150x150.png mstile-310x150.png mstile-310x310.png mstile-70x70.png
#18 Updated by naar almost 5 years ago
Thank you for your inputs.
Kind of hard to see what's the stop sign in this ticket.
- The ICO file size, which should keep a reasonable size (although I was deeply utopist to believe it could be 2 KiB only… ).
After some readings, I now think that it should include the logo in 16², 32², 48², 64² and 180² (general use iOS/Android icon, auto-downscaled by devices) pixels.
- The smallest delta policy.
Actually, I would prefer to temporarily limit the scope of this ticket to a mere favicon.ico update. Adding the markup you've provided could be discussed a bit more as part of #7021 in order to agree on which ones we'd want to include. IMO, there is no need for a version in each of these sizes.
- My own planning, not so light ATM.
That shouldn't take so much time but it does, essentially because I'm actually not able to:
- produce a proper ICO file (and that make it bigger than it should be) with the PNG images I have.
- reduce the 16 x 16 and 32 x 32 px versions to a 4-bit depth.
I'm in touch with the Icoutils and OptiPNG developers to understand a little better those issues.
I've also started to work on the SVG files I uploaded to clean, improve their semantic and merge them into a single one so that anyone can easily extract a version of the logo at any size, with or without its face, with a transparent or an opaque background… All that with a single command.
#19 Updated by Anonymous over 4 years ago
The current logo, when downsized to the resolution of a favicon, may be very difficult to easily identify and/or associate with a USB drive. Originally thought it was a down arrow. Maybe we could close this ticket and look to create a new favicon (if people don't like the current one) that is more universally recognizable at small resolutions, to the project?
#21 Updated by Anonymous almost 3 years ago
So this ticket was about changing the .ico on the website into a more modern version, providing PNG and Apple touch icons. I think this should still be done at some point.
- the easiest thing to do right now is to replace the original .ico with a new one, using the logo. https://tails.boum.org/favicon.ico
Then I fear that because we use ikiwiki templates from upstream, we can't simply add those lines in our own page template. Instead we should propose such a change upstream. I am creating a ticket for this.