What is a favicon? Where did they come from and how are they made?
The earliest evidence of favicons can be traced to the ancient Mayans dating back as far as 1,400 BC.
Today, the favicon is still a mystery to many. There are numerous websites on the topic, some with content far overreaching anything a favicon could ever be, while others provide online favicon generators, and still some insist on Photoshop plugins to save .ico files.
A favicon is a 16 x 16 pixel icon that shows up next to your URL in a browser and will get saved with bookmarks for your site. Pretty neat. To make your own favicon:
1. Design or resize a picture in a graphics app like Photoshop, Gimp, or Picnik probably anything will work. Save as a gif (just feels safe since it too is ancient).
2. Rename from “favicon.gif” to “favicon.ico”.
3. Upload to your website directory and add this meta tag to the head section: <link rel=”shortcut icon” href=”favicon.ico” />
Using WordPress? Drop your favicon into your theme directory (/wp-content/themes/yourtheme) and add this to your “header.php”: <link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico” />
Happy faviconing!
I appreciate this post to its fullest potential.
im afraid i once again looked like a nerd when i couldnt stifle a laugh in the staff room and had to explain first what a favicon was and why it was funny about the mayans… thanks
nicey. thanks ian. i just heard the favicon for the first time last week and now a whole helpful post about it!
@filip, this is what you need to do to remove the siedabr and make the posts larger.Remove all of these from your template:~~~~~~~~~~~~~~~~~~~~~#siedabr-wrapper { clear:left;}~~~~~~~~~~~~~~~~~~~~~#siedabr { width:150px; float:left; padding:8px 0; margin:0; word-wrap: break-word; /* fix for long text breaking siedabr float in IE */ overflow: hidden; /* fix for long non-text content breaking IE siedabr float */} ~~~~~~~~~~~~~~~~~~~~~~~~~/* Typography :: Sidebar———————————————– */.siedabr h2 { margin:0; padding:0; color:$siedabrHeaderColor; font: $headerFont;}.siedabr h2 img { margin-bottom:-4px; }.siedabr .widget { font-size:86%; margin:6px 0 12px 0; padding:0; line-height: 1.4em;}.siedabr ul li { list-style: none; margin:0;}.siedabr ul { margin-left: 0; padding-left: 0;}~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Change this:#main { width:430px; float:right; padding:8px 0; margin:0;~~~~~To This~~~~~#main { width:630px; float:right; padding:8px 0; margin:0; After you get that done, we will work on your favicon. OK?!