Categories
- Articles (5)
- Inspiration (4)
- Personal (8)
- Tutorials (2)
My tweets
Follow me - @kri5hsolanki
Favourites
Blogroll
How to Create a Favicon in Photoshop
A Favicon (short for favourites icon) is a customised icon which is associated with a particular website. It is also known as a website icon, shortcut icon, URL icon, or bookmark icon. It is typically displayed in the address bar of the browser.
In the beginning Internet Explorer would automatically be able to display this little icon in their favourites (bookmarks) list, as long as the little icon could be found at the root directory of the webserver. Over the years, this became a little bit more adaptable and by including a link on the
section of the HTML page of a page the icon would also be displayed.Most modern browsers now support the .ICO image file as this is the typical format to use, however, many other browsers now also support .PNG and animated GIF formats.
The dimensions of a favicon are 16 pixels by 16 pixels, so as you can imagine it’s pretty tiny!
To create a Favicon for your website follow these steps: (it’s really easy!)
Download and Install the Photoshop Plug-in
- You will need the Windows ICO file format Photoshop Plug-in the save the image you will create as an “.ICO” file. You can download the plug-in from the Telegraphics website, at the following link:
- Telegraphics – Free Windows ICO Photoshop Plugin
- To install the plug-in, follow the next steps:
- Unzip the folder
- Copy and paste, or alternatively move the plug-in (ICOFormat.8bi – on Windows) to the “File Formats” folder within the Photoshop “Plug-Ins” folder.
- If Photoshop is currently open, you will need to restart it.
Creating the .ICO file
- Open Photoshop, and create a new document. As we will be resizing the image to 16×16 pixels, it is important to not make the icon too detailed. For the Krishna Solanki Blog, I used the “hearts”, which is part of the main logo.
- Once you are happy with the final image, and it has been sized to 16×16 pixels, save it to your hard drive as “favicon.ico”.
- In Photoshop: File -> Save -> then from the Dropdown File Format dropdown select “ICO (Windows Icon) (*.ICO)”. This format will only be visible once you have downloaded and installed the plug-in.
Upload the .ICO file
- Now, to see the logo in the URL bar of your website, you need to upload the favicon.ico file to the root folder of your webserver. The file should be placed in the same directory as your homepage (index or default page). It is important to be aware not to place the favicon.ico in any sub folders, including an images folder. Once it is placed at the root folder, most browsers will be able to find the .ico file and load it automatically.
- In some cases the browsers will look for a direct link within the
<head>section of the HTML. If you like, you can also include this bit of code to aid those browsers:
<link rel="Shortcut Icon" href="/favicon.ico">
If you want to use a GIF or PNG, you can use this code:
<link rel="icon" href="/favicon.png" type="image/png">
OR
<link rel="icon" href="/favicon.gif" type="image/gif">
- If your favicon does not show up straight away, try refreshing the page and clearing your cache. It’s as simple as that!
10 Examples of colourful favicons
Author
Comments
-
Finally, a way to do it on the train!
-
@anup zaver: TWSS?
-
Krishna, one of the most common mistakes web designers make is not to close the tag, which means your code won’t validate as XHTML.
Instead of:
It should be:
From w3schools:
http://www.w3schools.com/tags/tag_link.asp -
It didn’t let me add code in my previous comment.
Instead of:
…href=”/favicon.ico”>It should be:
…href=”/favicon.ico” /> -
Deep Prakash Nishad
Your interest is quite interesting and different from others. I liked it. I am sure we will be good frienz.
-
Its Definitely good bookmarking for future reference.
-
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ ll be subscribing to your feed and I hope you post again soon.
-
Thanks guys for the feedback!
-
Aw, this was a really quality post. In theory I’ d like to write like this too – taking time and real effort to make a good article… but what can I say… I procrastinate alot and never seem to get something done.
-
Excellent blog! I genuinely love how it’ s easy on my eyes as well as the info are well written. I am wondering how I may be notified whenever a new post has been made. I have subscribed to your rss feed which should do the trick! Have a nice day!
-
Lu
This is such a cute blog! : )
It will def be a big help for my website. Thanks!
Or you could use a ready-made favicon generator site like http://www.favicongenerator.us