Home arrow Graphic Design arrow Customizing Wordpress Favicons and Gravatars
GRAPHIC DESIGN

Customizing Wordpress Favicons and Gravatars


In this Wordpress tutorial, you will learn how to customize favicons and gravatars in a few simple, short steps without the need of a plug-in.

Author Info:
By: Ruker
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
July 15, 2011

print this article
SEARCH DEVARTICLES

In this Wordpress tutorial, you will learn how to customize favicons and gravatars in a few simple, short steps without the need of a plug-in.

Creating a Custom Gravatar

Gravatars are used for two purposes in WordPress. The first is for comments - the second is as author images. If a user comments on an article and has their own gravatar, great. If not, the gravatar image will be set according to what you have in your default gravatar list.

To see this default list of gravatars, or to test the default, simply go to Settings, Discussion, and scroll down to the bottom of the page. You will see a section that says: "Default Avatar". There are 7 avatars/gravatars that you can choose from. The normal one you see everywhere is the Mystery Man, which consists of a silhouette of a person with a gray background.





You can add your own custom gravatar to this list pretty easily. For starters, you need to create a gravatar. Again, you can do a Google search for "Create Your Own WordPress Gravatar" to learn how to make one in Photoshop or your preferred image editor.

Once created, go to Media, Add New, and click on Select Files. Choose your gravatar image and then wait for it to upload. Once it does, be sure to save the image URL, then click "Save All Changes".

Next, to add the gravatar to your choices, go to Appearance and click on Editor. On the right-hand side you will be presented with a number of files you can edit, depending upon which template you have chosen. Look for function.php. Search the code until you find the following line of code:

$myavatar = get_bloginfo('template_directory') . '/images/gravatar.jpg';

Replace the image link with the URL of your image link, then click Save.

Now all you have to do is go back to Setting, Discussion, and choose your default gravatar as the image you just added. Next, just click Save Changes.

You can also use a plug-in to change your gravatar; just search the Wordpress plug-in site for "gravatar" and you will be presented with a bevvy of options.

How to Install a Favicon in WordPress

Favicon's are those little images next to the URL in your browser's URL box. They serve as a sort of pseudo-authentication and branding image (anyone can use any image as a favicon, but it helps people to know that they are still on your site) and overall, it just looks better than the normal Internet Explorer icon (the blue "e") that you usually see.

This article won't teach you how to create a favicon. For that, you can just do a quick Google search for "How to create a favicon". There are several services available, and applications that you can use to assist you in the creation process.

Once you have created your favicon (the official name is favicon.ico), you will need to upload it to your site's theme folder via ftp (the location will change depending upon your theme), being sure to name it the same as your old favicon.ico and override the old favicon.ico in the folder.

Another method you can use is to upload your new favicon image to the media library, being sure to copy the images URL. Then, go to your theme editor, as detailed in the gravatar example. You will want to edit the header.php file and insert the following code:

<link rel="shortcut icon" href = "favicon.ico">

Next, replace the value of href= with the URL of your new favicon image.

There are also Favicon plugins such as All in One Favicon and WP Favicon, which can help you get the job done as well.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Graphic Design Tutorials
More By Ruker


blog comments powered by Disqus
GRAPHIC DESIGN ARTICLES

- Customizing Wordpress Favicons and Gravatars
- Building Corner Effects with Transparent Bac...
- 3D Graphics Technology: VRML Part I - Introd...
- Creating Visual Effects
- Web Page Design Overview
- Creating Artistic Photographs
- Working with Tools in Paint Shop Pro 8
- Using HTML Quickform for Form Processing
- Introduction to Adobe FrameMaker
- WebLogic Workshop, WebLogic Platform, and th...
- Planning the Site
- Working with Web Services
- WebLogic Workshop Application Development Ba...
- Scanning Images for Web Use
- Web Graphics Overview

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials