Create a Favicon to Brand your Site or Just do it for Fun

How to create a favicon.ico for your site or blog.

FavIcon is a favourite icon.

Basically, you create a small graphic (16 X 16 pixels, tiny in fact) which will show up in the address bar when someone looks at your site. It will also show up in their bookmarks, if they bookmark your site. Using a favicon will help brand your site and give it a polished look. Plus it gives those us of who are addicted to tweaking and twiddling with their sites, something else to do.

It’s not hard to create a favicon. Once you save your tiny graphic as favicon.ico you upload the file to your site, it should be in the root directory so it’s easy for web browsers to locate. Then you add the code between the head and /head tags in your HTML code. Note: If you run the Thesis WordPress theme. One of the features is a favion option which uploads your favicon for you. Your theme or template may have the same option, check first and save yourself the extra work.

How creative can you get with such a minuscule image? See what you can do. The smaller you make your file the blurrier it gets. See the example image which is one I use for my personal site. When it is condensed and compacted down to a favicon size you really can’t tell what it was meant to be. So, that wasn’t a great image to create a favicon with.

Have fun, let me know if you load a favicon. I’d like to see what other tweakers and twiddlers come up with.

Wikipedia has a page about Favicons.

favicon code

Choosing an image to convert to a Favicon

As you can see from my example, a favicon is very tiny.

Choose the image you want to convert into a favicon wisely. It should have very basic lines, a very simple uncomplicated design.

Stick to one or two colours (white works well). Adding too much colour will create a blur when the image is compacted down to size.

The image you choose needs to fill the image space, cut away any extra background before you convert it to a favicon.

Create your Favicon Image on the Web

Making Headway with Headway WP Theme

After seeing  April Tara’s blog I was pretty sure I wanted to try Headway. Her blog has some of my favourite things which I was using with the Thesis theme. I spent a couple of hours looking at themes. Before choosing Thesis I spent years looking at free themes and patching together what I wanted for my own blog. So, I expect a lot from a premium (paid) theme.

I picked Headway’s WordPress theme as the one I would switch from Thesis for. I am not knocking Thesis, I still find it a great theme, the GPL debate was mostly a good time for me to try a new theme that also looked good. Matt Mullenweg bought Headway for me after his post about paying for a new theme for anyone using Thesis interested in trying a new theme.

I did have a rough start using Headway. I was frustrated. I’m not that frustrated now that I have made some progress. There are still some issues which I would like to change or fix. But, overall, Headway is working for me.

Headway:Visual Editor:

Visual Editor: Leafs:

The first thing you need to know is how to find the drag and drop to manhandle your layout. It is part of the Visual Editor. If you look at Leafs you will see you can enable Arrange and Resize. Be aware it is kind of backwards: if it says “enable” it means it is not going to work until you click the button. If it says “enable” it is actually disabled. When it says “disable” it is enabled. In a future Headway update they might add the “D” to make this clearer.

Leafs is mainly a way to move around your template with your mouse. You can set the dimensions of your columns but be careful, they still have to fit in the wrapper in order to appear side by side. Also, check your site in different sized monitors as it will need to shrink and contract to fit various screens. Keep things fluid so they can suit each screen size without you needing to having to stress out about it too much.

Other than the drag and drop feature Leafs are mainly widgets you can add to the site. They can replace some of the WordPress plugins you may already be using. I haven’t done much with Leafs so far. I did add the About one but may yet change my mind about it as I already have a whole About page which is linked in my header navigation bar.

Visual Editor: Templates:

You can ignore the Templates tab unless you buy another template or skin for Headway. You don’t have to. I think this tab on the Visual Editor should be moved to the bottom of the list. It is an optional thing versus the tabs for Design Editor, Site Configuration, Leafs and Navigation which you will each need.

Visual Editor: Design Editor:

Design Editor is where I spent most of my time. I think it has too many options. It would help to have something that lets you set the font and colours for the whole site/ blog instead of going through each and every littlest option for comments, footers, headers, widgets, etc. A main switch would be nice. Some people may like to have a rainbow of colours and use every font at least once, I prefer to stick to a couple of colours and a couple of fonts.

In the Design Editor go down the list on the Element Selector. This is the best way to make sure you don’t miss something. Once you choose an element you will see a button appear: Call this element out. This is very nice, it highlights which element you will be working on. It’s a guide through your functions so you know which part of your blog theme you are changing before you begin making selections. Almost everything you need is in the Design Editor, just keep working your way through. It is handy to open a Notepad file and paste in your code for the HTML colours you are using. Much easier to paste them in as you go if you remember which one is the main colour for headers and subheaders and which one is background or subtitles.

Visual Editor: Site Configuration:

Site Configuration is where you can make big changes to your header, footer, wrapper and body, basically push around your site width at the top, middle and bottom. After you do you may need to go back to Leafs and fiddle around to get your columns in place again. This is where having fluid elements comes in handy.

WordPress Admin: Headway:

Now, you could do this at the end or you could have started here but last on my list is configuring Headway back in your WordPress Admin. You will leave the Visual Editor and step back into the WordPress screen again.

Headway: General Options:

In General Options you can add Header and Footer stuff. I put in some extra meta tags. (You add your main meta tags for keywords and description to Search Engine Optimization below). I also added stuff to the footer but I have more work to do on that, it looks a mess right now as I want to make a horizontal bar for widgets to be in 3 columns there. So far I have not gotten it to work. General Option is pretty simple, just add your Favicon and feed as directed.

Headway: Posts/ Comments:

If you want short posts in a double row as I have in this blog you tick Enable Small Excerpts in Posts/ Comments. At the bottom of Posts/ Comments you can also change the “Read More” words you use in the excerted posts.

Headway: Search Engine Optimization:

We now come to Search Engine Optimization. Skip down past the navigation title section. (I only changed Posts Page Title so it doesn’t show “Blog | Word Grrls” at the top of my blog). The important section is for your basic meta tags: description and keywords. Write a good description but don’t make it a book and don’t let it be spammy. Describe your site as you would to someone who asked you what your site is about. Make it clear and keep it simple. Don’t go into overkill on keywords. Try to find search terms someone might use to actually find your site. You can use phrases, not just single words.

Thats about it. Once you have gotten this far you have covered the basics of working with the Headway theme. I still have a list of things I am working on. One nice thing I discovered in Headway is that you can use the new WordPress 3 Menu feature which is not yet configured with the Thesis theme. The Menu (which is on WordPress, not part of the Headway theme itself) will let you set up the header menu bar with links to your pages, categories or outside (custom) links you want to add.

I am coming to like Headway. But, it does need to build more community support in order to get the extra tutorials, plugins, features, widgets and such which you can find when you use the Thesis theme. Headway needs to grow and I see every chance that it will. I wouldn’t say Headway is a full package yet. If you read my list of things I am working on (below) you may notice a couple of things Headway could add in another upgrade. I’m glad to see a strong community around Headway because this is how things like new features and extras come about.

Other resources:

Headway Beginner

Headway Tips

Headway Demo

Headway Hub

Headway Support – For premium members who have bought the theme.

Headway WP – Headway, as mentioned on Twitter.

Just for fun and human interest, these are the things I have worked on, have fixed or am still working on with this blog and the Headway theme. Some of them are not Headway related but still relevant to the outer workings, the things you can see when you land here. Right now the footer thing is the biggest project. I have tried the Headway Hub plan but it did not work for me. Looking at WordPress options, but no luck on getting this working yet.

  • Footer- need 3 columns for widgets, gadgets, etc. – Would like one long horizontal sidebar or 3 widget columns, whichever is workable.
  • Fluid main content div to fit the page rather than be fixed or float and throw off the alignment. (This seems to be ok, so far).
  • Add header graphic, under the header text and link. (Not able to do this with Headway it seems).
  • About page is missing and navbar seems to be uncoordinated. (Turned out to be user error which I fixed).
  • Background, something new. (Still high on my to-do list).
  • Sidebars, look untidy still. (Done, changed my font, personal taste).
  • Set up e-cards – WordPress thing. (This has been on my to-do list awhile. I keep putting off getting into figuring it all out).
  • Headway saves and then returns to previous settings. Why? (Still a mystery but… it only did it the first day I was working with it).
  • Set standard for all pages. (I am still missing sidebars when you click into a post etc).
  • Lifestream feed and RSS. (Done).
  • Big, gaping space appears at bottom of content, above footer. (This was an odd thing. My div columns were re-setting themselves, one kept becoming very long. Seems to be ok now.)
  • If possible… have a ticker type thing announcing posts which I would like to highlight or feature, running right under the header and navbar. (Have not started this project but expect I can find some kind of WP plugin that will work for my idea).

7 WordPress Plugins I Don’t Really Need but Must Have Anyway

WordPress plugins that I love but don’t really need. (Why limit yourself to plugins you need?)

  • Drop Caps Plugin – Add a drop cap to the first letter of each blog post. (Makes me think of fairy tale books of old).
  • Personal Favicon – I had wanted an icon for awhile but could not find something to make it appear faithfully. Now I do. It’s cosmetic but a nice touch.
  • Sideblog – Possibly my favourite and most used of them all! Have a mini bog within your blog. I use it for quick notes, sticky notes or just call them extra bits of stuff.
  • Tagline Rotator Plugin – You can have a tagline to go with your blog title. This plugin lets you set up a bunch of them and have them rotate. I’m using several taglines and add more when I think of something good.
  • WP Lifestream – Another miniblog idea but more like links and commentary. You just add the code and don’t have to post to this one, it comes in as a feed from sites you use: StumbleUpon, Tumblr, etc.
  • Tumblr Widget – The sweetest miniblog I have found. This plugin lets me have my posts to Tumblr appear in the sidebar of my  blog.
  • WP Change Template – The newest and not yet fully given a trial run. Lets you set a timer on your WP themes. For instance, when you want one to run the week of Halloween and then go back to your regularly scheduled theme.

DIY: FavIcon

FavIcon from Pics — how to create a favicon.ico for your website

Absolutely splendid. I made one of that stick figure grrl with the maple leaf. It’s too small to use but I like how easy it was to do with this site. I’m going to come up with a more usable image for the favicon.

FavIcon is a favourite icon. Basically, you create a small graphic (16 X 16 pixels, tiny in fact) which will show up in the address bar when someone looks at your site. It will also show up in their bookmarks alongside your site, if they bookmark your site. It’s a non-essential thing that helps make your site stand out. Plus it gives those us of who are addicted to tweaking and twiddling with their sites, something else to do. It’s not hard to create a favicon. Once you save your tiny graphic as favicon.ico you upload the file to your site, it should be in the root directory so it’s easy for web browsers to locate. Then you add the code (which I can not post in Blogger, I tried) between the head and /head tags in your HTML code. Not so hard was it!

How creative can you get with such a miniscule image? See what you can do and keep it clear to see. The smaller you make your file the blurrier it gets. Have fun, let me know if you load a favicon. I’d like to see what other tweakers and twiddlers come up with.

Wikipedia has a page about Favicons too. You can see examples there. I also found a gallery of favourite favicons.