- WordPress 2.7 Cookbook
- Jean-Baptiste Jung
- 437字
- 2021-04-01 13:55:49
Creating and integrating a favicon
A favicon is a small icon (16 x16 pixel) associated with a web site. The favicon is displayed by modern web browsers in the address bar, tabs, and bookmarks.
Nowadays, almost all the web sites and blogs have their own favicon. The following screenshot shows a favicon displayed in Mozilla Firefox:
Getting ready
You'll need a 16 x 16 pixels image to serve as a favicon. Due to the very small display size of the favicon, the image should be very simple.
Tip
I always tend to use a background color that fits my web site color scheme, and a simplified logo.
Basically, you can use .jpg, .png, .gif, or even .mng and .apng files to display a favicon. Unfortunately, the Internet Explorer (6 and 7) recognizes only the Windows .ico file format named favicon.ico.
Therefore, if you want to have an IE-compatible favicon, you'll have to convert your image file from png, gif, or jpg to Windows .ico.
Many imaging software applications can convert an image into a Windows icon file. Personally, I use an online service called ConvertIcon (available at the link http://converticon.com/) in order to convert my png image into Windows .ico file. The ConvertIcon application will also resize your image if needed. Therefore, there's no need to worry about your image width and height.
How to do it...
- Once you have your favicon ready, upload it on your server under the directory of your choice. Personally, I prefer putting it in
wp-content/themes/mytheme/. However, the choice is yours. - Open the
header.phpfile from your theme. We now have to place a line of code to specify the location of our favicon. This line can be placed anywhere within the<head>and</head>tags. - Here's the code that we shall use in order to define an Internet Explorer compliant favicon:
<link rel="shortcut icon" type="image/x-icon" href="/path/to/your/favicon.ico" />
The preceding line of codeis the standard code to integrate a favicon on a web site. Using the.icoformat, you can make sure that your favicon will be displayed by Internet Explorer, which doesn’t happen when using the.pngversion. - If you uploaded your favicon into your
wp-content/themes/yourthemedirectory, we can use thebloginfo()function in order to automatically retrieve the template path as follows:<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" /> - If you chose to use a file format, such as
.gif,.png, or.jpg, you can add your favicon with the following code; however, Internet Explorer will not recognize it:<link rel="icon" type="image/png" href="favicon.png" />
- Once you have saved your
header.phpfile, your favicon will be displayed.
- Moodle 2.0 E/Learning Course Development
- 創意UI：Photoshop玩轉移動UI設計
- 3ds max & VRay產品造型設計經典
- Yii 1.1 Application Development Cookbook
- 穿越Photoshop CC
- 跟儲君老師學Excel極簡思維
- Adobe創意大學After Effects產品專家認證標準教材（CS6修訂版）
- 二維計算機繪圖教程：二維CAD工程師取證全程指導
- 中文版Photoshop CC平面設計從入門到精通（唯美）
- Photoshop電商設計與產品精修實戰（微視頻版）
- PostgreSQL 9.0 High Performance
- 7小時精通剪映：短視頻剪輯/調色/特效/字幕（手機版+電腦版）
- 音樂制作7天速成：Cubase編曲教程
- 企業微信公眾平臺開發實戰：再小的個體也有自己的品牌
- Web Host Manager Administration Guide