Your favicon is a huge part of your websites branding. A Favicon is a little icon that shows up in the corner of an open browser window tab. This is becoming increasingly important as people browse the internet with multiple tabs open all the time. Having a catchy favicon reminds them that you are there and which open tab is yours.
One huge mistake I see a lot of new bloggers make is they leave the default favicon. Usually, this is done simply because they don’t know how to change it. I see this a lot with websites that use Bluehost and people that use the Genesis framework.
Not adding your own customized favicon is only hurting your brand.
Here is a video showing the process. If you are more of the reading type skip over the video. If you are looking for ways to do this without a plugin scroll to the bottom of the article!
Create your favicon
Open up your favorite graphics editor and create an image that is 128px x 128px. Even though a favicon is only 16×16, we want to be able to see what we are creating. When we convert to a .ico file, it will be sized properly.
Tips for making an awesome favicon
- Only use 2 or 3 colors
- Simple, bold lines work best
- Have a bold color for the background of the icon
- Use a letter or two. This can be the easiest way to get a quick favicon
- A simpler version of your logo could work also
- Keep it consistent with your brand
- Photos usually don’t translate well
Once you have created your favicon save it as a .png file. Our next step is to convert it to an .ico file.
Converting your image to an .ico file
- Head over to http://tools.dynamicdrive.com/favicon/
- Click Choose file
- Browse your computer to the file we just created
- upload the file
- Look at the preview, make sure it looks how you want
- click the download favicon button
- Save the favicon somewhere you can find it!
Awesome, we now have our favicon file. Be sure to keep the filename as favicon.ico.
Now it is time to upload it to your site. There are three ways you can do this. You can use a WordPress plugin, upload the current favicon file, or upload the file using FTP and then add some code to your header.php file.
Using a Plugin (easiest)
- Install the https://wordpress.org/plugins/all-in-one-favicon/ all in one favicon plugin
- Activate the plugin
- Visit the plugins settings page (Settings > All in one Favicon)
- Upload your new .ico file in the top upload area, labeled ico front end. You can also upload it to ico back end. This will show the favicon on both the front end and back end of your site.
- Click save changes!
- Refresh your browser a few times. Sometimes it takes a while for a change like this to show. Try restarting your computer. If that doesn’t work have a little bit of patience, it will show up soon!
Upload via FTP (medium difficulty)
- Open up your favorite FTP client
- Navigate to your themes folder. wp-content/themes/themename
- Look for a favicon file, could be in the root of the theme or a sub directory. Most theme developers use the images folder so I would look in there.
- Upload your favicon.ico file to the same directory as the current one. Be sure to overwrite the existing one!
- Refresh your browser a few times. Remember it could be cached so restart or have some patience!
If your theme does not have an existing favicon file, I suggest using the plugin method.
Advanced via FTP (advanced users only)
Now that you have a favicon go show it off to your readers! If you notice that any of them don’t have a personalized favicon on their blog/website be sure to share this tutorial with them!
Let’s see those icons!
I would love to see your new favicons. In the comments bellow post a link to your website that has a new awesome favicon. If you don’t have one yet, link to a site that has a favicon you think is really neat!