Co-signed: Safari should display favicons in tabs

Unlike Google’s Chrome, Apple’s Safari doesn’t show favicons in tabs. Originally, Steve Jobs and the Human Interface (HI) team were against it for aesthetic reasons. That opinion has persisted to this day: While it may benefit power users, it wouldn’t be ideal for mainstream customers.

Not everyone agrees, though, and John Gruber does a great job summing up why on Daring Fireball:

The gist of it is two-fold: (1) there are some people who strongly prefer to see favicons in tabs even when they don’t have a ton of tabs open, simply because they prefer identifying tabs graphically rather than by the text of the page title; and (2) for people who do have a ton of tabs open, favicons are the only way to identify tabs.

Not having favicons on Safari tabs is also broadly and glaringly inconsistent with how the rest of the graphical user interfaces work on both iOS and macOS. And consistency is a user-facing feature.

//platform.twitter.com/widgets.js

Favicons wouldn’t even have to be displayed by default to solve the problem — Apple could just make it a preference setting, and power users would find it. The fact that it’s not even a preference, even though it may well be the single most-common feature request for Safari, seems downright spiteful. And not just mean-to-others spiteful, but cut-off-your-nose-to-spite-your-face spiteful. It might sound silly if you’re not a heavy user of browser tabs, but I am convinced that the lack of favicons is holding back Safari’s market share.

There’s an argument that if someone really wants favicons they can pin tabs. That’s not a great workaround. Pinned tabs solve persistence. Favicons solve scannability. I shouldn’t have to pin a tab just to find it.

It’s my understanding that feature requests in Apple’s radar tracking system asking for favicons on Safari tabs go back as far as the introduction of Safari tabs.

Hopefully the attention its getting now prompts Craig Federighi, Apple’s senior vice-president of software engineering, to give it another look.

//platform.twitter.com/widgets.js

<!–*/

<!–*/

img {
width: 100%;
height: auto;
}
.devicebox ul {
display: table;
margin: 0 0 10px;
width: 100%;
}
.devicebox ul li {
background: #f7f7f7;
margin: 2px 0;
padding: 4px 15px;
}
.devicebox ul li:hover {
background: #fff;
}
.devicebox ul li:before {
display: none;
}
.devicebox p ~ p {
line-height: 1.25;
}
.devicebox p:first-of-type + p {
padding: 15px;
}
.devicebox a.buy-link {
border-radius: 5px;
display: inline-block;
font: 14px/31px “Proxima Nova Extrabld”,Helvetica,Arial,sans-serif;
text-align: center;
}
.devicebox a.buy-link,
.devicebox a.buy-link:link,
.devicebox a.buy-link:active,
.devicebox a.buy-link:visited {
background: #37B5D7;
color: #FFF;
}
.devicebox a.buy-link:hover {
background: #2694B2;
text-decoration: none;
}
.devicebox a.buy-link:before {
content: “\e61e”;
font: 40px/0 “ac_iconset” !important;
margin: 0 3px 0 -8px;
vertical-align: middle;
}
@media all and (min-width: 1025px), all and (max-width: 800px) and (min-width: 660px) {
/* div:not(.columns-3) excludes help menu content */
.article-body-wrap > div:not(.columns-3) > *:first-child:not(.sticky-wrapper) .devicebox {
padding: 20px 0 25px;
}
.article-body-wrap > div:not(.columns-3) > *:first-child:not(.sticky-wrapper) .devicebox .video {
float: left;
margin: 0 30px 0 0;
width: calc(100% – 375px);
}
.article-body-wrap > div:not(.columns-3) > *:first-child:not(.sticky-wrapper) .devicebox h3 + p {
bottom: 37px;
display: block;
overflow: hidden;
position: absolute;
top: 60px;
width: calc(100% – 375px);
}
.article-body-wrap > div:not(.columns-3) > *:first-child:not(.sticky-wrapper) .devicebox p img,
.article-body-wrap > div:not(.columns-3) > *:first-child:not(.sticky-wrapper) .devicebox p > img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.article-body-wrap > div:not(.columns-3) > *:first-child:not(.sticky-wrapper) .devicebox p:nth-child(n+3),
.article-body-wrap > div:not(.columns-3) > *:first-child:not(.sticky-wrapper) .devicebox ul {
box-sizing: border-box;
margin-left: calc(100% – 345px);
width: 340px;
}
.article-body-wrap > div:not(.columns-3) > *:first-child:not(.sticky-wrapper) .devicebox p.list-head {
margin-top: -5px;
}
}
@media all and (max-width: 1024px) and (min-width: 801px), all and (max-width: 660px) {
.devicebox h3 {
text-align: center;
}
.devicebox ul,
.devicebox p {
display: block;
}
}
@media all and (max-width: 800px) and (min-width: 660px) {
.devicebox {
padding: 20px 0 25px;
}
.devicebox .video {
float: left;
margin: 0 30px 0 0;
width: calc(100% – 375px);
}
.devicebox h3 + p {
bottom: 37px;
display: block;
overflow: hidden;
position: absolute;
top: 60px;
width: calc(100% – 375px);
}
.devicebox p img,
.devicebox p > img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.devicebox p:nth-child(n+3),
.devicebox ul {
box-sizing: border-box;
margin-left: calc(100% – 345px);
width: 340px;
}
.devicebox p.list-head {
margin-top: -5px;
}
}
@media all and (min-width: 1025px), all and (max-width: 800px) and (min-width: 661px), all and (max-width: 500px) {
/* 2x buy buttons */
.devicebox a.buy-link {
width: calc(50% – 2.5px);
margin: 0 5px 5px 0;
}
.devicebox a.buy-link:nth-of-type(even) {
margin: 0 0 5px 0;
}
.devicebox a.buy-link:last-of-type:nth-of-type(odd) {
width: 100%;
}
}
@media all and (max-width: 1024px) and (min-width: 801px), all and (max-width: 659px) and (min-width: 501px) {
/* 3x buy buttons */
.devicebox a.buy-link {
width: calc(100%/3 – 10px/3);
margin: 0 5px 5px 0;
}
.devicebox a.buy-link:nth-of-type(3n):not(:nth-last-of-type(2)) {
margin: 0 0 5px 0;
}
.devicebox a.buy-link:only-child {
width: 100%;
margin: 0 0 5px 0;
}
.devicebox a.buy-link:nth-last-of-type(2):nth-of-type(3n+1),
.devicebox a.buy-link:nth-last-of-type(2):nth-of-type(3n+1) ~ a.buy-link,
.devicebox a.buy-link:nth-last-of-type(4):nth-of-type(3n+1),
.devicebox a.buy-link:nth-last-of-type(4):nth-of-type(3n+1) ~ a.buy-link {
width: calc(50% – 2.5px);
}
.devicebox a.buy-link:nth-last-of-type(2):nth-of-type(3n+1) ~ a.buy-link,
.devicebox a.buy-link:nth-last-of-type(4):nth-of-type(3n+1) ~ a.buy-link:nth-last-of-type(odd) {
margin: 0 0 5px 0;
}
}
@media all and (max-width: 800px) {
.devicebox {
margin: 0 0 30px;
max-width: none;
width: auto;
}
}
@media all and (max-width: 500px) {
.devicebox {
margin: 0 0 30px;
max-width: none;
width: auto;
}
.devicebox a.buy-link:before {
display: none;
}
}
.page-admin .devicebox {max-width: 350px;}
.page-admin .devicebox .video_iframe {position: relative; height: 0; padding-bottom: 56.9%;}
.page-admin .devicebox .video_iframe iframe {width: 100%; height: 100%; position: absolute;}

/*–>*/

/*–>*/

/*–>*/

from iMore – The #1 iPhone, iPad, and iPod touch blog http://ift.tt/2uw5TwW

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s