problem using custom favicon

i tried to use our company’s icon as favicon for my app, by putting it as favicon.ico in the root directory of my custom theme.
=> a blank sheet is displayed in the browser-tab and the address field.

Even copying the vaadin favicon from reindeer to my custom theme has the same effect.

When i look at the page info in my browser. i can see that the icon is listed with dimensions 0px 0px

So apparently the icon looses it’s size just by copying it from one theme to another.
Sounds very strange.

All this happens when i use Firefox.
Using IE always shows the vaadin favicon, even if i have my own icon under my theme.

Is the mythical Vaadin playing games with me ?

I have the same problem here…
Any help would be welcome…

I have the exact same issue as well. Any help is highly appreciated. Thanks!

Dear Community Members,

I will really appreciate if someone can share any clue on this. Cant seem to make it work.

Any alternate way to inject a custom favicon?


All, this seems to be a browser issue and not a Vaadin issue.

Different machines and different browsers yield different results. Could there be some browser setting which needs tweaking?

What browser is showing issues? It seems to work on recent versions of Firefox, IE, Chrome and Safari for me.

Where are you looking to see it? In the address bar? Bookmarks? Maybe you have to clear browser caches and/or remove bookmarks and try again?

I know this thread is old, but now I realized that it doesn’t work with Firefox 12 but no problem with latest IE.

Different things matter here - Image type, image size etc.
Please read:

I have my favicon file in my custom themes folder for my Vaadin 6.7.8 app:


I am not really building a custom theme. I merely created the custom theme to:
(a) Tweak the CSS a little bit,
(b) Have a place to store images to be loaded statically by the web server (Apache Tomcat 7.0.27) as eye candy on some of my Vaadin pages.
Then I discovered the themes folder is also a good place for the favicon file.

Despite being named with the “.ico” extension, my graphic is actually a PNG image. I have found all modern browsers support various image file formats regardless of the “.ico”. Mine is a 16 x 16 pixels Portable Network Graphics image, at 72 pixels per inch, a total of 690 octets.

On Mac OS X Lion (10.7.4) the favicon appears as it should in:
• Safari
• Firefox 13 (beta) (favicon appears twice – once in the tab and once in the address/URL bar)
• Chrome 19.0.1084.46 (favicon appears up in the tab, not in the address/URL bar)
• Opera 11.62 (favicon appears up in the tab, not in the address/URL bar)

–Basil Bourque

Yes, modern browsers allow different formats. However, if someone who never uses Windows or other image utilities that support ico format, can still get it converted online to .ico format.
PGG to ICO Conveter