A favicon (favorites icon) is a small image (usually a 16 x 16 icon) that sits besides the title of your webpage as shown in a browser tab. Favicons are a must for any proper and complete website because they are used by browsers in lots of places (like tabs and bookmarks) and they help your returning users to easily identify your website visually.
The use of favicons has become a part of business branding.
Here’s how to get your’s:
- Create a unique 16 x 16 image that represents your site.
- Save this image as an icon (extension is .ico).
You can use any graphic editing tool that allows saving images in .ico format. Last time I tried, PhotoShop does not allow this. You may want to check out GIMP instead.
As an alternative to using GIMP or other graphic editing tools, you may simply save your image as a JPEG and and use one of the popular free online services for converting JPEGs to ICOs. I’ve tried this one. It’s pretty good.
- Make sure you name this file favicon.ico
- Using FTP, save the favicon.ico file in your themes main folder. Delete or?overwrite?any existing file with the same name.
- Using FTP, save another copy of the favicon.ico file in the root directory of your site. Delete or overwrite any existing file with the same name.
- Modify the header.php file within your current theme.?Search for the line of code that begins with
<link rel="shortcut icon"
and ends with
/favicon.ico" />
Overwrite it, if it exists, or add the following code below the?html head tag:
<link rel="shortcut icon" href="<l?php bloginfo('stylesheet_directory');??>/favicon.ico" />This is required in order for the favicon to show up in some older browsers.
Refresh or restart your browser. Your favicon should now be displayed!
Note: Although you are also allowed to use transparent images in either .gif or .png formats, .ico format is preferred because it is compatible across all browsers and therefore prevents 404 errors that could occur on old browsers when attempting to retrieve a .png or .gif favicon.
Found this article valuable? Want to show your appreciation? Here are some options:
- Spread the word! Use these buttons to share this link on your favorite social media sites.
- Enter your email and press "Go" to subscribe to my notifications. That way, you'll never miss my updates.
- Buy something from my shop. I sometimes get a commission.
- Contribute by adding a comment using the comments section below.
- Follow me on Twitter, LinkedIn, and Facebook.
I tried it, but it didn’t work for me. Perhaps I got something wrong somewhere.
It worked! Thanks.
Hey Chinomnso. Good to know it worked for you. I can see your footprints on the moon 🙂
RealFaviconGenerator and its WordPress plugin (http://wordpress.org/plugins/favicon-by-realfavicongenerator/) do just that on auto-pilot. And more: it generates all icons you need to support classic desktop browsers, iOS, Android and Windows 8.
Thanks for the info Philippe.
I never tried that plugin before but I notice it does have positive reviews on the WordPress plugin repository. I’ll have a look someday.