Favicons

I have recently been struck by how many websites I come across that do not have favicons. What is a favicon? you might ask. A favicon is a small symbol (usually a company’s logo) that is included on the tab of a web browser or the symbol next to the name of the website in a favorites menu. It is a way to display the company brand next to the title of the website. For example, the Twitter website uses its bird logo for its favicon.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The most shocking part of missing favicons, is that in many cases it is very large and reputable companies that have not taken the care to include a favicon on their website. This decreases the professional image of the site as well as harms credibility. It is the little details that matter.

 

Here are the basic steps for including a favicon when you are developing a website. Since I typically use Word Press when developing, that is how I will show you the steps.

 

1)    First, create a favicon image in Adobe Illustrator. Make it 72×72 pixels to begin with. Like I said before, this is usually a company logo.

2)    Next, export the favicon as a 72×72 pixel PNG.

3)    To create the ICO version, upload the PNG to http://tools.dynamicdrive.com/favicon/ and click the boxes “Merge with a 32×32 desktop icon” and “Merge with a 48×48 large XP icon.”

4)    Click on “Create Icon.”

5)    Once it is complete, click on “Download FavIcon.”

6)    Now you will need to create a Plug In for the Favicon on your Word Press site.

1. When you are in the dashboard area of the Word Press site, click on “Plug Ins” on the left hand bar.
2. Click on “Add New.”
3. Search for “Favicon” and choose “All in One Favicon” then “Install Now.”
4. Once the Plug In is installed go to “Settings” on the left hand bar.
5. Also on the left hand bar, click on “All in one Favicon.”
6. From here you are ready to create the various files and upload them to the Word Press site backend.

7)    Use the ICO favicon file that you downloaded in step 5 and upload it to the “Frontend ICO.” You can copy and paste the link into “Backend ICO” as long as you want it to look exactly the same on the backend. If you want the backend to look different, such as creating a black and white version of the Favicon, then create a new AI file and begin from step 1.

8)    Next, create a PNG version. Open the original AI file of the favicon and “Save for Web & Devices.” This time change the dimensions to 32×32 pixels and save as a 24-PNG.

9)    Upload this file to the “Frontend PNG” area on the Word Press site. Again, if you want the Favicon to look exactly the same on the backend, copy this URL to “Backend PNG” as well.

10)  Create a GIF version of the Favicon. Go back to the AI file and “Save for Web & Devices,” this time as a GIF with dimensions of 16×16 pixels.

11)  Upload the GIF file to the “Frontend GIF” and “Backend GIF.”

12)  Finally, create an iPhone version by opening the AI file and “Save for Web & Devices” with dimensions of 114×114 pixels, 24-PNG.

13)  Upload this file to “Frontend Apple Touch Icon” and “Backend Apple Touch Icon.”

14)  Be sure to “Save Changes.”

 

That wasn’t so hard, was it? Increase the professionalism of your website design by always remembering to include a favicon.