Once saved as a “favicon.png” amend the file name to “favicon.ico” – even though it isn’t technically an ICO file. The important thing is that it has a transparent background. Now, save the image that will become the favicon as a GIF or a PNG-8 or a PNG-24. I have an extra symbol on my logo which I use for the favicon:Īll I have to do is create that as a 16 x 16 pixel or 32 x 32 pixel square document in Photoshop: It’s good to design the logo of a site with the favicon in mind because you need to isolate an element from the logo that is square.

So read on … Create your favicon in Photoshop or in any other image editorĪlthough there are free favicons you can download in the web, it’s always best to have an original favicon for your site. Below are a few you may recognise:Īnd look at that one at the end there! Ugly isn’t it? You don’t want to be the owner of that website. Have a look at my Create a Favicon for a Website video for a laugh about my accent! What is a favicon?Ī favicon (or favorite icon), also known as a shortcut icon, is an image file containing a small icon associated with a particular website. So most people pronounce favicon FAVE-IKON.

This is why, when you’re designing a website for yourself or a client, you should take care on all the little details – including the favicon! When you download a template from these are all included, you just have to replace them with your own icons.The “halo effect”, as I mentioned in an article about why I’d never use cheap website builders, suggests the way we look, dress, speak and the sort of homes we live in influence other people,s impressions of us.

apple-touch-icon-144x144-precomposed.png.

apple-touch-icon-114x114-precomposed.png.

My advise is to not include a favicon in your document, but have a list of files ready in the root website: Icon size for the device is 57 × 57 pixels, iOS searches for filenames Website’s root directory for icons with the apple-touch-icon orĪpple-touch-icon-precomposed prefix. If no icons are specified in the HTML, iOS Safari will search the The browsers will search automaticly a list of files, see this example for iOS: With the current status of browser-support you don't even have to add the HTML tag for the favicon in your document. More information on touch icons can be found in this article. To also support touch icons for tablets and smartphones I prefer the approach of HTML5Boilerplate

How to make a favicon code.org