Installing a “Fav” icon in your church website

Your church website should have a “fav icon” that visually stands out in the user’s browser. This is the icon that appears next to your website address in the URL field, and on the top of the tabbed window when a user opens your site. You should able to see my “fishie” favicon in your browser windows right now. 
I made using a free online tool at

Fav icons make the bookmark or browser tab
“Fav” is short for “favorite”,
and even if you didn’t know they were called that, you’ve seen “Fav” or “Favorite” icons all over your Browser window. A “fav” icon is a simple custom graphic provided by your website that appears next to the name of the webpage.

Here you can see the “fav icons” in my browser window Favorites Menu.  For example, you can see that I have a Google “favicon” in my favorites bar.  Your internet browser may show them differently.

Note: Not all webpages can or have ‘fave’ icons. Instead, they use the default brower’s icon, such as Internet explorer’s standard favicon:

One of the BIG advantages of having a custom fav icon is that it makes your link/bookmark STAND OUT to the user. And if you’re like me, you’ve created a mini menubar of “favorite sites” on the top of your browser windows. You do this by dragging the faveicon of any site down on to the toolbar. Very slick, and you can see the visual impact in the image above.

Another big advantage is that you can encourage church members to “drag the church’s website onto your browser toolbar” so it will always be staring at them one click away when they browse the internet.

FAV ICONS ARE TERRIFIC REMINDERS that say “come visit me!”
…and they are really easy to make and install.

To  add  your  own favicon.ico to a web page you need put the icon graphic file on the server into  the same directory as the web  page it is for.  So, if your main page is located at Then you need to upload your favicon.ico to, i.e, the same folder as the page you want an icon for.  That  is the  first place a  browser will search.

Note: By putting the faveicon.ico file in the main folder/directory, it will become the default favicon for all the  pages in  your  domain.

Next… Depending  on the user’s browser, the favicon.ico may not always be picked up by simply uploading it. Sometimes you have to put a piece of code in the main index page of your site to say “show my favicon.” Here’s the html code you’d slip into the <head> section of your webpage’s code to be sure every browser sees your favicon.

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

You don’t have to create a custom favicon. Just google “christian fav icon” to look for free ready-made ones you can copy to your website. Chose one that is between 32×32 pixels and 64×64 pixels and visually stands out. Icons need to be simple, so don’t look for one that has a lot of text because the image is so small it won’t be readable.

Your favicon does not have to be in the .ico file format. Most web browsers can support jpg, gif and png favicons as well as “ico”, (thus, you can upload favicon.jpg, or favicon.gif, or favicon.png). Your choice.

Tip: Favicons need to be simple “icon” graphics, not photos as they can only be 16×16 pixels.

Tip:  Include the favicon image in newsletters and emails to help members MAKE THE CONNECTION. Every little bit helps when trying to get & stay in front of your members’ attention.

<>< Neil MacQueen

Check out Name Badger at

This entry was posted in Building a Better Church Website, Tech Tips for Church Staff (and you). Bookmark the permalink.

1 Response to Installing a “Fav” icon in your church website

  1. Neil says:

    NOTE: You can only put a ‘fav’ icon on a website you own/manage. For example, if you subscribe to a website and create one through, you can’t install a fav icon because wordpress controls the domain.

Leave a Reply

Your email address will not be published.