In order to get your favicon to appear in the browser, you have to put the following in the section of every page of your website. HTML to get the browser to recognize your Favicon This is because social sites, like Google+, when your posts are shared, will just look for a favicon.ico on the root and will put up an ugly default one if they can’t find yours. Once you have created the “favicon.ico” you need to upload it to the root of the server – where your index.html or index.php, or, if you’re using WordPress, this is where all the “wp-” files and folders are.Įven if, in the next step, you specify your favicon.ico to be in another directory I would still advise you to also put it in the site root. But I find it works fine appending the file extension from GIF or PNG to ICO – however I believe this may not work with some really old versions of Internet Explorer. However, if you want to create a real ICO file direct from Photoshop you need to download this ICO file format plugin for Photoshop or you can use an online favicon generator. 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! 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.

How to make a favicon in pixelmator