First of all, don’t feel bad if you don’t know what the heck a favicon is. I didn’t. I figured it was some type of identifying image for my website but I didn’t know where it went, how to get it, where it showed up, or why I wanted one.
Basically a favicon is just a unique image that exists to identify your site. It shows up in bookmarks, on a browser tab (if you use a browser that supports this, I use Safari and favicons do not show up on each tab), and can be linked to your Pinterest account to show up on each unique pin you create from your site. Here are some examples of how/where my favicon appears:
The above image is an example of how my website appears as a bookmark (on a cellphone). Notice how Apple, Disney, and Yahoo all have personalized favicons, while ESPN simply shows up as a generic “E.” Rather than my website showing up as a generic image, I have now personalized it so it looks unique!
The image above shows how my favicon appears on Pinterest. Notice how the pin for Jalapeño Bacon Deviled Eggs just shows a generic, grayed out….um…crown? I can’t figure out what that thing is…but I didn’t set this image, it just defaults to this since my site did not have a icon. Next, notice once I set my icon that the unique favicon is now linked to my Easy Balsamic Roasted Salmon Pin. From now on, every recipe I pin will have my favicon attached to it. This helps to create consistency and begins to “brand” your blog!
To assign a favicon to your site you first have to create one! The thought of this intimidated me at first as I have zero graphic design abilities, but as I started playing around with it, it was really fun! You can make your favicon as simple or complex as you want. However, you don’t want the image to be too complex, as it will be shrunken to a tiny size and intricate details will not show up. For instance, my favicon would probably look better with just one large C, as it would be easier to see on the tiny image. However, I like the look of the one I have created so I am just going to roll with it for now 🙂
You can use an image editor such as Photoshop, but I chose to use PicMonkey, simply because I have more experience with it. I was impressed with how many options it gave you (for FREE!). So here’s how to do it with PicMonkey:
- Go to PicMonkey.com
- Select “Design” then select “Square”
- Under “Basic Edits,” you can begin to play around with your canvas color.
- From there, the world is your oyster! Depending on what look you want your favicon to have, you can begin to play with colors, effects, text boxes, graphics, etc.
Here are the steps I took to make my favicon, in case you want a starting point to begin learning the options in PicMonkey! (And by the way, I spent hours playing with all of the features to learn what was available and how to get them to mesh together in a way I wanted. These steps below make it seem like I knew what I was doing…I sooo did not. So don’t feel alone if you’re overwhelmed by the options! Just play!)
- First I set my canvas as the coral color.
- Then I went to “Frames” and “Shape Cutouts” and selected the design I liked best. In that same box I selected the mint color that I wanted to surround my coral circle. I like the look of both colors together, but you could select “Transparent background” if you want your favicon to show up like specific shape rather than a square.
- Next, I went to “Overlays” and selected “Labels” and found the polka dot overlay that I thought would look cute inside of the shape cutout I chose. I stretched the overlay to a size that would fit and then played around with the colors to create a lighter coral polka dot (they were black at first, but it looked too much like a watermelon!)
- Next, I inserted text boxes and began to play around with the fonts to find a design that felt fluid with the feel of my website. (Or the feel I want it to have, anyway!) I knew I wanted something kind of girly and fun and “Emily’s Candy” font was perfect! I faded the appearance a little so it wasn’t such a stark black look. For the text, it’s really however you want it to look, should you choose to use text at all!
- I created one ‘C’ in the sizing that I wanted then copied and pasted that ‘C’ so that the second one would be an exact size match.
- I then made a third text box for the ‘&’ sign and made it a little smaller than the ‘C”s. Then I just arranged them how I wanted!
- Finally, I went to “Effects” then “Bokeh Shapes” and played around with shapes and sizes until I found a look I liked. This just helped soften the overall look, which I thought made it a little more feminine.
- Once you made your favicon, you need to save and upload the image. When saving, change the dimensions to 512 x 512 pixels. (**This the minimum size required by WordPress, if you are using another platform you may need to search how to create your image to be the proper size! For instance, you may need to convert your image to a .ico file using the Favicon Generator.)
Now that you have your favicon saved, you can upload it directly into your WordPress site. You will do this from your dashboard.
- Go to “Appearance,” then “Customize,” then “Site Identity.”
- You can directly upload your favicon to “Site Icon”, then BOOM!! Favicon complete!
Your favicon will now show up on bookmark lists, applicable browser tabs, and once you post from your site, your new Pinterest pins will also have your favicon!
As I said, I’m no graphic designer by any means, but I was pretty happy with how my icon turned out! Here’s a few things to keep in mind when you’re creating yours:
- Try to create an image that really embodies the feel of your website. For example, if you run a blog about a hardcore motorcycle gang, it wouldn’t really fit to have an icon with small pink hearts. Or maybe it would, I’m not sure, I’m not in a motorcycle gang.
- Use colors, fonts and shapes that are similar to those found on your site. I tried to use a similar coral, black and mint, as these colors are found on my blog. I also liked the circular cut out since some of my images appear as circles, and the font was simple, feminine and fun, which is the feel I’d like for my blog to have! Also, if you already have a personalized logo, you could crop out a letter or two to use for your favicon.
- Don’t use too many intricate details. Again, mine is probably a little too detailed to fully be appreciated on sites such as Pinterest, but I’m already emotionally attached to it for now. You don’t want too many details that are going to get lost and look cramped when the image is squished down to size. Just keep it simple!
So there ya have it! This process worked really well for me, and based off some older tutorials I have seen it seems like WordPress created a much easier process for us than it used to be. Create and upload, could it be any easier?! 🙂
Update: I also just discovered how cute the favicon is when you save the website to your iPhone home screen! This makes your site look like an app but when you click on it it takes you directly to the live site.
Below are the steps you take to create this (I’m sure there’s a way for non-iPhone users to do this too, and since you guys are used to living in an Apple word I’m sure you’ve figured out how to do this on your own already 🙂 )
- Image on left: on the bottom of the website link in Safari, click the middle button with the arrow pointing up.
- Image in middle: Click on “Add to Home Screen”
- Image on right: Look how cute the link is! Now you can access the website directly from your home screen!
PS: I have updated my favicon image since I originally wrote this post. My new favicon was simply editing one of my photographs into a circle with a transparent background so I left the steps for my original favicon here since it was a little more involved! Below is my new favicon image!