Favicons

A "favicon" is an icon that identifies a website.  By default, most web agents will use whatever file is located in the webroot at "/favicon.ico".  This is then displayed in search results and on browser tabs.

You can create a simple favicon with Scalable Vector Graphics Extensible Markup Language.  Just pick your favorite color and use it to fill a small square or circle.  This is a quick and easy way to express yourself by using a personal color for a simple website favicon until you have the time to design something more unique.

Favicons displayed in the Microsoft Edge Chromium web browser for Microsoft Windows Eleven default to (sixteen squared) pixels.  If your favicon is larger than this, it will be scaled down.

You can use a plaintext editor such as Notepad Plus Plus to create SVG favicons.  Remember to save the file extension as ".svg".

In the examples below, replace "deeppink" with your favorite color.  This can be a named color such as "deeppink" or a hexadecimal color such as "#ff1493".  Remember to also update the SVG TITLE element for your website and to provide attribution to "Nicole Sharp (NicoleSharp.net)" in an XML comment if you are copying code from Nicole Sharp’s Website.  The Creative Commons Attribution-ShareAlike 4.0 International Public License also requires you to note if you made any changes from the original code.

square favicon


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16" width="16" xml:lang="en-us">
<title>deep pink square icon</title>

<rect height="16" width="16" fill="deeppink" />

<!--

© (Copyright) 2026-05-02 Nicole Sharp (NicoleSharp.net).
Nicole Sharp’s Homepage: https://www.nicolesharp.net/

Except where otherwise noted, content on Nicole Sharp’s Website is available under the Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 International Public License: https://www.creativecommons.org/licenses/by-sa/4.0/

-->

</svg>

circle favicon


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16" width="16" xml:lang="en-us">
<title>deep pink circle icon</title>

<circle cy="8" cx="8" r="8" fill="deeppink" />

<!--

© (Copyright) 2026-05-02 Nicole Sharp (NicoleSharp.net).
Nicole Sharp’s Homepage: https://www.nicolesharp.net/

Except where otherwise noted, content on Nicole Sharp’s Website is available under the Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 International Public License: https://www.creativecommons.org/licenses/by-sa/4.0/

-->

</svg>

favicon installation

You can use Inkscape to convert the SVG to a Portable Network Graphic and then use the Gnu Image Manipulation Program to convert the PNG to an ICO icon file.  Name each of these files "favicon" and place them in the webroot ("/").  Then add the following lines to your Hypertext Markup Language HEAD elements.


<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />