How to add a favicon to your website or blog
Posted in Favicon on November 17th, 2009 by Sloan – Be the first to commentFavicon (short for favorite icon), is a 16×16, 32×32, or 64×64 pixel square icon designed to represent your company or personal website or web page. When a favicon is installed in a website, internet browsers display these icons in several places, including the browser’s address bar, next to your web page name in a list of bookmarks, and on tabbed browser windows.
Example:
![]()
The addition of a custom favicon takes only a few simple steps.
Open your favorite image (or icon) editing software, such as Adobe Photoshop, or Adobe Illustrator. Create a document with dimensions of 16×16, 32×32, or 64×64 pixels. Design an icon you wish to have represent your website and save the document in one of the following formats: PNG (W3C Standard), GIF, or ICO. If you do not have an icon editing software, you can create a png, or gif, then use this handy tool by Dagon Design: Favicon Generator Tool.
Once your favicon is created, use an FTP program (FileZilla is my Mac favorite), or File Manager to upload your image file to your website directory.
Add the following HTML code to the section of each web page you would like this favicon to appear on.
<link rel=”shortcut icon” href=”http://yourwebsite.com/icon.png” />
<link rel=”icon” href=”http://yourwebsite.com/icon.png” />
Save these changes and upload your updated files to your website file directory.
To add your favicon to your Wordpress (or other) blog, you will need to edit the header.php file. Add the same HTML code to the header.php file as before:
<link rel=”shortcut icon” href=”http://yourwebsite.com/icon.png” />
<link rel=”icon” href=”http://yourwebsite.com/icon.png” />
Update your file, refresh your blog page, and admire your work!