top | item 14993336

Safari Should Display Favicons in Its Tabs

256 points| ingve | 8 years ago |daringfireball.net | reply

135 comments

order
[+] yoodenvranx|8 years ago|reply
Unfortunately there is a general trend towards removing colorful icons and I hate that trend with a passion.

Take for example the setting menu from stock Android: Yes, there are still icon but they all have the same color and it is really difficult to tell them apart. Every time I go to settings I have to search around until I find the settings I was looking for. If it had colorful icons then navigation would be easier because my brain would learn "blue icon = keyboard settings"

Or take Chrome on Android: Open Chrome, press the three dots on the bottom right for the menu and try to find the 'search in page' entry. Every time i wanna search something I have to read half of the menu items to find the search function... If it would have a distinct icon it would be much easier to find.

[+] gurkendoktor|8 years ago|reply
A frustrating trend indeed. I really miss colours in the macOS Finder: The monochrome sidebar is frustrating, the default folders (Pictures, Music etc) are harder to distinguish than in 10.4, and Finder colour labels have been replaced by tiny "tag" bubbles.

This was so much easier to scan at a glance: http://tb43.com/wp-content/files/finder_011.png

It's the other way around on mobile. Icons are still colourful (although too many are blue-on-white), but they all have the same shape, and Apple hates icon labels with a passion. In iOS 11, they are almost impossible to read on the stock wallpaper, and the new Dock gets rid of them altogether: http://media.idownloadblog.com/wp-content/uploads/2017/06/iO...

When I am a little low on energy, I regularly catch myself tapping the wrong iOS app just because it has the right colours at a glance. Icons should just always have both a colour and a shape, no matter how much it frustrates designers.

[+] kakarot|8 years ago|reply
My bookmarks bar is a row of unlabeled favicons arranged by color. Beautiful and extremely efficient. I only need to store the color of an icon in my head, not the icon itself or the url. If this ever gets taken away from me I will become extremely cross.
[+] wlesieutre|8 years ago|reply
Outlook is another terrible offender. Maybe for mailboxes in the sidebar it didn't add much, but the icons were really helpful if you're using the CRM integration.
[+] fredley|8 years ago|reply
Older versions of Android had colourful icons, but often those colours changed between versions. This is the worst possible sin, and possibly part of why they don't any more.
[+] conradfr|8 years ago|reply
That's what I dislike with the recent Jetbrains products.

Designer replied they were fixing the problem of the colorful icons being too "distracting". Still don't understand how a grey UI with grey icons is better...

[+] cbcoutinho|8 years ago|reply
Even more frustrating is that the names of the options is different across versions of chrome. On my phone it's called 'find in page' instead of 'search in page'
[+] libeclipse|8 years ago|reply
I agree with you broadly, but not about the android settings.

I mean, they just look so much better this way (Nougat). Perhaps your requirements would be better addressed in the accessibility settings. Have you tried turning high contrast on?

For most of us, the better looking icons are a non-issue. I personally don't even look at them to navigate, I can read the options.

[+] frik|8 years ago|reply
All Microsoft products after 2010 are worst offenders. The nice Office 2010 and Windows 7 and beautiful high res icons and very nice color schemes - gone. I cannot stand the Win8/10 and Office 2016 bland look and mix of legacy icons botched with a Photoshop filter to make them grayscale and new boring grayscale icons. Everything looks white and grayish, some parts of the window can be dragged around, some are click-able ...but one only knows by try-and-error. Well I reverted back to Win7 & Office 2010 - so much more pleasing to my eyes.
[+] omn1|8 years ago|reply
I never understood why people wanted their tabs on the top instead of on the side. I'm using [Tree Style Tab][1] on Firefox and whenever I need to use any browser I feel limited by screen real estate. With modern widescreen displays I can have my tabs on the side and the titles are still readable while the website content is readable, too. What's not to like?

[1]: https://addons.mozilla.org/de/firefox/addon/tree-style-tab/

[+] hbosch|8 years ago|reply
I usually have less than 5 tabs open at any time. Side tabs are a huge waste of space for me.
[+] glhaynes|8 years ago|reply
Takes up way more screen space to show content I don't usually need/want to see. Cool that it's an option, though.
[+] lowboy|8 years ago|reply
I use a 4k monitor and my browser window is usually 1280x2160.
[+] drcongo|8 years ago|reply
I much prefer to have no favicons. They're a really poor indicator of the content of the tab, especially when 20 of them are Stack Overflow and Read the Docs.

Safari has a really good way of visually distinguishing between tabs, a two fingered pinch on the trackpad and I can see the actual content of every tab that I have open. Can't remember the last time I even looked at the text in the tabs.

[+] eugeniub|8 years ago|reply
I think it's even more useful with 20 stackoverflow tabs. I'd prefer knowing that a particular range of tabs is all stackoverflow, or all some other site. And I don't know why, but I never got into the habit of the pinch to view all tabs feature.
[+] ProfessorLayton|8 years ago|reply
Tab Exposé is one of my favorite features in Safari (Right behind Reader view) that I wish other browsers copied.
[+] abrookins|8 years ago|reply
Indeed, it is good. And for non-trackpad-users, Shift-Command-\ is the keyboard shortcut for "Show All Tabs," which also makes the tabs searchable.
[+] rch|8 years ago|reply
I tend to limit my open tabs to the maximum that can be displayed with clear favicons. Works for me.
[+] greymeister|8 years ago|reply
Sadly the title of a page is also a really poor indicator of the content of the tab.
[+] abrookins|8 years ago|reply
Totally valid. If they were going to change one thing about Safari, though, for me it would be to drop the required $99/year payment for a developer program membership just to distribute a signed Safari plugin. You can't really distribute plugins without a developer certificate, as Safari uninstalls them automatically when the browser restarts. Probably the worst Safari-related decision Apple has made recently, much worse than favicons, though I completely agree that they should return.
[+] rubatuga|8 years ago|reply
You can always distribute unsigned ones. You lose the ability to auto update however, as well as the extension store
[+] oDot|8 years ago|reply
Firefox shines here. Not only does it have the favicons but typing a site in AwesomeBar will prompt to "jump to tab".
[+] detaro|8 years ago|reply
And "% term" searches through open tab urls/titles
[+] matrixagent|8 years ago|reply
By far my biggest gripe with Safari is the behaviour of the URL bar: https://www.reddit.com/r/Safari/comments/2uikrg/any_way_to_d...
[+] mistersquid|8 years ago|reply
I agree a centered URL is a bit of aesthetic ridiculousness when exposing the entire URL.

Aesthetic opinions aside, the linked complaint relies on a workflow that could be considered a UI anti-pattern.

  1. Move hand to mouse.
  2. Position cursor.
  3. Click URL bar. (activate caret)
  4. Move hand(s) to keyboard.
  5. Type replacement.
The following workflow lends itself more easily to UI automation (and muscle memory)

  1. Type Command-L. ("Open Location…" which selects all in location bar.)
  2. Type left/right-arrow. (Move caret to left/right side of location bar.)
  3. Option left/right-arrow. (move caret left/right one "word".)
  4. Type replacement.
The distinct advantage of the second workflow is that it is susceptible to the automated editing of URLs of many tabs using Keyboard Maestro [0] and a simple AppleScript.

Combined with keyboard tab-switching (Command-shift-[ and Command-shift-] for next left and right tab, respectively, you can fast web-page switch to spot small differences similar to the way in which a Hinman Collator works to highlight differences between bound books. [1]

Admittedly (and a bit off-topic), the link I provide for the Hinman Collator doesn't exactly illuminate what such a device does. A better demonstration of how collation can be used to highlight subtle visual differences between two artifacts can be derived in the service of solving a puzzle from one of my favorite web sites, Kindertrauma. [2]

The puzzle, which asks you to spot the differences between a series of two photos, is mildly challenging. That mild challenge is reduced to laughably simple when the images are collated. [3]

EDIT: Move parenthetical into footnote. Add adverbial phrase to footnote parenthetical. Rewrite Kindertrauma example. General readability.

[0] https://www.keyboardmaestro.com/main/ (I'd be embarrassed to name drop Keyboard Maestro yet again here on HN if it just weren't so darned useful. A truly amazing piece of software Keyboard Maestro is. No relationship except as a satisfied user.)

[1] http://library.unc.edu/2016/11/video-hinman-collator-compare...

[2] https://www.kindertrauma.com/the-thing-2011-funhouse/

[3] https://secure.fluffycloud.net/shimmering/kindertrauma/20111...

[+] mi100hael|8 years ago|reply
With Firefox, you get the best of both worlds. You get favicons, but you also get a minimum tab width so you can always read the first word or two of the page title. Rather than squishing down infinitely like Chrome, they just quickly scroll side-to-side more like Safari.
[+] bangonkeyboard|8 years ago|reply
Side-scrolling tabs are one of the worst UI innovations I've suffered in recent years. They wreak havoc on spatial tab organization, make it impossible to see how many tabs are open, and slide out from under the mouse cursor unpredictably when clicking.

The original Safari behavior of a vertical overflow list of tabs, favicons included, keyboard searchable and navigable, was much more usable. https://i.stack.imgur.com/eyXum.png

[+] kakarot|8 years ago|reply
Just another reason why Firefox is king.

Another killer feature for me is that you can basically middle click anything and open it in a new tab, whether a bookmark, back button, etc. Makes some tasks very intuitive and trying to maintain the same workflow on Chrome is extremely frustrating. I cannot understand for the life of me why this isn't a native feature in Chrome.

[+] wvenable|8 years ago|reply
With Firefox you can go one better and install the TabMixPlus extension and get multi-row tabs. I don't know how anyone functions with Chrome or Safari -- any reasonable number of tabs is unusable to me.
[+] malnourish|8 years ago|reply
I wonder when, if ever, vertical tabs will become the norm, or even a well-supported option.

They seem to resolve most tab issues while also being a better use of space in many use cases.

[+] 0xCMP|8 years ago|reply
I concur. I don't use safari because it feels worse. I felt the reason was I couldn't easily identify where my tab was supposed to be easily without reading. Many websites these days do not provide super great titles.

Although I do kind of wish some of these browsers supported the ability to switch tabs similar to emacs and give me a full view to select and search between tabs. It would also show the favicon.

[+] amir|8 years ago|reply
Safari should also stop restoring private windows upon reopening.
[+] m3kw9|8 years ago|reply
Favicons rainbowing up my top tab just acts as even more distractions. It only helps marginally because if you open 10 stackoverflow tabs, you would still need to open each one to see what’s what. That’s why Safari has the tabs overview view that shows you what’s inside. You can’t tell exactly, but you can most of the time.
[+] staplung|8 years ago|reply
It's worth noting that Safari _can_ display favicons. If you pin a tab, it uses the favicon. It's even displayed in monochrome until you hover over the tab so they've definitely worked out a way to display them.
[+] bouke|8 years ago|reply
That’s not the favicon that’s being shown there. It is either a b/w mask as defined by the site, or defaulting to the first letter of the site’s name.
[+] MBCook|8 years ago|reply
I'm quite surprised to find myself disagreeing with Gruber on this one. I like the way safari works currently, I don't want a bunch of loud little icons crowding up my screen. I don't have any problem identifying the tabs I have, and as others I have mentioned I can just use tab expose to find them quickly.

I've seen a few mockups on Twitter that he's re-tweeted recently and they just look more cluttered to me.

That may come from using Safari as my main browser for 13+ years, but I'm certainly quite happy with things the way they are.

[+] coverband|8 years ago|reply
It should first start displaying the whole URL on my phone.
[+] eridius|8 years ago|reply
If you tap on the URL bar, it does.

What's the argument for showing it all the time? There's not enough space to show the entirety of even relatively short URLs without scrolling (and scrolling means tapping on it anyway).

[+] TazeTSchnitzel|8 years ago|reply
I wonder if it's because Apple didn't like the mush that 16x16 favicons become on Retina screens with their preferred linear upscaling.

Of course, other sizes of favicons are possible for use by site owners (.ICO supports multiple resolutions in a single file!), and there's no particularly good reason to use linear upscaling for what's often pixel art.

[+] packeted|8 years ago|reply
I completely agree, one of the things that keeps me coming back to Chrome is favicons in tabs which is particularly useful when you have a bunch of tabs open. I also have a favorites bar with purely favicons so I can fit as many of my regular sites/resources in there as possible while still looking visually appealing.
[+] kevindong|8 years ago|reply
I tried out Safari for a week but I just couldn't stay there because extension support was terrible. Technically, the two critical extensions I use (LastPass and uBlock Origin) support Safari in some form, however they were strictly worse than the Chrome version. I can tolerate to some degree worse extensions. However, the UX was just _too_ bad to stand.

To be perfectly honest, I didn't even realize Safari lacked favicons until I read this article. I generally close tabs are soon as I finish using them. Consequently, I never have more than ~5 tabs open at any given moment.

[+] MBCook|8 years ago|reply
> However, the UX was just _too_ bad to stand.

How so?

[+] hungerstrike|8 years ago|reply
Favicons in Safari for Mac? That's the least problem. They need to fix Safari on iOS so that it doesn't open the same site over and over again in a different tab each time.

They also need to catch up to the rest of the world and give the user a choice of which browser to open up by default on iOS. Oh, this is Apple though - they give you the absolute least amount of functionality that they can get away with while charging the highest prices. I can't wait for the time of Apple to come to an end.

[+] fredsir|8 years ago|reply
> They need to fix Safari on iOS so that it doesn't open the same site over and over again in a different tab each time.

Seems to work perfectly fine for me.

> They also need to catch up to the rest of the world and give the user a choice of which browser to open up by default on iOS.

It's not as simple as that. If you want an OS that everyone can use, options are your enemy. Would I like to be able to decide the standard browser on my OS? To be honest, I don't care in this instance since I like Safari better than the alternatives, but sure, the choice would be great to have should that change.

[+] kin|8 years ago|reply
I agree for sure. At the very least have it as a preference. My bookmark bar consists of icons w/ no label. I treat Favicons more or less like I do iOS app icons.