Today I’m going to guide you through how to add a custom favicon to your blog or website. 🙂
What is a favicon?
A favicon is that little icon in the top left of your browser tab. Let’s take a look at some of the favicons in my tabs:
What format(s) can you use?
The primary file format for favicons is ico. That means your favicon image will end in the .ico extension (like: favicon.ico). This is the best format to use, and there are several online generators you can use to convert another image type (PNG, JPEG, etc.) to ico. Examples include:
If you can’t use .ico for some reason, then the next best option is to use .png. PNG images will only work in more modern browsers (for example, Internet Explorer 11+). Your favicon may not work in older browser versions.
The favicon HTML code
Here’s what the HTML looks like for inserting your favicon into your site:
<link rel="shortcut icon" href="URL TO FAVICON HERE">
See where I’ve put
URL TO FAVICON HERE? That’s where you would enter the URL to your favicon image. So mine might look like:
<link rel="shortcut icon" href="https://www.nosegraze.com/favicon.ico">
Where to place the code: WordPress
Have your own, custom theme?
If you have your own custom WordPress theme or child theme, then it’s safe to edit your theme files. Otherwise, you probably won’t want to edit your theme files, because an update would ruin your changes!
Using this method, go to Appearance » Editor to edit your theme. Then, on the right-hand side, find and locate the header.php template and click it. Then you’ll be editing this file.
Next, you’ll need to look for the start of the head of the file. This will be very near the top, and will look like this:
After that opening tag, paste your favicon code. So in the end it might look like this:
<head> <link rel="shortcut icon" href="https://www.nosegraze.com/favicon.ico">
Then save, and you’re all done!
Using a theme that has a hook to the
Some premade themes have a special “hook” to place code in the head of your theme. An example of a theme like this is Tweak Me v2. If you’re not using Tweak Me v2, then you’ll just have to look around your theme’s settings panel to see if they offer a similar option. All themes are different, and not all of them offer an option like this.
In Tweak Me v2, go to Appearance » Theme Options, and select the “Hooks” tab. Then find the box called Head Area. You can paste your favicon code inside there.
Help! I need another option!
If you’re NOT using a custom theme, NOT using a child theme, and NOT using a premade theme that has a “head hook”, then there’s still a way to add a favicon!
The easiest method is probably to use a plugin. Simply install a plugin like All In One Favicon and you can upload your favicon directly into their settings panel. It’ll handle all the code for you.
Where to place the code: Blogger
Login to the settings panel and click “Layout”. Then you’ll see an option for “Favicon”. CLick “Edit” and you’ll be able to upload your favicon there. Easy peasy!