Dressup my Blog - Add Favicon to My Adoption of Pelican Theme tuxlite_tbs

Mo 04 November 2013 by Andreas Hüwel

Drei Farben Well, until now my blog is indeed mostly tech stuff - pure content without much beauty. Now its time to add at least something. I still have my old sandbox version - made with drupal and then… well, dropped because of pelican. There is this simple but very nice feature of a favicon. In my 1st aproach I just do a 16x16 pixels one and check that at least Firefox will display it correctly. With my earlier sandbox-blog I already did the icons and some more images that I carefully distilled from my painting artworks - just waiting to be replugged.

Favicon Picture

That picture was a nice watercolour experiment… (took me weeks to get the many layers finished…)

To have a Favicon in my blog, I made a 16x16 png picture and converted it also into thetype="image/x-icon" format.

The one favicon file favicon.ico gets placed into new folder <PATH_TO_BLOG>/extra/. It will be put into document root by make publish. That is for those browsers that maybe too dumb to understand the rel="shortcut icon" stuff that I put into my theme.

The other favicon favicon.png goes straight into the theme folders.


My theme is a variation of tuxlite_tbs.

The favicon.png is placed into <PATH_TO_THEME>/static/images/icons/

Edit the theme itself: Find in <PATH_TO_THEME>/templates/base.html

<!-- Le styles -->
<link href="{{ SITEURL }}/theme/bootstrap.min.css" rel="stylesheet">
<link href="{{ SITEURL }}/theme/bootstrap.min.responsive.css" rel="stylesheet">
<link href="{{ SITEURL }}/theme/local.css" rel="stylesheet">
<link href="{{ SITEURL }}/theme/pygments.css" rel="stylesheet">

and add these lines:

<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="{{ SITEURL }}/theme/images/icons/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="{{ SITEURL }}/favicon.ico">


To automate publishing I also extend my Makefile (please care for all copy&pasters out there: It’s a leading <TAB>, not spaces!):

<TAB>   publish:
<TAB>       if test -d $(BASEDIR)/extra; then cp $(BASEDIR)/extra/* $(OUTPUTDIR)/; fi


Sure, robots.txt is technically not really neccessary, but… better be nice to robots! One day robots could rule us all! It’s content is this two liner, opening everyone everything:

  User-Agent: * 

robot.txt comes also into folder <PATH_TO_BLOG>/extra/.

That’s it! (Well, for now…)

Some More Reading

Gabe Weatherhead, Moving to Pelican - Design Planning

Duncan Lock wrote a plugin Better Figures & Images Plugin for Pelican, that I will definitely have a look at. Just because images are not very well done yet in this blog.