A favicon is a detail in web design that is often overlooked, and it’s a missed opportunity. This tiny little image is just one more way to extend your branding throughout your site – and even onto your visitor’s computer! You see, visitors who bookmark your website will also notice that your favicon becomes the icon for that bookmark, rather than an unattractive “blank” icon or default web browser icon. Furthermore, users who utilize a modern browser with tabbed browsing will see your favicon on the browser tab as well – just one more way to remind them of who you are!
So how do you get one of these elusive favicons? Read on for a simple step by step solution.
1. Create: Create a .png, .gif or .jpg image that you want to use as a favicon. You can also download any number of great-looking icons at websites like Free Favicon, Icon Finder or Icon Archive.
2. Convert: Go to Dynamic Drive’s Favicon Generator. Upload your newly chosen icon and click “Create icon.” A favicon.ico file will be created and you’ll see a preview on the screen.
3. Save: Save favicon.ico in a safe place. You can rename it, but ensure that you do not modify the .ico file extension.
4. Log In: Go to your website admin. If you have an HTML site, you might use Dreamweaver, if you use WordPress it’s your WordPress admin panel, etc.
5. Upload: Upload your new favicon file somewhere that it is accessible via the internet. That means you should be able to type in a URL — like https://www.webprotime.com/uploads/favicon.ico — and see the favicon in your browser. If you cannot see it, neither can anyone else.
6. Prepare Code: Replace the URL in the following code with the URL to your favicon:
<link rel="shortcut icon" type="image/x-icon" href="https://www.webprotime.com/uploads/favicon.ico">
7. Insert Code: Put the above code – with your modified URL – in the <HEAD> section of your site’s HTML. (This is where I lose most of you. It sounds scary, but it’s not!)
Depending on what platform you are using, there is a different way to get there – but you need to find the source files for your website. This might be under Appearance –> Editor in WordPress, or it could be accessible via FTP or Dreamweaver on an HTML site. You’re looking for a file called header.php in WordPress. If you are on a straight-up HTML website, you’ll need to edit each page individually.
Look for code that begins <HEAD>, with a bunch of gibberish after it, and ending with </HEAD>. Directly after the <HEAD> tag, on it’s own line for readability’s sake, add your <link rel=” …> code.
8. Save! Now you can view your site – and your newly established favicon – in your browser. Note that if you are using a caching plugin, it may take longer to show up, and you may want to clear that cache manually. Your browser also may have cached the old version of your website, and you may need to clear your browser’s cache.
TIP: Some WordPress themes, such as the amazing Tatai Theme, provide special fields for you to insert, or even upload & insert your favicon. If the code here scares you (it’s ok! It won’t bite!) then look in your admin and theme options to see if there is an easier route to take. Some themes provide special areas to link your favicon where you’ll only have to enter the URL you got in step 5 above, and some provide Header Script areas where you can insert the code from step 6 without digging through PHP files.
