Dressup my Blog - Add Favicon to My Adoption of Pelican Theme tuxlite_tbs
Mo 04 November 2013 by Andreas HüwelWell, 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.
Theme
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">
Makefile
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> $(PELICAN) $(INPUTDIR) -o $(OUTPUTDIR) -s $(PUBLISHCONF) $(PELICANOPTS)
<TAB> if test -d $(BASEDIR)/extra; then cp $(BASEDIR)/extra/* $(OUTPUTDIR)/; fi
robots.txt
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: *
Disallow:
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.