Design tip -- Favicons - that small icon in the address bar.

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Admittedly favicons don't work very well with MSIE browsers even though MS$ was the one who created the idea. God only knows when they'll fix their little glitch with it, but they (favicons) do work consistantly with Mozilla-based browsers.

The details of a favicon can be found here: http://favicon.com/

I'm posting this because I wanted to convert an image file to an icon file (.ico) that I wanted to use both for a desktop shortcut and an icon that I'm using for an application I'm writing at work...(Favicons are the same file format [.ico] as the shorcut images on your desktop and the images on the top left corner of virtually every program you use)

The hard part is finding a good proggy that will convert your image files to an ico file. I finally found it because I had an older version on my older computer and finally did a correct search for it. Believe me when I say this...the Icon Forge link posted on the favicon.com website is probably one of the worst written programs you'll ever want to deal with. I uninstalled and deleted it almost two minutes after I installed it. (P.S. the Icon Forge link was dead when I looked ealier today, but I did find several download links through various searches -- I say again -- not worth your time)

Bottom line, I finally "re-discovered" my favorite converter proggy here:
http://www.qtam-computer.com/bmp2ico35.shtml after I looked at my older version and finally figured it out.

As you can see when you download it, the freeware version will only convert bitmaps to icons whereas the paid-for registered version will convert other file formats. I'm perfectly happy with creating bitmaps. They've all turned out very well so far.

Unfortunately, IE just plain doesn't do the best job of displaying them as they intended. However, it is a really great way to customize your desktop icons. If you are creating an icon for a desktop shortut, I'd suggest doing it at 48x48 pixels (or 64x64). It will resize automatically anyway and maintain good resolution.

Well that's my tip of the day.
Moderator Remark: Dead/Duplicate link and spam check done, 3/21/2009
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I use a program called Microangelo. I've used it for years. I don't think it's free, but it allows you to embed many icons into one. 16x16, 32x32, 256 color, millions of colors, etc.

It comes with a cursor studio, so you make animated cursors etc. as well as some other stuff. I believe there is a demo version, and if you don't mind forking over a few bucks (I think I paid $25 for it years ago) it's really good stuff.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I mentioned in my initial post that IE has a dificult time dealling with Favicons. The biggest problem seems to be they constantly disappear from your Favorites menu and no longer display in the Address bar like they should. I still haven't found the answer to the address bar, but I did discover a solution to the Favorites menu.

The glitch appears to be that the IE "version" of the favicons is not stored "permanently". Apparently when they expire from the Temporary Internet Files folder or you clear your temporary folders they go away.

I discovered this evening a little proggy that finds and restores them and makes them permanent. (I've tried steps one and two, but it might take me a few weeks to confirm they still hang around).

Here is an incredibly good article from PC magazine regarding the issue:
http://www.pcmag.com/article2/0,4149,9883,00.asp FavOrg completely seemed to resolve the Favicon in the Favorites issue, but still didn't find any thing that would explain why the favicon didn't show up in the address bar. I'll keep looking for that.

In the meantime here's the proggy that will fix the favicons on your favorites menu:

http://www.pctip.ch/downloads/dl/18699.asp

I'm sure most of you are like me and don't understand German so here's the Google Translation

*Side note - my first attempt to download this was from the download link at the end of the PC Mag article, but it sorta pissed me off that I couldn't download it from there without subscribing first since it appeared to be freeware. So I went searching and found a half dozen or so downloads that were freely available. The one I posted above was the quickest and easiest. To the best of my knowledge I've done my best to research this and make sure it was truly a freeware proggy. There are no cracks or hacks involved. If any mod or Bigwebmaster feels otherwise feel free to edit my post to remove the download links.

Anyway -- the proggy did what it claimed it could do. I now have all those cool little favicons back on my favorites list.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Finally found the answer to the address bar glitch here:

http://www.webmasterworld.com/forum21/7024.htm

Quote:
Just a tip, IE caches the favicon so if you change it you'll have a hard time seeing the new one even if you clear your IE cache IIRC. Also, you can't see the favicon when you first visit the site, so a trick is to partially drag the 'e' icon out of the address bar and let go your mouse button, THat'll cause it to refresh and you can see it. Konqueror and Mozilla will show it automatically. Also, I've found photoshop best for creating favicons. The online tools aren't that great cos you dont get dithering etc.
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

Quote:
The hard part is finding a good proggy that will convert your image files to an ico file.


I came across a web page last week that suggested that other graphics formats were supported. Sorry I don't have a link... on dial-up tonight. :oops:
  • yellow
  • Newbie
  • Newbie
  • yellow
  • Posts: 5

Post 3+ Months Ago

i use jpg and it works for Opera and Moz. Opera even shows the icon in full size when switching pages.
  • ctownstud00
  • Born
  • Born
  • ctownstud00
  • Posts: 2

Post 3+ Months Ago

Maybe I didn't read all of this thread, I thought I did, but once you have created an icon, how do you actually get it to appear on a Web site? What's the HTML?

Thanks in advance,
Sean
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Here you go:
Code: [ Select ]
<LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">
  • Captain-Nick
  • Proficient
  • Proficient
  • User avatar
  • Posts: 333
  • Loc: North Lincolnshire, UK.

Post 3+ Months Ago

Quote:
Also, I've found photoshop best for creating favicons


I didn't know it was possible to create icons in Photoshop. How is it done? Or is this just refering to using a jpeg instead of a icon?
  • bluephoenix
  • Proficient
  • Proficient
  • User avatar
  • Posts: 331

Post 3+ Months Ago

Captain-Nick wrote:
Quote:
Also, I've found photoshop best for creating favicons


I didn't know it was possible to create icons in Photoshop. How is it done? Or is this just refering to using a jpeg instead of a icon?


From a fresh install, Photoshop does not have the ability to save files as .ico. You can easily find a plug-in that allows you to save files as .ico, though. Search google.

(as for the actual creating of icons... you can do that in any program you choose)

I searched it for you, first results that came up: http://www.telegraphics.com.au/sw/
  • muppet_tizer
  • Newbie
  • Newbie
  • muppet_tizer
  • Posts: 10
  • Loc: http://www.@

Post 3+ Months Ago

Without doubt the best icon tools out there are:

Any to Icon

Icon to Any

These are usually packaged with

Art Cursors and

ArtIcon Pro
  • sannsar4
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Prishtina / Kosovo

Post 3+ Months Ago

Big online favicon maker and favicon editor - Make favicons and desktop icons from any types of images and edit them in

http://favicon.ru/en/
  • narven
  • Beginner
  • Beginner
  • User avatar
  • Posts: 42

Post 3+ Months Ago

for creating favicon online... you can go to this links ... and make them directly online... :P

http://www.chami.com/html-kit/services/favicon/
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

Making .ico files such as favicon.ico with Adobe Photoshop

website-design-forum/making-ico-files-such-favicon-ico-with-adobe-photoshop-t255.html
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

I created an online favicon tool that allows you to convert images to .ico files, but more than that also allows you to do pixel editing and even create a favicon from scratch.

http://www.kgreene.com/favicon.php
  • Coraxus
  • Beginner
  • Beginner
  • Coraxus
  • Posts: 35
  • Loc: DryDock Station orbiting over Sov. Latifundia

Post 3+ Months Ago

I know it's gravedigging, but I have one simple quick question. Is there a way to incorporate these favicons into an external css page? Or do I have to do it the hard way and apply the code to every single page of my website?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Really you don't even need the meta tag. Just drop the ico file in your root directory. The browsers will look for it and find it even without any code being there.
  • Coraxus
  • Beginner
  • Beginner
  • Coraxus
  • Posts: 35
  • Loc: DryDock Station orbiting over Sov. Latifundia

Post 3+ Months Ago

You mean just put it directly under the root directory? Lemme try it, though some of the other pages doesn't have that, only my main front page.

I tried putting it under the root directory the same as where the index.html page is, nothing happened, it seems that you would have to put in the line of code in every page.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

What browser are you using?
IE is flawed. Try it in Firefox or Netscape or Mozilla

//edit - just view the source code for OZZU. you won't find a coded meta tag for the favicon anywhere.
  • webfreak
  • Beginner
  • Beginner
  • webfreak
  • Posts: 47

Post 3+ Months Ago

If you want it to work in IE, you have to save the website as a favorite, and then click the favorite to get the favicon to display. Firefox just does it like it's suppose to.
  • Coraxus
  • Beginner
  • Beginner
  • Coraxus
  • Posts: 35
  • Loc: DryDock Station orbiting over Sov. Latifundia

Post 3+ Months Ago

Well, for the most part I'm using Safari, the latest version. I can make the favicons work, but I just can't seem to get it to work automatically for all or any pages I put up on my site.

http://ddstation.bizari.net

and this is another page:

http://ddstation.bizari.net/kirbofactory.html

I have the icon stored in a folder under the root diretory, and then another copy directly under the root. The splash page has that code written to have it appear:

Code: [ Select ]
<LINK HREF="/ddsnav/ddicon.ico" rel="SHORTCUT ICON">


The other one doesn't have it, but according to what you said, it should have appeared.
  • iOXeR
  • Student
  • Student
  • iOXeR
  • Posts: 92

Post 3+ Months Ago

For excellent, FREE favicons go to http://www.famfamfam.com/lab/icons/silk/. I think there are 700. They're all really great.[/url]
  • Nasoma
  • Beginner
  • Beginner
  • User avatar
  • Posts: 42
  • Loc: Pennsylvania

Post 3+ Months Ago

Well I've got the faviocon working in the address bar which is great! But it doesn't appear on the tabbed window bar in firefox like other site's have.

Does anyone know how to make it appear on the tab as well?

Thanks :)
  • Impel GD
  • Professor
  • Professor
  • Impel GD
  • Posts: 834
  • Loc: Cologne, Germany

Post 3+ Months Ago

All I do is place 'favicon.ico' in the public_html directory and IE and Firefox (tabs included) show it fine.
  • typhon
  • Guru
  • Guru
  • User avatar
  • Posts: 1294
  • Loc: Memphis, Tn

Post 3+ Months Ago

It also depends on what theme you use with firefox. Im using japan black and it doesnt have any favicons in the tabs. That may be something else I have set but I think its the theme itself. But if you havent changed themes and other sites favicons show up in the tabs and your doesnt I dont know what to tell you. Sorry
  • Radaideht
  • Novice
  • Novice
  • Radaideht
  • Posts: 15
  • Loc: Canada

Post 3+ Months Ago

http://tools.dynamicdrive.com/favicon/
  • zooounds
  • Born
  • Born
  • zooounds
  • Posts: 4
  • Loc: Sweden

Post 3+ Months Ago

Gimp can both load and save ICO.
  • _mike_
  • Graduate
  • Graduate
  • User avatar
  • Posts: 131
  • Loc: The Netherlands

Post 3+ Months Ago

I use Infranview to convert images to ico files... too many options ;)
  • minipwn
  • Beginner
  • Beginner
  • minipwn
  • Posts: 38

Post 3+ Months Ago

I'm not sure if anyone mentioned this already but you can also just include this into your web page in your web pages <head> section

Code: [ Select ]
<link rel="shortcut icon" href="your_image" />


I normally use .gif format
Moderator Remark: Added [code] tags
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Posts: 147

Post 3+ Months Ago

iconfactory makes the plugin for pshop if im not mistaken, its around 80$
its called icon builder XP, but I've always used michelangelo http://www.microangelo.us for as long as i remember :P
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 91 posts
  • Users browsing this forum: No registered users and 42 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.