Creating custom favicons
5 February 2018 | 40 views | Tags: Documentation
If you'd like to generate favicons for your site that feature your own badge or logo, start by draw your own logo first. It's best to draw it a vector (line art) based drawing programme such as Inkscape as this will give you flexibility to re-use the image in many ways, but you can produce it in any graphics programme you are comfortable with.
Favicon images need to be square, and should not include fine detail as they will be viewed at small sizes (down to 16x16 pixels), so keep it simple. Export a copy of the image as a .png with a minimum size of 260 x 260 pixels. Then head over to the wonderful and free realfavicongenerator.net, upload your image and it will give you back a zip archive full of icons (different operating systems have different favicon requirements, so you need a few) and a few supporting files, plus some sample link code. Drop the contents of the archive into the top level directory for your site, and you're done; it should just work.
If you have adapted a third party theme for use with Tuskfish, then you will also need to include the link code in theme.html (this is already done for your in the themes that ship with Tuskfish):
<!-- Favicons --> <link rel="apple-touch-icon" sizes="180x180" href="<?php echo TFISH_URL . 'apple-touch-icon.png'; ?>"> <link rel="icon" type="image/png" sizes="32x32" href="<?php echo TFISH_URL . 'favicon-32x32.png'; ?>"> <link rel="icon" type="image/png" sizes="16x16" href="<?php echo TFISH_URL . 'favicon-16x16.png'; ?>"> <link rel="manifest" href="<?php echo TFISH_URL . 'site.webmanifest'; ?>"> <link rel="mask-icon" href="<?php echo TFISH_URL . 'safari-pinned-tab.svg'; ?>" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
If you produced a .svg version of your favicon, you can also use it as a logo on your site. The advantage of the .svg format is that it is scaleable, and will reproduce clearly at any size. Just specify the dimensions you want it to display at.
<img src="https://yoursite.com/yourlogo.svg" alt="Your alt text" width="44" height="40">
Copyright, all rights reserved.