After returning from eye surgery, the next small but meaningful improvement to HistoryOfElvis.com was adding a favicon — that tiny icon that appears next to your URL in the browser tab. In 2008, this required editing your WordPress theme's header.php file and manually uploading an icon file. It was a minor task, but it represented an important principle: professional details build trust.
How I Added a Favicon in 2008
The process in 2008 was surprisingly manual:
- Find or create a small square image related to your niche (I used a JPG of the letter “E” for Elvis)
- Use a free online tool to convert the image to a 16×16 pixel favicon.ico file
- Upload the favicon.ico file to the WordPress wp-includes/images/ directory via FTP
- Back up the header.php file from your theme directory
- Open header.php in a text editor and add a link tag pointing to the favicon file between the head tags
- Save, upload, and reload to verify
If something went wrong — and it often did with path errors or quotation mark encoding issues during copy-paste — you had to debug it manually. For a task that affected a 16-by-16 pixel image, it involved a surprising amount of technical fiddling.
I recommended doing this because favicons suggest a professionally maintained site. They remind visitors to bookmark your page when they see the icon in their browser. Anything that builds an extra bit of trust helps monetize clicks. And since it was easy (by 2008 standards), there was no reason not to do it.
Adding a Favicon in 2026
This is one area where WordPress has improved dramatically. What used to require FTP access and PHP file editing is now a two-minute task in the WordPress admin panel.
The Modern Process
- Go to Appearance > Customize in your WordPress dashboard
- Click Site Identity
- Find the Site Icon section
- Upload a square image (WordPress recommends at least 512×512 pixels)
- WordPress automatically generates all the required icon sizes for browsers, mobile devices, and app shortcuts
- Click Publish
That is it. No FTP, no file editing, no debugging path errors. WordPress handles everything, including generating Apple Touch Icons for iOS devices and other platform-specific icon formats that did not exist in 2008.
Best Practices for Site Icons
- Use a simple, recognizable design — The icon displays at tiny sizes. Detailed images become unrecognizable blobs. A single letter, simple shape, or bold logo mark works best.
- Make it distinct — Your favicon should be recognizable among dozens of other tabs in a browser. Use bold colors that stand out.
- Start with a 512×512 pixel PNG — WordPress will handle the downsizing. Starting large ensures quality at every size.
- Consider dark mode — Many browsers and operating systems now support dark mode. If your favicon is dark-colored, it may become invisible on dark backgrounds. Test in both light and dark modes.
- Use Canva for quick creation — If you do not have design skills, Canva's free tier includes icon templates that work well as favicons.
Why Favicons Still Matter
The reasons I gave in 2008 still apply: favicons signal professionalism, aid in bookmarking, and make your site recognizable in browser tabs. But they matter even more now because:
- Google sometimes displays favicons in search results, making your listing more visually distinctive
- Mobile browsers use your site icon when users add your site to their home screen
- Social media platforms may use your site icon in previews and sharing cards
The Lesson from 2008
My instinct that “it is the small things that matter” was correct. A favicon is a five-minute task that makes your site look more professional. In 2008, that five minutes stretched to thirty because of the technical overhead. In 2026, there is genuinely no excuse not to have one. It takes less time to add a favicon than it does to read this article about adding one.




If you want to spice it up a bit, try an animated transparent favicon. For that you will need special code for the head, as well as an animated gif or png file. It works on Netscape and Firefox. You will also need the static version for Internet Explorer which can’t handle the animated file, and just ignores it. Instructions are here at http://www.cathetel.com/favicon.htm
******************************************
great post! I’m always looking for ways to facilitate networking with like-minded individuals. I especially appreciate unique tools that help me harness the power of web 2.0 and social bookmarking sites so I can make good use of my time. There’s nothing worse than spending countless hours online to build your online presence, while losing valuable time that you could be spending with your friends and family. Luckily, I’ve found tons of useful tools to meet like-minded individuals and network super efficiently. In this age of user generated content driving up a website’s ranking, content is king and getting that content in front of the right people is the name of the game! Keep up the great blog.
—
Ana Hernandez, CEO Netrageouz.net
Thanks so much for the help, Mason! I really appreciate it. My Favicon’s up and running. I want to create a simpler image, but now I’ve been through the process once it seems pretty simple to make a new one. Thanks!
Thanks Gen — your site looks great!
If you want to create animated favicon.
You can use free tool, such as, animatedfavicon.com
Thanks for the great post Mark! I have been wondering how i can change that little icon for some time. Now that i know how to it, i have no excuse not to. Thanks again!