Tuesday, July 12, 2011
Friday, July 1, 2011
how to make a favicon
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><![CDATA[/*
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><![CDATA[/*
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><![CDATA[/*
Replace it with that code. Copy your image url into the 'LINK HERE' area. Do not erase the quotes. Save, and you're done! =) Let me know if you have any questions.
labels
tutorials
Subscribe to:
Posts (Atom)