You want to creat favicon. Yes you do, even if you don’t know it yet. First a link, which will explain everything you need to know about favicons.
Have you ever seen these tiny little squares at the very left of a tab?
This means the page you are viewing doesn’t have a favicon. At a first glance this is not a real problem, as long, as the entire site has a great appearance. But on a closer look this is maybe the biggest “tiny-fault” one can make creating a new website.
Why does the favicon matter?
As mentioned before the favicon is displayed in the tab which is holding your site. This means it’s a fast way for the user to distinguish tabs.
Furthermore the favicon is used in the bookmarks when a user decides to favorite your site, hence its name.
As you might already imagine, all of this means your favicon is one central point for your branding process.
So don’t take this issue lightly.
Create favicon
If you want to create a favicon there are several ways. First of all you can do it on your own or you can use an ico maker. You can even choose to create favicon online such as favicon.co.uk or Dynamic Drive,
How to create a favicon
The easiest way is to create your favicon on your own:
- Open your favorite painting program (e.g. Photoshop).
- Create a 16×16 px picture.
- Start being creative (that’s a bit of a challenge with only 16x16px but you can do it).
- Save your file.
If your program is capable to save your file as .ico just do so. If it’s not save your file as .gif and just change the file format afterwards. Usually this won’t break the file.
Favicon maker
Of course you can use a favicon creator. Usually you will just upload your logo (or any other kind of image) and the ico generator will make favicon by just resizing the image.
But the results may vary depending on the technique used to scale the image.
Favicon code
Relative:
<link rel="shortcut icon" href="/favicon.ico" />
Absolute:
<link rel="shortcut icon" href="http://www.example.com/favicon.ico"/>
WordPress favicon
To use your favicon wordpress has no built in function (yet). It’s fairly easy to implement anyways.
- Go to your WordPress Administration Panel.
- Click on “Appearance”.
- Click on “Editor”.
- Choose “Header” or “header.php” from the list on the right and click it.
- Find <head> and enter a new line below.
- Insert the favicon code given above.
- Change the relative or absolute address according to the actual location of your favicon.
- Save your changes
That’s all about it.