Creative Commons License 本站文章係採用創用CC「姓名標示-非商業性-禁止改作2.5台灣版」授權條款釋出。個人轉載請注明出處,商用請來信洽談!

設計自己blog的瀏覽器網址icon圖示

設計自己的瀏覽器網址icon圖示
你有沒有發現在很多人的網站或部落格的網址前都有這個小icon,非常具有個人特色的網頁美化小圖示,現在我們也動手來做一個吧!

icon的圖示顯示在網址列前的是16×16 pixel,要做大一點也是可以,像32×32 pixel,但個人還是建議做剛剛好1:1就好,圖片格式可用 ico、png、gif、jpg 等格式均可。

Ricky個人是建議用png或png做好後轉成ico為佳,做透明背景才好看,因為png是全彩的,而不建議用gif是因為gif是256色,如果不是很會處理gif圖,容易邊緣會有鋸齒,或去背不乾淨等,當然如果你是圖像高手就例外。

做好了icon後,將它上傳至網頁空間,並將以下語法貼至網頁原始碼 <head> 與 </head> 之間,圖片名稱以favicon暫稱。

.ico語法1:

.ico語法2:

.png語法:

.gif語法:

.jpg語法:

目前測試在Firefox3、Opera9、Netscape8、Maxthon2 (IE核心)均可正常顯示,唯獨IE7一直顯示不出來,可是同樣是用IE核心的Maxthon卻可以,真怪!不知道是不是我電腦的問題,如果有人知道也麻煩跟我說一下原因,感恩!

Go~!趕快也來做一個專屬於自己的網站icon吧!

F2blog的使用者(F2cont),請將語法貼在"常規管理" > “主體欄設置"裡的 “<head>區域額外代碼" 欄位裡即可。

喜歡本文章的話~記得按個 "讚" 及 "分享" 貼文哦~
按讚記得按確定哦~分享本文或FB留言時如出現"分享連結似乎不安全"等字樣,請乎略提示!直接分享沒關係的!本站可能被惡意檢舉FB,目前正在向FB提出處置錯誤申請。

2 comments for “設計自己blog的瀏覽器網址icon圖示

  1. HHH
    2009 年 07 月 24 日 at 10:44:18

    link rel="shortcut icon
    設重複了,而且一個是空的

    • ricky
      2009 年 07 月 25 日 at 06:17:55

      小光大大
      我後台主體欄是設
      <link rel="shortcut icon" href="attachments/favicon.ico" />
      沒錯啊
      可是在前台看原始碼確是
      <link rel="icon" href="attachments/" type="image/x-icon" />
      <link rel="shortcut icon" href="attachments/" type="image/x-icon" />
      可是我怎麼改, 都不會變咧, 真是奇怪!!

      我去看了小光您的前台原始碼是
      <link rel="icon" href="./favicon.ico" type="image/x-icon" />
      <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *