How to create a favicon for wordpress

Posted on by
Reply

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:

  1. Open your favorite painting program (e.g. Photoshop).
  2. Create a 16×16 px picture.
  3. Start being creative (that’s a bit of a challenge with only 16x16px but you can do it).
  4. 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.

  1. Go to your WordPress Administration Panel.
  2. Click on “Appearance”.
  3. Click on “Editor”.
  4. Choose “Header” or “header.php” from the list on the right and click it.
  5. Find <head> and enter a new line below.
  6. Insert the favicon code given above.
  7. Change the relative or absolute address according to the actual location of your favicon.
  8. Save your changes

That’s all about it.

Favicons and why you need them

Posted on by
2

Lets talk about favicons. “Favicon” comes from “fav icon” which means “favorite icon”. But what is it and where is it used?

Lets get started on favicons

In this example the Google favicon is shown:

For this favicon Firefox is used as my browser of choice. Obviously you may choose any other browser with few differences if it comes to favicons. As you can see favicons are displayed in tabs, additionally they appear left to the location bar where you can use them to create new windows or drag and drop for bookmarks and if you change the properties of your bookmark you can even use the favicon itself as your bookmark.

Favicon file format

.ico, .png and .gif are suported formats by a wide range of browsers. However, Internet Explorer only supports the .ico file format. Since Internet Explorer is still widely spread, you’re well advised to make .ico your favicon format of choice.

Favicon size

The possible favicon size ranges from 16×16, over 32×32 to 48×48 pixels. But since the actual favicon displayed in your browser will be 16×16 pixels choosing this size will guarantee optimum results.

Also a favicon is usually restricted to 8-bit, 24-bit, or 32-bit in color depth. Of course there are ways to circumvent this restraint. But due to cross browser compatibility you can guess what my advise will be :)

Favicon Html

If you want to add favicon to your site, the favicon Html has to be included somewhere in the header of your html file:

<html>
<head>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<!-- Your content here -->
</body>
</html>

You can either use a relative path, like in the example above or you can use an absolute address like this:

<link rel="shortcut icon" href="http://www.example.com/favicon.ico"/>

It doesn’t really matter where your file is located. Although it might be a good idea to keep it in your root folder where it can easily be found if you ever want to change it. Additionaly this will make sure your favicon is displayed in your subscribers’ feedreader since the root folder is the default location for the favicon.

Animated favicon

You might think about getting an animated favicon gif. Animated always means that there is a good chance your visitors might feel offended. Not because of the actual image, but flashing or moving gifs always create the feeling of being screamed at. It’s like the annoying guy on a party who can’t stop talking although everybody is already trying to ingnore him.

Secondly, and even more important, not all browsers support animated favicons. Especially Internet Explorer which, as already mentioned above, still refuses to accept any other favicon format than .ico[1].

Favicons

To create a favicon just create a 16x16px image with .ico as file format. Store it to your root folder and include it by using the code given above.

Sources

[1] Wikipedia – favicon

Starting out

Posted on by
Reply

There it is. Plain, boring, empty.

A fresh installation of wordpress and the default Twenty Eleven Theme. Nothing fancy, nothing special. This is how (almost) every brand new blog is born these days.

This is, how this very blog is starting out right now. Does it have to stay this way? Certainly not. There are hundreds of theme developers, thousands of themes, billions of designs out there just waiting to dress up your blog and make it fancy.

Although it is possible to set up your blog with a cute new look in a matter of minutes (which is indeed the smart thing to do) this is not what I’m going to do here. I will start out with the bare minimum (twenty eleven) and start to create “an experience”.

I will document my way from plain and boring to (hopefully) immaculate and awesome. Will this take long?

Probably.

But I don’t want fast-and-fancy. I wont longlasting and professional.

If you’re interested to follow me along my way or even jump on and move along, you’re very welcome and any kind of comment is highly appreciated.