Flavicons are small images that help identify a site.



After installing a theme, one step that can make your website standout as professional is to add a logo that will appear in the address bar or in the bookmark menu. Adding a little flavor to a page, these icons are called flavicons. The process is not all that hard.


Selecting an image: a company logo is the obvious choice, but you may need to modify it. The image has to read as being recognizable as your company logo, even when it is small. Writing is out. A single letter or two can be seen, but a sentence will be lost. On my desk sits a check from a bank which has a logo of four stripes and one square. It is black and white on the check, but this image follows their name in many locations, so I know that the colors are red and blue. On their website, this image is used as the flavicon. When I see it, I immediately recall the bank’s name. On my different sites, I use the same flavicon to help with this branding. Why this image? It is a section of my family crest, so it is unique (at least to my family members). It has a significance to me, which I can express into my working philosophy (the leaves symbolize protection on both sides of the river Ladbeck= protecting my clients). Finally, the image can be identified wether it is small or large. That creates a pretty good formula when deciding upon a logo/flavicon: make it unique as you can to your business; make it significant to your business and use it consistently to market your brand; and keep it simple to have the image identifiable at any size.


Sizing the image: flavicons need to be of a certain scale for the browser to use them. There are different methods to measure size on a website. For images, the most common method will be the number of pixels for the height and width. In the neighborhood of 15 by 15 pixels is about right. My flavicon is 16 by 10 pixels. To adjust the size, you have to open the image in a photo editor. I use the open source program GIMP or GIMPshop (open source software is free to download). In this program, you will go to Image > Scale, which opens up a tool box that tell you the current image size. Pick either size to type in the new measurement, and this will adjust the other size to keep the proportions of the logo the same. Save it. The best format will be as a gif image. A png image file is alright, but a jpeg or jpg file should be left to photos on your site. If your logo is in a jpeg format, you can save it as a gif file (the program will convert it).


Making the image available to your website: there are two methods to load the image onto your site: through WordPress administration panel; and by a file transfer protocol (FTP) program. Your website will have an administration area, frequently this will be the cpanel, that has an ftp application to load files onto your site. You can also use your own ftp app to accomplish this. The image has to be stored in the public folder section of your site (the public_html folder). I will go over the ftp method in another post. The other method may be easier for a new site owner. In your administration section for WordPress, you will see Media as an option. This is where you can look through images stored on your site, or where you can upload an image. Add a new image. It will ask you to chose between a browser or a flash upload. Pick the one that you are more comfortable with. Once the image is loaded, a form will appear asking for additional information. Since this is a flavicon, you will not need to list a caption or a description of the image. You will need to make note of the name (it will load the name of your image automatically, but it could be changed here) and the url location of the image. This will be in the following format: http://yoursitename.com/wp-content/uploads/imagename.gif.


Using it as a flavicon: now we need the browsers to recognize this image as your flavicon. In the WordPress administration panel, you will find an Appearance option. Under this option, go to the Editor. This is where you can edit element of your theme. Choose to edit the Header.php file. You are going to enter a line of code into the head section. The head section is defined by tags that open it and close it. These are <head> and </head>. Look for the closing tag. Above this tag, you will place the following line of code: <link rel="icon" type="image/gif" href="”http://yoursitename.com/wp-content/uploads/imagename.gif"/>. This tells the browser that there is a link to an icon image at this location on the site. At the bottom of the box where you edited the code is a button to update the file. This saves your changes, so now the site has a flavicon. Go to your site to check it out.


Troubleshooting: you do not see the image; there are probably two basic reasons. First, lets look at the image location. If you used the ftp method to upload the file, you need to remember where you placed it. If you dropped it into the public_html folder, the path to the image is yoursitename.com/imagename.gif. If you placed it into a specific folder, then those need to be added to the path. If you used the WordPress method, check that you have the folder names spelled correctly on your path. Second, the code was not saved into the file or saved into the wrong location. Go back to edit the Header.php file. Check that the code was placed inside the <head> and </head> tags. If it is not there, add it again, and save the file again. If the code is below the </head> tag, move it above that tag.


Now you have the first tweak to making your site your own. What happens if you do not add a flavicon, the browser will display a default icon, which will be a blank page. It is nice to go that extra step to brand your site.