Fast-forward ten years, and it's time to create a favicon again. In the meantime, I've forgotten where to put the favicon in the HTML code; in fact, I've forgotten what it is called. A quick search on the Wayback Machine wasn't much help; the venerable internet archive didn't capture a lot of the database-generated content of my old website.
After a bit googling and poking through code on other people's web pages, I'm back in business. So, to start: it's called a favicon, short for "favorite icon". It's the little image file that appears to the left of the page's title in a browser tab, or to left of the page's title in the browser's bookmarks. Look for the "LL" to the left "Lost Learnings" in the title to see this blog's favicon.
Next, where do we put it? The html header has the favicon location. The image should be called favicon.ico, and depending where your images are located, the code will look something like this, assuming our images are loading in the the images directory:
<head> <!-- Other head tags --> <link href="images/favicon.ico" type="image/ico" rel="shortcut icon" /> </head>Where do we get a favicon? If we're working on a corporate website, there's usually a corporate favicon that we use. Browsing the HTML header of our corporate pages with Firebug or Chrome's developer tools will quickly reveal the location of the corporate favicon.
If we're working on our personal website, then we can use an image editing program like GIMP to create a favicon. GIMP is a very powerful image editor with lots of features. If you use GIMP to create a favicon, there are a couple of things to keep in mind. First, the favicon.ico file should be small and square. I have found that 32x32 pixels works well; it's small, but has enough detail to avoid ragged edges. Second, before we save our image, we need to flatten it so that the image does not have multiple layers. Finally, export the file as favicon.ico. This is the required name, and GIMP will convert the file during the export process.
I would like to add a favicon to my pages on Oracle's APEX demo site, so let's see how we would do this in APEX. First, we need to upload the favicon.ico image file:
- From Shared Components, click on Images link under Files
- Next, click on the Create button
- Select No Application Associated to make the image available to all applications within the workspace, or select a specific application ID.
- Use the Browse button to find the favicon.ico on your computer
- Click the Upload button
<link href="#APP_IMAGES#favicon.ico" rel="shortcut icon" type="image/ico" /> <link href="#WORKSPACE_IMAGES#favicon.ico" rel="shortcut icon" type="image/ico" />Finally, let's add the favicon to our blog on blogspot.com. From the blog's main page, click on the Layout link. In the upper left corner of the layout, find the region labeled Favicon. Click the Edit link, upload the favicon.ico file using the Browse button, then click the Save button.
Now we're ready to view our pages with their favicons. If the favicon does not appear, clear the browser's cache or use shift-refresh to see the favicon.
No comments:
Post a Comment