Safari seems to use a put a filter or shader on the favicon when displaying said icon in the tab bar.
Screenshot of the Tab
This is not how the Icon was designed and not expected.
Screenshot of the Bookmark Entry
This is how the Icon was designed and is excepted to look.
This is how it looks in the bookmark bar and in the address bar.
I've tried to delete the caches in the ~/Library/Safari/Favicon Cache/ because I guessed it might have been an artefact from he development. But it is not.
I've also had a good look at all the versions of the Icons that the build script generates. But all of then look as expected (in the sense of the color is always the same and does not differ).
The difference is really only in the tab bar. (For example the "Favourites" new Page in Safari also displays the icon in the expected way).
Safari: Version 14.0 (15610.1.28.1.9, 15610)
Maybe your site has a Pinned Tab icon. To check this, look for <link rel="mask-icon" ...> in your <head> section. If you have one and you don't like it, simply remove this line, and maybe the corresponding SVG image, too.
Related
I am on Mac and noticed that the tick icon of a select option looks like this in Mozilla Firefox:
I'm intended to change the icon to look like in Safari and Google Chrome. Like this:
Anyone knows how to style the select or option element with CSS in order to achieve this?
These icons depend on the font that you use.
If you didn't select yours then the default is used.
Not every web browsers has the same configured and that becouse they are different.
Check this answer:
How to draw a checkmark / tick using CSS?
How to change this should be solved right there^.
Really weird thing, i used https://realfavicongenerator.net to generate HTML code and all favicon files.
After implementing it I checked everywhere to see if it was right. And it is except on my android when i press the settings (the three dots) and I press "save to homescreen". It just shows a pink background with the letter "1" in it. The pink is actually the color of the usual favicon.
Right now It's not online yet so i can't send a link or anything, but thanks for the help anyway!
I have just started using the Firefox Developer Tools. When I am in the Style Editor, I can't seem to grab the scrollbar thumb to scroll through my style sheets. I assume I'm missing something but can't find what. I have restarted the developer tools, and restarted Firefox, but that didn't help.
My cursor stays as if it is selecting text, even when I hover over the tiny scrollbar thumb, thus it doesn't let me grab the it. Obviously this is important as style sheets can have many lines!
I am using Firefox 50.1.0 currently.
This is a known bug filed as bug 1265807 .
A workaround for this is to switch to the Firebug theme, which uses the OS default scrollbars:
I'm developing a firefox addon and would like to have a fixed position (relative to the browser) semitransparent panel with 3 icons shown at the corner of every browser content area. These buttons will have to be able to communicate with a site that is not the site shown.
I know it would be possible to inject a fixed position div to html but I want the buttons to communicate with external site when pressed and also query information when they are loaded so I think that would violate same origin policy. This wouldn't work with image or other direct media urls either.
What would be the easiest way to create the floating icon panel?
After about of week of work I found it. Here is the answer, I hope this helps someone else:
http://marcada.ms/2010/02/getting-content-on-top-of-the-browser-space-using-xul/
The above adds the panel, transparency is not working (at least not in linux what I work with) because of the following bug. Sigh... opened in 2007 and not closed in 2012.
https://bugzilla.mozilla.org/show_bug.cgi?id=408284
edit2: I ended inserting html data to the body of the document using files from extension folder. Works very well including transparency.
edit3: If anyone is interested how this works in my plugin, check my live site at http://www.upmarker.com
I used to be able to see where a hyperlink was pointing to at the bottom of firefox. Ive got firefox 4 and there is no bar now annoyingly.
This is related to programming because I need to see wher hyperlinks go.
The status bar has been removed. You can get it back via an add-on.
Strange with me it shows the links when I hover over the links with the mouse. It just shows up at the bottom-left and just takes the size of the links, not the entire width of the screen like the status-bar used to do.
If you only need to see the hyperlinks then this should be enough if not install the extension mentioned in the other answer.
,
to get the bar back at the bottom you can do view > toolbars > add-on bar, but that doesn't give you a link preview and it seems not to be the same as the status bar anymore. So statusbar and add-on bar are two different things now.
To recover the old used and very useful status bar, first, install the Status4evar (S4E) add-on.
Next step you have to open the personalize window to be sure that at the bottom will be a "variable space" line ,
at its left side you drop/draw the "status text" and close that personalization.
now you can see the complete link by mouseover as known in old days .
good luck