Marieanne requested this tutorial, so here it is. Sorry it took me so long to put it up! I went to my grandparents, and things have been a bit busy. ;)
Anyways -- first you will need to download Gimp or create a 16 x 16 image in a photo editing program. You can also google free favicons, whatever you wish. I'll be using this image to create mine.
Now, upload your image when you're done to photobucket, or another place where you can get the direct link & copy it.
Now go to your blogger dashboard, then design & edit html.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><
Now go to your blogger dashboard, then design & edit html.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><
See that code at the very beginning? Delete all of it.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<link href='LINK HERE' rel='shortcut icon' type='image/x-icon'/>
<b:skin><
Hey! I have been wanting to do this for a long time! I tried this, but couldn't get it to work. What do you mean by "16 x 16 image"?
ReplyDeleteThanks!
Well, the size is 16 x 16, so if you use Gimp -- just click 'create new' and enter in the size, then add a letter or create a tiny picture for the favicon. If you don't use Gimp, I'd advise you to use one already made. You can google them, or go here [http://www.iconj.com/gallery.php]. Just some ideas! =) Hope that helps.
ReplyDeleteI'm lost. I was going to make one but it was more confusing than I thought. =P
ReplyDeleteKendra!
ReplyDeleteI can't believe all the things you've got going, girl! I am so totally impressed and blown away. Remember when you first started your blog . . . SO long ago? You've gone way over the top with your creativity and design ability. Thanks for stopping by my humble little blog . . . which looks the same as it always has . . . just a copy of the old HSB blog! Guess what? I'm going to put on a contest to give away a set of Andi, Riley, & Friends paper dolls!
Here is what they look like if you want to see them: http://www.andiandtaffy.com/paperdolls.html