Project

General

Profile

Feature #8942

Make Tails logo the new favicon

Added by naar over 4 years ago. Updated about 2 years ago.

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

50%

Feature Branch:
web/7021-modernize-website
Type of work:
Website
Blueprint:
Starter:
Yes
Affected tool:

Description

As part of #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.

favicon-USB.png View (9.34 KB) BitingBird, 02/23/2015 12:36 AM

favicon.svgz View (3.37 KB) naar, 03/23/2015 11:40 PM

favicon-nofill.svgz View (3.01 KB) naar, 03/23/2015 11:40 PM

favicon-smpl.svgz View (3.18 KB) naar, 03/23/2015 11:40 PM

favicon-smpl-nofill.svgz View (3.1 KB) naar, 03/23/2015 11:40 PM

3232.png View - full-sized-transparent (9.44 KB) far, 03/29/2015 03:51 PM

3232_real.png View - 32x32 size prepared (1.89 KB) far, 03/29/2015 03:51 PM

favicon32.png View - favicon of Tails website, classic, 32x32px (1.21 KB) far, 03/29/2015 05:03 PM

favicons.tar.gz (427 KB) far, 03/30/2015 10:39 AM


Related issues

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

History

#1 Updated by BitingBird over 4 years ago

  • 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 over 4 years ago

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

#3 Updated by BitingBird over 4 years ago

Here is the quick draft of USB-favicon

#4 Updated by intrigeri over 4 years ago

  • Category deleted (Infrastructure)

#5 Updated by sajolida over 4 years ago

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

#6 Updated by naar over 4 years ago

  • Assignee set to naar

#7 Updated by naar over 4 years ago

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 over 4 years ago

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 over 4 years ago

  • % Done changed from 0 to 50

Done.

#10 Updated by sajolida over 4 years ago

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 over 4 years ago

#12 Updated by far over 4 years ago

definitely update the favicon of Tails site.

#13 Updated by far over 4 years ago

Classic, clean and probably proper favicon (this version is 32x32px)

#14 Updated by u over 4 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 over 4 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

  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 u over 4 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 over 4 years ago

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 over 4 years ago

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 #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 about 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?

#20 Updated by intrigeri about 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.

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

#21 Updated by u about 2 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.

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 u about 2 years ago

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

#23 Updated by u about 2 years ago

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

#24 Updated by u about 2 years ago

  • Assignee deleted (naar)

No news since 2 weeks. Unassigning.

Also available in: Atom PDF