What? A new tutorial? Do you still do those? Yes. Yes I do. I've been amazed by how busy I've been, but I'm SO excited to share what I've just learned with all of you! How to create and insert your OWN favicon into your blog or website!
If you are like me...I had no idea what that little picture next to your URL was called. You know what I mean, right? That tiny little icon that shows up next to the URL for a website? Like this:
Do you see my little icon there? THAT is what I have wanted to know how to do for SO LONG, and I had no clue just how easy it would be. Now I'm going to walk YOU through how to do this yourself! It will really make your blog or website your OWN and help it to stand out that much more. Okay, let's get started!
1. Create your own icon. This can be any image in any square size. Remember, because it is going to be shrunk down quite small (16px by 16px) you will want to keep the design simple. You can design your icon in Photoshop, or use a photo or image that you already have! I created a new document, named it "Favicon" and sized it to 1"X1" at 300 dpi to make designing it easier.
If you don't have photoshop, you can google "icon generator" and find lots of online programs that can design one for you. This is what I came up with:
2. When you have your icon finished, resize the image to 16px by 16px at 72 dpi. This can be done in Photoshop by clicking on "Image>Image Size" and filling in the spaces as follows:
If you don't have Photoshop, you can google "Favicon Generator" to find a free website that will resize your image to the right size for you. Handy dandy!
3. Now you will need to upload your image to some place like photobucket, flickr, picasa...wherever. You'll need to get a URL for your favicon. I upload mine to photobucket.
4. Head to blogger and click on Design>Edit HTML to get to your HTML page. This is the frightening part for most of us. ACK! All of that code! What if I screw it all up? You won't. Just ignore everything except the part I'm going to tell you to look for. Scroll down until you see a line of code that says;
< /head >
Right ABOVE that, you will want to copy and paste this code:
< /head >
Right ABOVE that, you will want to copy and paste this code:
Where it says "URL OF YOUR PICTURE" , you should input the direct URL of your favicon that you copied from Photobucket or wherever! That's it! You should now see your little icon appear next to your URL and on your tabs, etc. It's so fun to customize your blog this way. And it's really easy!
3 comments:
Bobbi - you are amazing. Thanks for loving us little people and for sharing so much.
Who made your little cartoon of you? I would like to find a place to do that. Your little cartoon is so perfect. Your blog is so perfect! Your family is adorable. Thanks again for being so helpful and for being so creative and artist. Nothing goes un-noticed!
That is so totally awesome!!!! Thank you so much!! I did this today and it works perfectly except that I found that I did not need the duplicate code that is in your box. Thanks again :)
This is sooo cool! Thanks!
Post a Comment