Blog

Favicon Tutorial

Duplicate header.php in your Child Theme

Duplicate header.php in Child Theme

Find header.php on your Parent Theme

Find header.php on your Parent Theme

Create a favicon (usually titled “favicon”, and using a special image extension “.ico”). There are many sites that will let you upload an image file and then touch it up to save as favicon.ico. You can use a .jpeg or .png, too just be sure the image is 16 by 16 pixels.

Upload your favicon to your child themes’ “…images/favicon” directory. If you don’t have a child theme, click here. If you do, but don’t have the images and favicon directory, make them. (Although, really the directories are optional.)

Duplicate your parent themes’ “header.php” file in your child theme. Be sure that, if header.php is inside of a directory in the parent theme that you recreate that/those directories in your child theme.

Paste this code anywhere in the file:

<link href='your url' rel='shortcut icon' type='image/x-icon' />

If you are using .jpeg or .png, use this code:

<link rel='icon' type='image/png' href='http://www.website.com/fav.png' />
Place Favicon Code between <head> and </head>

Place Favicon Code Between Header Tags.

Replace ‘faviconpath’ with the path of the Favion. Once this is done save the settings and open your site. You should see your new Favicon next to your web URL on the address bar.

What’s Next

Our Work

Check out some recent work we’re proud of.

Our Blog

Read our latest ideas about tech, features, messaging, and more.

Get in Touch

Want to discuss a project? Hit us up, we’d love to chat!