tommoor/tinycon

A small library for manipulating the favicon, in particular adding alert bubbles and changing images.

Hi there 👋

tinycon's Issues

Relying on window.devicePixelRatio causing issues when browser is zoomed

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

The number looks sooooo fat...

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!

http://s7.postimage.org/j78zjkepl/2012_02_28_4_43_40.png

setImage doesn't refresh the favicon

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.

Disappearing in Opera

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.

[bug] MIME HTML5 link rel="shortcut icon"

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"

http://en.wikipedia.org/wiki/Favicon

Uncaught TypeError: Type error

I get this in Tinycon.js line 124. I am using the latest chrome beta, version 28.0.1500.63 beta-m.

Please tag releases

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])

32x32 icons are cropped to 16x16

32x32 icons are cropped to the upper left 16x16 portion when the bubble is added.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of tommoor/tinycon!

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!

Ugly icon rendering

On Chrome, the base favicon become uglier:

On the right, the icon after Tinycon integration.

Do not expose "Tinycon" object to "window" for AMD

It'd be nice not to expose Tinycon object to window for AMD:

window.Tinycon = Tinycon;

Weird bug with latest version of Google Chrome

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.

Add "main" entry in bower.json

$ 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"
  ...
}

Firefox Awesomebar updated, but not icon on tab

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!

In Chrome, Favicon not showing

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

With Version 0.6 the Favicon looks like it is zoomed

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 :)

Do not assume <link> tags are all in <head>

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

publish this to bower and npm?

This repo has been included in The Github Pirates

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:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

Having png icons seems to break getCurrentFavicon

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.

Support Edge Browser

don't show the Numbers in the new Windows 10 Edge Browser

Not working on FF10 with my setup

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">

Can't get Tinycon.reset() method to work.

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.

Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

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

.

New feature request - can tinycon support circle, square besides current bubble style?

Tinycon not loading on Firefox

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)

https://imgur.com/sO50k

As you can see from the visible chrome, the problem occurs despite my having disabled Greasemonkey and allowed all scripts.

Doesn't work with data URIs

Chrome 17.0.963.56

Sample icon:

<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEULSGtJ76/mAAAADElEQVQImWNgIA0AAAAwAAFDlLdnAAAAAElFTkSuQmCC" />

Thanks!

Favicon location.

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!

iOS web app icon link tag causes conflict

e.g. <link rel="apple-touch-icon-precomposed" href="icon.png">

due to:

.match(/\bicon\b/)

Take control of npm repository

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

Include full text of the license to eliminate ambiguity

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

Favicon tag is not matched case insenstively

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

removeFaviconTag causes error in recent build of Chrome

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.

Forced fallback prevents icon from being modified

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).

Tinycon.reset doesn't reset title in case of fallback scenario

It will be nice to reset title (removing the count) when Tinycon.reset() is called. Current my workaround is call Tinycon.setBubble(0).

No way to request fallback even with canvas available

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.

Force use of favicon.ico only?

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.

Request: Add bower.json to the repo

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?

Demo page broken in IE9 due to mime type mismatch

Github does not serve the correct mimetype and therefore IE9 (and Firefox 10?) don't load the script correctly.

Add notification for pinned website as additional fallback for IE9+

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

Rename "colour" to "color"

It'd be nice to rename colour to color to be consistent with http://www.w3.org/TR/css3-color/#color

Doesnt fall back to title update in IE11

Since IE11 removed the MSIE portion of the user agent, it incorerectly identifies IE11 as a mozilla user agent, however it doesnt support the favicon redrawing, so needs to fall back. I am writing a small PR to fix this.
EDIT: see PR #80
EDIT 2: see PR #81

Repo Preview

hy not set up gh-pages and host a demo?

Add Retina support

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 :)

Doesn't work in Opera 12

Your demo doesn't work in 12.00!

Publish new version to npm

There are some useful changes in recent commits, and it would be nice to be able to release them. :-)

Comprehensive list of browser support

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?

Regexp/Delete too aggressive?

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!

Please add license information

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