tommoor / tinycon Goto Github PK
View Code? Open in Web Editor NEWA small library for manipulating the favicon, in particular adding alert bubbles and changing images.
License: MIT License
A small library for manipulating the favicon, in particular adding alert bubbles and changing images.
License: MIT License
don't show the Numbers in the new Windows 10 Edge Browser
I have a bug with the latest version of Google Chrome (30.0.1599.69).
I see my small favicon on top left of the favicon (see screenshot here: http://cl.ly/image/0824033U113r)
I never had this problem before. I tested on Safari and Firefox and it's fine.
Here's the code I use for my favicons. I'm using FF10 on Windows 7. The favicon.gif I use is a 48x48 image.
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.gif">
<link rel="icon" type="image/png" href="/images/favicon.gif">
Hi Tom,
I am about to package tinycon for Debian. For packaging upstream code in a distro, it is of great help if upstream (for tinycon that's you) tags releases in the Vcs.
Can you please tag the current code with a release tag (0.5 that is IMHO) and adopt that habbit for future releases (so that the Debian QA site can spot new upstream releases and notify the package maintainers).
Thanks+Greets,
Mike ([email protected])
There are some useful changes in recent commits, and it would be nice to be able to release them. :-)
When using a link for a favicon where the rel is "SHORTCUT ICON" or anything that doesnt contain a lowercase "icon" it doesn't find it. I am writing a small PR to fix this.
EDIT: see PR #78
If a website is pinned you can use a overlay to send a notification to the user. Would be nice to use this as 2nd fallback option:
http://www.buildmypinnedsite.com/windows7/en <- number 3
e.g. <link rel="apple-touch-icon-precomposed" href="icon.png">
due to:
.match(/\bicon\b/)
$ bower install tinycon --save
bower tinycon#* not-cached git://github.com/tommoor/tinycon.git#*
bower tinycon#* resolve git://github.com/tommoor/tinycon.git#*
bower tinycon#* download https://github.com/tommoor/tinycon/archive/0.6.3.tar.gz
bower tinycon#* extract archive.tar.gz
bower tinycon#* invalid-meta tinycon is missing "main" entry in bower.json
bower tinycon#* invalid-meta tinycon is missing "ignore" entry in bower.json
bower tinycon#* resolved git://github.com/tommoor/tinycon.git#0.6.3
bower tinycon#~0.6.3 install tinycon#0.6.3
tinycon#0.6.3 bower_components/tinycon
bower.json
:
{
...
"main": "./tinycon.js"
...
}
Your demo doesn't work in 12.00!
I just tried current HEAD and fallback: 'force'
prevents Tinycon from modifying the icon (which makes it essentially identical to manually modifying the title, except that each visitor's browser downloads some extra code).
Currently it seems one can only display the icon in the lower right corner. Does it make sense to add an option to allow the dev to specify the location? Like: location: "top-right".
We desire this because we use tinycon in our web app, and our app places notification badges on the top-right corner, like iOS, and being able to move the favicon to the top-right corner would make it look more consistent.
Thanks!
image/x-icon
is not fount match:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple_icon.png"/>
doesn't find icon
Work fine:
<link rel="icon" type="image/png" href="/apple_icon.png">
Pls fixed "shortcut icon" and "apple-touch-icon"
How to solve this error,I think it shows error about <title>.
Because i am using socket.IO and Ajax, but its work fine before Ajax call,But when i call Ajax its show error
Including these in your head
<link rel="shortcut icon" sizes="196x196" href="/img/logo-square-196.png">
<link rel="shortcut icon" sizes="128x128" href="/img/logo-square-128.png">
and a valid favicon.ico in the root of the site (not linked in a tag). Seems to break favicons on Chrome.
You can email the current maintainer of the npm package and have him give you ownership or you can contact npm directly to take control of the tinycon package. You can also just release a new package under your user scope @tommoor/tinycon
When I view the Tinycon GitHub Page on Firefox, the icon remains unmodified and I repeatedly get "Tinycon is not defined" in the web console. Here's a screenshot. (Though I've cropped out the tab bar because of other things in it)
As you can see from the visible chrome, the problem occurs despite my having disabled Greasemonkey and allowed all scripts.
Try to use setImage to change favicon, but not work on Chrome latest build (v34). However, call setBubble() if after setImage(), it will get refreshed.
Looking at the source and my head tag, it looks like all of my supplemental icon links are being removed. Specifically, this includes the apple-touch-icon[-precomposed].
Is this necessary to ensure the tinycon dynamic icon is applied on all platforms? Would it be possible to whitelist in some rel types that shouldn't be removed?
tinycon is ๐ฏ btw!
Github does not serve the correct mimetype and therefore IE9 (and Firefox 10?) don't load the script correctly.
Ran into a strange issue today on a site with unusual markup. They have their tag with the favicon in the tag (don't ask me why!) which causes Tinycon to fail in removeFaviconTag()
at load because it is trying to remove a link-node that is not a child of head
.
The fix is fairly straight forward: dvdplm@7e8b207
Line 63 of tinycon.js removes an element from the DOM, causing the local array links
to be shorter by one element in the most recent dev build of Chrome. If the favicon link is not the last element of links
, an error is thrown on the last iteration of the for loop.
I love the idea of Tinycon. I wish there was a list of browsers/versions confirmed to support either the full Tinycon or the fallback so I could deploy to production with confidence. Do you have the start of a spreadsheet like this?
It will be nice to reset title (removing the count) when Tinycon.reset() is called. Current my workaround is call Tinycon.setBubble(0).
We're looking at implementing tinycon in a closed source, commercial project, and I need to know whether we can use it.
Could you please pick a license and add it in your readme?
thanks.
regards
Nicolas
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library tommoor/tinycon
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "tommoor/tinycon",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
With Version 0.5 everything was fine and after switching to the new 0.6 I have a problem with the favicon. As soon as I call the setBubble Method the favicon looks like someone zoomed in. You can see only a part and even see the single pixels of the original favicon.
I cannot provide a screenshot for legal reasons - at least not on this public way :)
32x32 icons are cropped to the upper left 16x16 portion when the bubble is added.
hy not set up gh-pages
and host a demo?
It'd be nice not to expose Tinycon
object to window
for AMD:
window.Tinycon = Tinycon;
Tinycon is a useful idea, but it doesn't differentiate between "10 new items", "2 new items plus the 8 you left unread", and "no new items, but you left 10 unread".
Firefox's App Tabs implementation provides a useful way to tell the difference by highlighting tabs for which the title has changed since last viewing. Enabling the fallback even when the icon has been successfully modified is all it would take for Tinycon to integrate with this functionality.
I see you addressed #7 by adding a note to the README.md. However, that, in and of itself, does not unambiguously identify the terms under which Tinycon is released, since some variants of the MIT license exist. Would you please add a LICENSE file containing an up-to-date copyright statement and the full license text and then do a tagged (see #40) release? That will remove the only remaining obstacles to being able to include Tinycon in Debian.
Thanks!
Ben
Tested on Firefox 38 and Chrome 42.0.2311.152 with Tinycon 0.6.3
If the page utilizing Tinycon is zoomed in (eg. Ctrl +), Tinycon's use of window.devicePixelRatio will cause the text to be drawn off-center depending on the level of zoom. Apparently using window.devicePixelRatio is not reliable because it is directly affected by the zoom level of the browser, which can change from user to user.
Firefox discussion: https://bugzilla.mozilla.org/show_bug.cgi?id=809788
Stackoverflow discussion: http://stackoverflow.com/questions/16541676/what-are-best-practices-for-detecting-pixel-ratio-density
Chrome 17.0.963.56
Sample icon:
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEULSGtJ76/mAAAADElEQVQImWNgIA0AAAAwAAFDlLdnAAAAAElFTkSuQmCC" />
Thanks!
I can't get Tinycon.reset()
method to work with my favicon which has the following HTML:
<link rel='icon' href='/assets/img/myLogo.png' type='image/png'>
I think the getFaviconTag()
method needs to be more inclusive at catching the default favicon.
Please check the issue as I can't see any favicon or bubble in chrome, however it's working as expected in Firefox.
I am using Google Chrome (Version 44.0.2403.125 m) in Windows 7
I use the default settings "10px arial",the number in firefox looks great but in chrome 19.0.1049.3 dev,it looks soooooo fat!
Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)
-- This repo has been included in The Github Pirates' Chest.
What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.
You should find out more about this project below:
OR, Download The Chest:
In my admittedly limited testing, it seems that the favicon is always drawn at 16x16, even on retina screens where it should be 32x32 if the favicon is large enough.
Would be lovely if that worked :)
For my WinXPsp3 Firefox nightly 13.0a1 (2012-03-12), the icon next to the URL updates just fine, but the icon in the tab reverts to a folder. In fairness, same issue with Notificon. Let me know if you need a screenshot.
cheers!
I get this in Tinycon.js line 124. I am using the latest chrome beta, version 28.0.1500.63 beta-m.
I have a Python project where I'm using Bower to manage the client-side JS dependencies (a choice made based on what was offered for various dependencies I wanted).
Would you mind adding a bower.json
to this so I can use the GitHub URLs as valid arguments to bower install
?
Is there a way to force (or edit) the script to make it use only the favicon.ico image rather than the Apple Touch logo image? The problem is that in Chrome, the rendering of the Touch logo is very ragged looking, where the favicon version is smooth and aliased properly. I could easily tell which image it was grabbing since we changed our Touch logo on one site, and not the favicon, and our "admin" area showed the proper smooth icon in the browser tab as opposed to the ragged version processed through Tinycon on the public side.
It'd be nice to rename colour
to color
to be consistent with http://www.w3.org/TR/css3-color/#color
Opera 11.61 Windows 7 x64
Icon appears for a moment and disappears http://tommoor.github.com/tinycon/
Can count ~5 blinks, after that no icon is visible at all.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.