When I start telling people about the importance of a favicon to their overall online branding strategy, they usually say the same thing: “Aren’t you taking this branding thing a little bit too far?”

My answer usually goes: “Not if you’re serious about your own branding efforts!”

It’s true, favicons are very little things, probably the least important bit of a site, but it’s attention to detail that makes a site stand out; and even if it sounds crazy, favicons are very important from a branding point-of-view.

Considering WDD is a website oriented to a designer audience, my guess is that many of you already know what favicons are and how to create them; but this article may still help you to undertstand why you should make them, and also serve as a good resource page.

I’m sharing a big list with favicon-related resources below, so consider bookmarking this page for future reference. Oh, and if you do, notice the WDD favicon right in your bookmark list 😉

Just in case you’re not a designer, or any sort of black-belt in favicon-arts, this article covers probably everything you will ever need to know about these elusive little 16×16 pixels squares, and even some interesting favicuriosities as well. So enjoy!

 

What is a favicon?

Favicons are small square images usually 16×16 pixels which are used by web browsers to show a graphical representation of the site being visited at the left side of the browser’s address bar. You have probably seen many favicons before, even if you don’t know what they are. If there’s any doubt, the image below will help.

Two examples of favicons on a Google Chrome tabbed browser.

If you’re interested in understanding a piece of internet history, here’s a interesting fact:

The word favicon is a portamentau made out of the words “favorite” and “icon”, and it was named as such because it was first supported by Microsoft’s Internet Explorer 5 and just in case you don’t use IE, this browser bookmarking feature is called favorites.

 

What’s the purpose of a favicon?

Back in the early days of the internet, tools such as Google Analytics were mere dreams in the minds of a few web-nerds, so as strange as this may sound, at that time, favicons were used as a way to estimate website traffic by counting the number of visitors who bookmarked the page. (That’s another interesting snippet in the history of the internet!)

But interesting facts aside, the main reason for having favicons nowadays is to improve user experience. Favicons are used in all modern browsers at the address bar, in the links bar, in the bookmarking area and in its browsing tabs. Besides that, a few browsers also show favicons whenever you create a shortcut link for the corresponding website in your desktop and your mobile device.

Surely the main reason to have a favicon is the obvious improvement in user experience. A website without one will show a generic browser symbol on all the points-of-interaction I mentioned above, and if you care about your user experience, you must care about favicons.

But I cannot avoid seeing things through the lense of branding, my area of expertise, so I think favicons are even more relevant from a branding point-of-view. Again, with so many points of interaction, not using them to raise brand awareness is a crime. Truth is that finding creative ways to improve your online branding is always a challenging task, and having a favicon is an easy and simple way of accomplish that. So get yourself one my friend!

 

How to create a favicon?

Creating a website favicon is easy as pie. As a matter of fact, you don’t even need to be a designer to do that. Surely it helps if you are, as you can put your skills to work and create something that really stands out, but even the less tech-savvy of us can do it in about 5 minutes or less, using the right tools.

The websites in the list below allow you to create a favicon simply by uploading a pre-existent image. So if you want to create a favicon for your brand, all you need to do is to upload your logo to one of the following sites and download the favicon file. Easy peasy, lemon squeezy.

Here’s the Favicon generator list you’re looking for:

• Favicon CC
• Favicon Generator
• Dynamic Drive Favicon Tool
• Chami Favicon Service
• Favicon Generator ORG
• Favicon UK
• Degraeve Favicon
• Anti-Favicon
• Gen Favicon
• Favigen

The websites above vary a lot in terms of the resulting file you get; especially in terms of file size and extension. If you are looking to get the most compatible file possible, I strongly recommend downloading a image sized 16×16 pixels with the “ico” format.

If you need some inspiration, try checking out the favicon galleries below:

• Fine Icons
• The Favicon Gallery
• Delta Tango Bravo
• Fresh Favicons

How to use your favicon?

Once you have your favicon carefully designed, installing it on your server shouldn’t take more than a couple of minutes in two easy steps. For that you’ll need access to your website root folder and a text editing tool to change your website HTML code.

Step 1

You’ll need to upload the “favicon.ico” file to your server. In order to do that, point your browser address bar to your FTP server; your URL should look similar to this:

ftp://username@yourwebsite.com

Press enter and the browser will prompt you for an username and password before granting access to the file server. Once you’re in, just upload the “favicon.ico” file to the root folder and you’re done.

Step 2

Now you’ll need to edit your website HTML page to help browsers find your favicon image. Keep your FTP window open, find and download the “index.html” or “header.php” file from your server and follow the steps below according to the file you get:

If your website is made of plain HTML, insert the code below in the HEAD area of the “index.html” file, and don’t forget to change “yoursite.com” for your own website address.

<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">

If you use WordPress, insert the code below in the HEAD area of your “header.php” file.

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">

With that done, upload the file back to where you got it from. You’re done!

On a matter of fact, most modern browsers are smart enough to find your favicon file even without any piece of code, but only as long as the favicon image has 16×16 pixels, it has been named as “favicon.ico” and is saved in the root folder of your website folder.

 

How to create a favicon in Photoshop

With so many tools available to help you create your favicon, why would you want to take the hard road and create it in Photoshop? Well, if you’re a designer and want to get the best out of your favicon, certainly that’s the professional way of doing it. The trick is that Photoshop doesn’t natively support “ico” files, so you need to download this plugin from Telegraphics.

Be sure to install it before following the tutorial below. Photoshop will not work without it.

Look for the “ICO” option in your Photoshop “Save As” box to confirm the plugin is installed.

Create a new document in Photoshop selecting the menu item “File” and the following option “New”, then set your canvas at 64×64 pixels. Why? Since the 16×16 final favicon size is so small, having a bigger canvas to work on will help you get your creative juice flowing. Then paste your logo into the document and release your magical unicorn-creative power.

Once you’re done, simply select the menu “Image” and the following option “Image Size” and reduce the image to 16×16 pixels. Remember to click on “Resample Image” and choose “Bicubic Sharper”, this is to make sure the image doesn’t blur when resized. If you don’t like the final result simply undo your latests changes with “AltCtrl/AltCmd+Z” and keep on working on the design until you’re happy with it.

In order to finish your favicon all you have to do is to click on the menu “File” and the following option “Save As”, there you remember to name your file as “favicon.ico”. Once again, job done!

 

Conclusion

Favicons are one of those little things that we usually don’t pay too much attention to, but the truth is that far from being insignificant, they are a very important part of the web, both from a user interface perspective and a branding point-of-view.

Some say that great things come in small sizes, and I think that applies to favicons as well, because any web designer and/or branding specialist who always take the time to add a favicon to their clients’ sites, even when the client has no idea of what a favicon is, demonstrates a great deal of professionalism and attention to detail; the sort of quality that every client appreciates.

 

Do you create favicons for your clients? Are they too much trouble for too little reward? Let us know your thoughts in the comments.

Featured image/thumbnail, bemused image via Shutterstock

The Ultimate Christmas Vector Bundle – only $9.99!

Source

Ah, Ruby on Rails. The champion of the startup hustle, and the side project. That in essence describes a lot of why I think people enjoy the community as a whole, because they all appreciate those two facts.

It surely has done a lot for the startup world, and for developer communities alike. It is very similar to languages such as JavaScript in the affects it has had on the web world. I know quite a few people that have gotten into development solely due to the fact that Rails is so inviting, and Ruby is so beautiful.

You might find that Ruby on Rails is right for your big project, let’s dive into the basics and find out.

Ruby on Rails for beginners and startups

Ruby is a dynamic high purpose language that has all the benefits of Perl and PHP, without the syntax woes they bring with them.

Ruby was created by Yukihiro “Matz” Matsumoto, in the mid-1990’s. And it is used inside of the Rails framework, hence Ruby on Rails. Rails is an open source full stack web application framework that harnesses a lot of the power Ruby offers. It also offers organization, and great programmer methodologies all baked into one singular framework, and on top of that it is incredibly extensible.

Now, I won’t go into much more technical detail, after all, these are things you could find in a quick google search. So let’s get to the meat of the conversation. 

Rails for beginners

It may be an over-exaggeration to say Rails will save your life, but the fact is that I have gotten more people to start programming through Rails and Ruby than any other language or framework. I think the environment as a whole is totally approachable for newcomers to programming. For instance, the community is rather homogenous and seems to be focused on the same goals. That really means a lot when it comes down to thousands of people trying to direct your attention.

Let’s say you were to start in the JavaScript community, well, it is like the wild west. There are unbelievably amazing things happening in that community from robotics to jQuery to Node to Backbone to testing to advanced statistics, and so much demands your attention.

So many people are trying to go in so many different directions that it can be hard for a beginner to decide who of what to follow.

There is perhaps a lot of crossover of people from those two communities, it is very clear that what they care about in JavaScript is not the same as what we care about in Ruby and Rails as a framework or language.

On top of all that you get a beautiful programming language.

Rails image via Shutterstock.

Personal preference only here, but I think Ruby is the most beautiful programming language ever created. It is the most amazing thing I’ve ever used to code, and it really motivates me to create things on the side when I get home from a long day of programming at my job. That is when you know a language is fun for you, when you do it after 8-10 hours of programming at your day job. I realize that may not be the same for everyone, but as a rule of thumb, the creator of Ruby really strove for human readable syntax and not complicating things as he went. Very similar to the way the creator of Clojure approached the building of a language: process. They both chose simplicity over complexity, because we all know that in simplicity there comes great complexity; and typically vice-versa, hence the beauty of things like Ruby and Clojure (minus the over use of parentheses in Clojure, ugh).

Finding a path to follow in the Rails community is very simple. In other languages it can be a bit more difficult to know who the ‘tastemakers’ are so-to-speak, but in Rails it is very obvious. That isn’t to say that you have to follow those people, but from those people you can deduce where the heavyweights are playing around, and then go from there.

Typically heavyweights have projects or efforts in Rails that are at the center of a vibrant community supporting it. So those are always great places to jump into. Lastly, Rails is a very experimental framework, and a forward thinking experience to code in as you use it.

As a beginner you will not only enjoy the syntax and community, but also be pushed to learn new things. And it is all about learning new things in this world of programming.

Rails for startups

Ruby on Rails is one of the most powerful tools, and most enabling tools, the valley and startups alike all over the world have seen in years.

Be it the syntax, the ability to get up and running in hours, prototyping incredibly quickly, whatever it is, it has taken off.

Rails shops and startups all over have taken off as well because of it, and that is simply the sugar in the pudding to why it is a delicious treat for you. Not only do you have so many other companies adopting it, and possibly running into similar issues, you also have a battle tested framework.

This is not an Alpha product, it is not a Beta product. This is not an abstracted thought process for developers to organize code. This is some ‘in-the-wild herd of dogs style’ results from people that grouped together to form this community all started by a one DHH of 37signals.

Again, I will harp on the community, because it is so important. It is such an evolved and mature community (in a sense) that you can literally find help in any way you may need. Be it developers who love programming in rails or just people who want to consult to fix your problems. All the way to people who love using NoSQL in Rails environments, as well as love to hate on the Asset Pipeline 😉

Speaking of that, it’s another great thing for beginners and startups alike. There is an organizational tool called the asset pipeline that helps you organize all your JavaScript (or CoffeeScript), CSS, and images into a folder that houses those respective subfolders. That in and of itself is useful. All in all, if you are in a startup searching for a language to dabble in, in order to code your product, give Rails a shot. You may just find that it surprises you.

 

Why Rails is useful (for individual developers)

Another place that Rails has really taken off is in the personal projects space.

A lot of developers are pretty similar, as in, they are intelligent and capable individuals. I know I know, that isn’t a rule, but it is still often the fact of the matter. And people of such a nature often want to have personal projects they can hack on to learn, or get revenue from. And everyone I know agrees that Rails is a perfect way to do that.

Rails image via Shutterstock.

Using tools like Heroku for deployment building and deploying a Rails app is literally a 1, 2, 3 step or rather a 1, 2 step. It is amazing. In fact, I use Rails and Heroku to handle my blog. Every time I make changes I compile production assets for Heroku, push to Github, and then push to Heroku. That simple. And if I have a new computer I want to pull down to, I just change some remotes with a little easy to understand terminal magic, and that’s it — you are ready to hack.

One of the often misunderstood parts of the development process is overcomplicating things by accident. It is just one of the magical things in development, it seems. You can without regard or happenstance literally overcomplicate anything. It is just what happens, and often times developers don’t even realize they are doing it. Well, you are in luck, Ruby has a lot of ‘convention over configuration’ action going on, which really implicitly helps us de-complicate things.

For instance, if you have a class of “Library” that inherits from ActiveRecord, then it’ll automatically look for a table called Library in the database. It’s little things like that that help us not have to write things over and over. In fact, it overly exemplifies the essence of DRY (Don’t Repeat Yourself). Which is amazing and very helpful. Why not save a little time, after all that’s more time for coffee.

Another thing I love about it is that the creator of the language is absolutely obsessed with code simplicity and beauty. So if he can do something simpler and in a more beautiful fashion then he will implement it, to the angst of many developers at that. But I personally love it.

Rails as an engine will also help you learn about frameworks in general without one stepping on your toes, and I think it does it in a perfectly balanced way.

Of course, people will say that PHP frameworks do that in a better way because you can still slam your head into a wall with PHP without finding ways around it (to learn from). But in fact I think Rails does that in a much more elegant way than PHP ever has, and probably ever will.

Rails image via Shutterstock.

You see, in Rails you still have to learn so much in order to be able to build a real or even small Rails application. It’s not like you can just use scaffolding for everything. In fact, you actively can’t do that, but you will at first and it will help you learn things like Views, Templating, and how Ruby interacts with HTML.

For instance, one thing I love doing is putting a Ruby variable that is storing server data of some type that has already been set in a data attribute. So for instance: -data-attribute-for-ruby=”<%= Time.now %>” and then work or interact with that data attribute in JavaScript.

Rails can get pretty complicated really quite fast, and the beauty of Rails is that it forces you to explore other languages as well. It will enable you to be really good at JavaScript and very good at CSS. It will also give you a better understanding of SQL and how databases operate, all implicitly.

The simplicity makes the barrier to entry so low that even looking at the database schema makes sense, Oh I made that class so there it is. Not, Oh shoot wait, I did the class thing so now I have to do the database thing how do I do that. I don’t know about databases. Ugh. Screw this. None of that in Rails.

You learn without having your foot stepped on. And it is an incredibly beautiful thing.

 

In Summation

I really think that learning Ruby can make you a happier programmer in general.

I can only speak from personal experience here, but it honestly reinvigorated life into my development. I was a PHP guy for over 8 years and it really was something I didn’t “love” but I did anyway. After finding Ruby I literally threw up my hands and never turned back to PHP. It was such a grandiose change in my life that I have created projects, gotten jobs, done consulting, and contributed to some great open source projects as well as the Rails core, all where previously I was just a student that knew PHP.

I could of course contributed and done those things in PHP, but the point is I never had the passion to do so, and passion is so important. If you don’t have passion for what you do, then you should stop doing it. Right now. And then you should go learn Ruby on Rails. It may bring it back.

 

Have you dipped into Ruby on Rails yet? Do you think there’s a better development platform out there? Let us know in the comments.

The Ultimate Christmas Vector Bundle – only $9.99!

Source