Making a Favicon

Hi everyone! :slight_smile:

I want to make a favicon graphic file, and I think those are .ico files. I didn’t see how to do this in Fireworks. Does someone know how to do it in Photoshop?


You just need to download a simple plugin for Ps, which you can get here:

Then create your Favicon image (make it perhaps 16 x 16 px or 32 x 32 px) and then go to Save As and choose the ICO option that now is included in the list of options.

Do you have illustrator? You might be able to do the same thing in Photoshop as what I do in Illustrator, but I’ve never tried. You do not need a file converter for this. This is what I do to create a favicon: Create a new file in Illustrator that is 16 pixels by 16 pixels. Draw your favicon in this space. Export the favicon as a .png. Locate the .png file location in my computer (pc) or the finder window (mac). Rename the .png part to .ico. Upload it to the server in the same file location as the index of your website. I don’t know why, but it generally can take a few weeks for a favicon to show up in a browser no matter which method you use to create your favicon. It seems to show up faster in firefox for some reason. Especially if you type the full address of your site including the http://www. part and not just

If your favicon does not show up immediately, you might just need to be patient. It takes a while for browsers to update favicons on websites for some reason.

No, you can’t do that. It doesn’t create the necessary ICO formatting. IE (at least the older versions) need the .ico format/extension, but good browsers are happy with .gif/.png etc.

Good contribution, though!!

Did you see my link?

you can use this tool

very easy to use. you can use a gif. jpeg,… image file and generate a favicon from it from there.

Yes, I have extracted the plug-in and I see the feature in Photoshop to save or open a .ico file. :slight_smile: Just haven’t made the icon yet.

Now, I have made a 32 x 32 image named “favicon.ico”. I have tried to associate it with my HTML file inside the head tag like this:

    <link rel="icon" src="favicon.ico" type="image" />

It doesn’t appear in the browser…

It can tak a while for the browser to update. You can help it by clearing all cache data etc. Try this link in the head also:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

View the site in a browser you haven’t used before, and you will see the favicon appear. Place the favicon in your root folder for most reliable results.

I did everything you’ve said, and it’s still not appearing when I test it locally.

Nevermind, it works fine!!! :smiley:

It will work when it’s on your server, so don’t worry about it for now.

There is a great little program called Irfanview. Open any image you want in it and save it as a .ico file (be sure to call it favicon.ico etc!). I’m pretty sure that’s how I did mine :slight_smile:

For a favicon you no longer need an .ico file. Using .PNG is way better. The code that you should use in your HTML file is :

<link rel="icon" type="image/png" href="" />

Just use photoshop’s tool Save for Web to optimize the image and make it .PNG :slight_smile:

Not sure about modern IE, but it’s certainly needed for older versions.

Sometimes if you want to test it, and it’s not updating in your browser, you can just type the full path of the favicon in your browser window and shift-refresh there.

Hey Guys !! This is my first post in this forum…Happy to join in this sitepoint family
Making a favicon is simple…just create a size resolution of 16x16 or 24x24 in photoshop ( most effective graphic tool )
Create your favorite favicon and u can save it as .png then you can
<link rel=“shortcuticon” href=“images/iconname.png”/>

Thats all !!cool
thank you

Welcome to SitePoint, Bensonbravo :slight_smile:

And you’ve tested this in all browsers, right? (E.g. IE 8, 7, 6 …)

It’s a good diea to read a whole thread before posting. :slight_smile:

Yeah your rite ralph.m !! I accept with your point it wont work in IE.
but firefox is the user friendly browser where mostly used by everyone…