Feature #8942

Make Tails logo the new favicon

Added by naar 2015-02-22 21:23:33 . Updated 2017-07-10 10:33:28 .

Status:
Confirmed
Priority:
Low
Assignee:
Category:
Target version:
Start date:
2015-02-22
Due date:
% Done:

50%

Feature Branch:
web/7021-modernize-website
Type of work:
Website
Blueprint:

Starter:
1
Affected tool:
Deliverable for:

Description

As part of Feature #7021, it has been discussed to replace the favicon with a refined version of the logo (a sketch can be viewed here.

Actually, 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.

Files

favicon-USB.png (9564 B) BitingBird, 2015-02-23 00:36:21
favicon.svgz (3454 B) naar, 2015-03-23 23:40:22
favicon-nofill.svgz (3084 B) naar, 2015-03-23 23:40:35
favicon-smpl.svgz (3257 B) naar, 2015-03-23 23:40:45
favicon-smpl-nofill.svgz (3173 B) naar, 2015-03-23 23:40:50
3232.png (9667 B) far, 2015-03-29 15:51:13
3232_real.png (1936 B) far, 2015-03-29 15:51:14
favicon32.png (1240 B) far, 2015-03-29 17:03:27
favicons.tar.gz (437685 B) far, 2015-03-30 10:39:13

Subtasks

Related issues

Related to Tails - Feature #7021: Review & modernize website markup and css Resolved 2014-04-03
Blocked by Tails - Feature #13197: ikiwiki upstream: integrate different favicons to main page template Confirmed 2017-06-28

History

#1 Updated by BitingBird 2015-02-23 00:33:46

  • Subject changed from Make Tails logo the new the favicon to Make Tails logo the new favicon
  • Category set to Infrastructure
  • Status changed from New to Confirmed

#2 Updated by BitingBird 2015-02-23 00:34:47

  • related to Feature #7021: Review & modernize website markup and css added

#3 Updated by BitingBird 2015-02-23 00:37:03

Here is the quick draft of USB-favicon

#4 Updated by intrigeri 2015-02-23 09:50:16

  • Category deleted (Infrastructure)

#5 Updated by sajolida 2015-02-23 10:42:15

naar: I just gave your the “Contribute” status, so now you can assign the ticket to yourself.

#6 Updated by naar 2015-02-23 14:52:57

  • Assignee set to naar

#7 Updated by naar 2015-03-23 23:43:45

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?

#8 Updated by BitingBird 2015-03-24 00:21:04

I prefer transparent background. Maybe we could discuss it at the next contributors meeting, to get more opinions?

If yes, please add the ticket to the agenda: https://tails.boum.org/blueprint/monthly_meeting/

#9 Updated by naar 2015-03-24 13:01:32

  • % Done changed from 0 to 50

Done.

#10 Updated by sajolida 2015-03-24 14:51:27

I definitely prefer the transparent background.

I’m not sure this is important enough to get to the monthly meeting, unless we have a big fight over this on the ticket.

#11 Updated by far 2015-03-29 15:51:55

#12 Updated by far 2015-03-29 15:53:31

definitely update the favicon of Tails site.

#13 Updated by far 2015-03-29 17:04:04

Classic, clean and probably proper favicon

#14 Updated by Anonymous 2015-03-29 17:24:21

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.





(the urls are merely examples).

#15 Updated by far 2015-03-29 17:39:01

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

  1. State which sizes will be needed
  2. Do same looking favicon (inverted - in tails color, transparent?) in those sizes
  3. actually put it on the site?

#16 Updated by Anonymous 2015-03-30 08:58:46

@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 2015-03-30 10:42:49

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 2015-04-20 12:26:00

Thank you for your inputs.

far wrote:
> 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 Feature #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:

  1. produce a proper ICO file (and that make it bigger than it should be) with the PNG images I have.
  2. 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 2015-09-09 17:36:52

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?

#20 Updated by intrigeri 2015-09-15 02:45:01

> 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.

What favicon resolution are you referring to? The discussion above says there are many possibilities.

#21 Updated by Anonymous 2017-06-28 08:49:36

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.

Next steps:

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.

#22 Updated by Anonymous 2017-06-28 08:52:22

@naar, are you still up for exchanging the .ico directly in our Git repository?

#23 Updated by Anonymous 2017-06-28 08:52:38

  • blocked by Feature #13197: ikiwiki upstream: integrate different favicons to main page template added

#24 Updated by Anonymous 2017-07-10 10:33:28

  • Assignee deleted (naar)

No news since 2 weeks. Unassigning.