Page MenuHomePhabricator

Wikimedia's Phabricator installation should use a custom favicon
Closed, ResolvedPublic

Assigned To
Authored By
flimport
Jul 9 2014, 2:16 PM
Referenced Files
F111935: favicon-in-tab.png
Apr 12 2015, 8:35 PM
F111599: Phab-favicon_WM.ico
Apr 11 2015, 8:55 PM
F111345: phabricator_fav-48_simple2.png
Apr 11 2015, 9:33 AM
F111346: phabricator_fav-48_simple1.png
Apr 11 2015, 9:33 AM
F111260: phabricator_favicon_commonstyle.svg
Apr 11 2015, 2:10 AM
F111216: phabricator_fav48-dark4.png
Apr 11 2015, 1:36 AM
F111214: phabricator_fav48-dark3.png
Apr 11 2015, 1:25 AM
F111204: phabricator_fav48-dark1.png
Apr 11 2015, 1:11 AM
Tokens
"Love" token, awarded by mmodell."Like" token, awarded by Negative24."Love" token, awarded by Aklapper."Like" token, awarded by Ricordisamoa.

Description

Wikimedia Phabricator instances would look better with the wmf.ico favicon that can be found at

[operations/mediawiki-config.git] / docroot / bits / favicon / wmf.ico

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

jeremyb wrote on 2014-09-07 18:00:49 (UTC)

Bugzilla seems to now have the standard bugzilla favicon.

I think my first preference is a new (or currently unused) icon with Wikimedia branding (RGB?) but also unique to phab. Failing that or in the interim, keep the phab upstream icon.

https://meta.wikimedia.org/wiki/Red,_green,_and_blue

CC Max

qgil wrote on 2014-09-07 20:33:59 (UTC)

Right, and Gerrit has its own favicon as well. I hadn't thought about this when I created this task...

I'm happy to hear more opinions, but then let's get this tiny detail out of the imminent setup of Wikimedia Phabricator.

It should have a unique icon or the upstream icon

Right, the Wikimedia favicon is used in https://wikimediafoundation.org/ and... ?

The stock Phabricator icon will be unique for the 99.99% of users here (just a few of us spend some time upstream).

I'm happy to close my own task as Declined if thee is consensus. I have been convinced. :)

Qgil claimed this task.

Resolving. If someone has better arguments, please reopen.

In T273#20411, @Qgil wrote:

Right, the Wikimedia favicon is used in https://wikimediafoundation.org/ and... ?

The stock Phabricator icon will be unique for the 99.99% of users here (just a few of us spend some time upstream).

Yeah, but if we use a distinct icon, that doesn't penalize other users. Meanwhile, it will help those of us that do go to the upstream site distinguish it.

Why don't we decide how we want to come up with a unique icon and get the ball rolling? It doesn't need to be a priority, but it would be useful.

Qgil lowered the priority of this task from Low to Lowest.Nov 18 2014, 9:35 AM

In fact, I have just realized that upstream's favicon is blue, while our favicon is black. Problem solved?

Something like this?

phabricator_favicon_attempt_at_WMF_colors.png (160×160 px, 6 KB)

(I png-to-svg'ed F887 (from the github repo), which results in F889, then fiddled a bit with colors and strokes, giving me F890, of which F885 is the png rendering).

I've also tried the route take edges -> svg -> fatten, which results in

favicon-128_edges_WMF.png (160×160 px, 7 KB)

but I don't think that's really a better option, to be honest.

I'm not sure about mixing the shape of a brand with the colors of another brand. I have tried with a simplified

phabricator_favicon_pngtosvg.png (160×160 px, 1 KB)

but I'm not convinced either.

Maybe we just just wait for T96 and use the Phabricator icon with one of the Wikimedia colors instead of the current black.

I just noticed my color order was wrong. This fixes that:

phabricator_favicon_attempt_at_WMF_colors_2.png (160×160 px, 6 KB)

Qgil removed Qgil as the assignee of this task.Nov 18 2014, 11:36 AM

As long as we do not violate the Visual identity guidelines I am fine with any proposals (sorry but the browsers I use only expose favicons in bookmarks and location bar dropdown URL proposals).

In T273#23044, @Qgil wrote:

In fact, I have just realized that upstream's favicon is blue, while our favicon is black. Problem solved?

This is not the case. They're exactly the same.

wget 'https://phabricator.wikimedia.org/favicon.ico' -O wikimedia_favicon.ico
wget 'https://secure.phabricator.com/favicon.ico' -O upstream_favicon.ico
diff wikimedia_favicon.ico upstream_favicon.ico --report-identical-files

What if we just do an icon contest, similar to the one for Wikivoyage?

Similar to what Quim said, we shouldn't use a variant of the Phabricator logo unless we explicitly confirm it's okay with upstream.

Asked in # phabricator:

20:22 <valhallasw`cloud> epriestley, are there any visual identity guidelines for phabricator? specifically, is it OK for the wikimedia phabricator to use the design of the favicon with different colors, or would you rather see a completely different favicon?
20:25 <epriestley> We don't have formal documentation around that. So far the cases we've been concerned about are just businesses selling services which are named in a way that could cause confusion about whether the business is a third party or not, which obviously doesn't apply here.
20:26 <epriestley> I think it's OK to recolor things. It's vaguely possible we might issue guidance later which asks you to use a different icon instead, but I doubt that will happen. We already let you, e.g., recolor the page header through configuration.
20:27 <epriestley> In general, we expect installs will customize Phabricator to varying degrees and I think we'd only be concerned if you were then distributing it as "Phabricator" or something with a similar name.

Which might also be useful as general guidance for a contest if we have one.

MZMcBride renamed this task from Use Wikimedia favicon to Wikimedia's Phabricator installation should use a custom favicon.Nov 25 2014, 2:40 PM
MZMcBride set Security to None.
MZMcBride subscribed.
In T273#23309, @Mattflaschen wrote:

This is not the case. They're exactly the same.

wget 'https://phabricator.wikimedia.org/favicon.ico' -O wikimedia_favicon.ico
wget 'https://secure.phabricator.com/favicon.ico' -O upstream_favicon.ico
diff wikimedia_favicon.ico upstream_favicon.ico --report-identical-files

Fine, but should I trust your instructions more than my own eyes? At least in my browser Wikimedia's looks black, upstream's looks dark blue.

black-blue-favicon.png (72×363 px, 7 KB)

PS: http://phab-01.wmflabs.org favicon is also dark blue.

You may need to clear your browser cache, or your browser may be doing something confusing.

Firefox/Iceweasel 31.1.0:

Phabricator_favicon_comparison.png (29×518 px, 6 KB)

Funny. Chrome and Firefox/Iceweasel show the same black/blue combination in my desktop, whereas Firefox mobile on Android shows me all of them blue... Interesting phenomena that might or might not end with a custom favicon...

I just noticed my color order was wrong. This fixes that:

phabricator_favicon_attempt_at_WMF_colors_2.png (160×160 px, 6 KB)

This looks very nice even at very small sizes. It is strangely cropped though.

The white lines are borders; in this case there's a 10px wide border around the blue part... and that includes on the outside. This is a newer version that fixes this.

phabricator_favicon_attempt_at_WMF_colors_2.png (160×160 px, 7 KB)

The white lines are borders; in this case there's a 10px wide border around the blue part... and that includes on the outside. This is a newer version that fixes this.

phabricator_favicon_attempt_at_WMF_colors_2.png (160×160 px, 7 KB)

Proposed_Wikimedia_Phabricator_logo (52×244 px, 11 KB)

Great!

I think this design is useful.

I don't know what is the current state-of-the-art in favicons, but I guess an .ico file with multiple sizes is still required? Last year GCi students created a bunch of these for Wikimedia projects. @Aklapper, a GCi task?

apple touch icons should be updated too when this is done

@Qgil wrote:
I don't know what is the current state-of-the-art in favicons, but I guess an .ico file with multiple sizes is still required?

Should be pretty straightforward to do as long as we know where exactly to commit the new icon.

A quick look around suggests both the favicon and the Apple Touch icon are hosted at https://phab.wmfusercontent.org, but I'm not sure which Gerrit repo that is.

  • I want to distinguish a help page from phabricator.com and phabricator.org like: https://secure.phabricator.com/book/phabricator/article/remarkup/
  • I would like to get any coloured favicon as suggested above.
  • I want also the full eye in the upperleft corner of each page in the same style, since that is linked to our 'homepage' https://phabricator.wikimedia.org/ and not upstream.
  • Actually, the entire logo might reflect WMF colours, but the title bar should be kept in black for reminding to upstream environment functionality.
  • These are background images in phabricator-main-menu-brand and might be difficult to replace.
  • I would be glad if finally chosen graphics were available at Commons, too.

I've created a clean SVG fine-drawing of the suggestion of @valhallasw as template for the 64px .ico.

@PerfektesChaos

I think there is no really contest necessary. The design of the native phab-icon is more than obvious and the color combination are compulsorily very limited. The only additional possibilities would be 2bit colors (as red, green or blue, which I do think would not a good choice for most, because all 3 WMF colors should be in it!?) or with dark background. So here are other possible variants. If without contradiction I would also prefer the first proposal and create it as favicon with 3 sizes in it!?

phabricator_fav-48.png (48×48 px, 2 KB)
phabricator_fav48-dark1.png (48×48 px, 1 KB)
phabricator_fav48-dark2.png (48×48 px, 1 KB)
phabricator_fav48-dark3.png (48×48 px, 1 KB)
phabricator_fav48-dark4.png (48×48 px, 1 KB)

If we want to use the current favicon but recoloured, it's best to keep it simple. A lot of the suggested ones are very busy, especially around the edges of the cogs, which less than ideal.

See F111260 for an example (commons-style colouring).

See F111260 for an example (Commons-style colouring).

I could agree with your suggestion. Here are your showing example + the other possibility (transparent).

phabricator_fav-48_simple2.png (48×48 px, 1 KB)
phabricator_fav-48_simple1.png (48×48 px, 1 KB)

I like

phabricator_fav-48_simple2.png (48×48 px, 1 KB)
It looks Wikimedia AND Phabricator.

I've created the favicon in multisize.

And this is what it looks like in context:

favicon-in-tab.png (274×381 px, 18 KB)

And this is what it looks like in context:

favicon-in-tab.png (274×381 px, 18 KB)

This looks good to me. Let's do it.

Change 203781 had a related patch set uploaded (by 20after4):
Custom favicon for phabricator.wikimedia.org

https://gerrit.wikimedia.org/r/203781

Change 203781 merged by Chad:
Custom favicon for phabricator.wikimedia.org

https://gerrit.wikimedia.org/r/203781

Negative24 assigned this task to mmodell.
Negative24 removed a project: Patch-For-Review.

@Ricordisamoa Wait for the Phabricator update (T89830)
@mmodell Should I only close tasks when they actually get deployed?

@Negative24: I think it's ok to close a task when it's done but it wouldn't hurt to include a comment: "this is merged, will be deployed X date" for clarity.

I would only close tasks when they are actually done. I just saw that merge and was wondering why it is merged and resolved when it's not actually changed yet.

In any case... thank you very much @Negative24, @Isarra, and the other contributors of this old task!

Echoing @Qgil, thank you to everyone who's helped out here. (In times like this, I realize just how often I'm staring at a whole row of Phabricator favicons these days, in the mountain of open browser tabs that I seem to accumulate. :-)

@Negative24: I think it's ok to close a task when it's done but it wouldn't hurt to include a comment: "this is merged, will be deployed X date" for clarity.

In defense of Phabricator and planning and communications... as I scrolled through this task I saw:

mmodell added a blocking task: T89830: Next Phabricator upgrade on 2015-04-22.

And it's at the top of the page in the task metadata, of course.

Blocked By T89830: Next Phabricator upgrade on 2015-04-22

A comment is still nice to write, of course, mostly because the "resolved" label paired with the task title requesting a new favicon really does suggest to the (casual, not acute!) reader that this is deployed. Maybe we need clearer or more granular labeling in Phabricator.

And just for everyone to keep in mind when this change does go live, browsers tend to cache favicons pretty heavily in some cases, in my experience. I've seen instances where the browser had to be restarted for the new favicon to fully take effect.

I think 'stalled' would be a sensible status here: there's nothing to be done here until the change is deployed. Once it's deployed then we can close it (if the favicon works correctly) or re-open it (if something is wrong).

what could go wrong with favicon.ico? lol (famous last words...)

this is updated but I'm not sure how to flush cache - browsers cache the favicon pretty aggressively.

this is updated but I'm not sure how to flush cache - browsers cache the favicon pretty aggressively.

In Chrome: hit CTRLSHIFTR

it's firefox that gives me trouble ;)

on Iceweasel and i _just__ noticed the new favicon now

Favicons seem to persist even through browser restarts. It seems like in most modern browsers, you have to hard refresh the site in order to flush the cache. I did this in Chrome a few weeks ago and I've been enjoying the updated favicon.