Blogger Favicon 如何讓部落格有瀏覽器書籤和網址列專屬圖示？

作者：
favicon-16
什麼是Favicon？用最簡單的話來說，就是指那個出現在瀏覽器「網址列」開頭，出現在瀏覽器「書籤／我的最愛」裡收藏的網站項目前的那個「小圖示」，如果你仔細看，就會發現其實有很多網站都擁有它們專屬的圖示，這讓訪客可以更容易的一眼就辨認出想去的網站，讓網站顯得更有個性。

而以部落格來說，使用WordPress等工具獨立架站、擁有自己空間的部落格當然可以輕鬆加上自己的網站專屬圖示，但如果你是依附在「部落格平台服務」下，那你就會發現Favicon顯示的是平台服務的圖標（例如所有無名小站部落格顯示的都是一個綠色的「無」）；只有極少數的平台服務開放用戶去編輯HTML版面，並讓用戶可以透過修改HTML，來連結使用自己的Favicon，例如電腦玩物所依附的Blogger平台。

但是昨天忽然發現電腦玩物的Favicon失效了，不管用哪種瀏覽器來看都只有顯示出Blogger原始的官方橘色圖標，我原本以為是自己圖檔上傳空間的問題，但是做了修改後還是無法顯示圖檔，於是無計可施之下，隨意調動了一下Favicon程式碼的位置，居然發現部落格專屬圖示又跑出來了。


Blogger設定好的Favicon顯示不出來？

專業的解釋我寫不出來，不過總之結果就是：如果你已經是Blogger用戶，你也早就自己設定好Favicon，但是原本顯示得好好的，現在卻顯示不出來的話，那麼你只要把Favicon的程式碼調動到下面這段程式碼後面，以及</head>之前的某個位置上即可（最好直接放在</head>之前)：
<b:include data='blog' name='all-head-content'/>
不要問我為什麼，因為這只是我實際測試出來的結果而已^^。
不過我想應該也有一些Blogger用戶還沒有自己設定過Favicon，有時候也有一些訪客來詢問我怎麼讓網址列可以出現自己部落格的專屬圖示。所以我想我也趁著這個機會，從頭介紹一遍電腦玩物專屬Favicon的製作流程。

一格一格刻出自己的專屬圖標：

Favicon通常是使用「16X16」大小的圖示，格式為「ico」（Firefox等瀏覽器則另外支援gif、png的顯示）。為了要在這麼小的圖案中要讓訪客看清楚你想表達的內容，所以通常Favicon的圖案都是很簡潔單純的，你常常會看到的是使用網站具有代表性的字或字母。

而「Favicon.cc」這個網站，就是提供了一個16格乘以16格的編輯區塊，讓你自己選擇顏色，一格格的把想要的圖案刻出來。它的下方也提供了一個即時預覽的模擬畫面，讓你隨時可以知道目前圖案在瀏覽器網址列看起來會是什麼樣子。

favicon-01

點選16X16方格下方的「Use Animation」，可以設計動畫圖標。使用「Append New Frame」來新增一張圖示，你可以新增2張、3張到任何你想要的數量，然後就像畫動態卡通一樣，透過輪播這些不同圖片產生動畫效果的圖示檔。

這種方法可以設計出很多變化，但有點麻煩，電腦玩物網址上的靜態圖示雖然是使用Favicon.cc設計的，不過動態圖示則是用下面介紹的另外一個網站直接製作（什麼！你說你看不到電腦玩物的動態圖示？那就換成Firefox核心的瀏覽器看看吧^^）。
favicon-03

在Favicon.cc你可以不需要註冊、登入，就能使用所有的圖標設計功能，最後按下網頁下方的「Download Favicon」就可以把圖示（favicon.ico）下載回來囉！
favicon-02

簡單兩步驟製作動畫圖示：

「FavIcom from Pics」則不是讓你自己設計圖標，而是幫你把已經存在的圖片變成icon圖示，你不僅不需要註冊登入，甚至只需要一個上傳的步驟即可。

進入網站後，你可以在中間看到一個上傳來源圖檔（Source Image）的欄位，按下﹝瀏覽﹞從本機硬碟中加入一張圖片，可以是各種大小格式的相片圖檔（jpg、png等等），然後按下〔Generate Favicom.ico〕，網站就會把圖片轉檔成適合當作Favicon的大小（16X16）與格式（*.ico）。

或者你想製作動態的Favicon，那麼就記得先勾選「Animate Favicon」即可。
favicon-04

等待一小段時間，Favicon就會製作完成了。這時候你可以按下〔Download Favicon〕來下載製作好的Favicon圖檔。
favicon-05

下載後的檔案是個壓縮檔，解壓縮後，你可以在目錄裡面找到一個靜態Favicon（*.ico），和一個動態的Favicon（*.gif）。

這個網站所製作的動態圖示都是單一畫面上下捲動的模式，雖然很單調，但因為操作很簡單，又能達到動態的效果，所以也是頗值得一試。
favicon-06

將圖示檔案上傳到可外連空間：

透過前面兩個服務，我們已經製作出了符合規格的Favicon圖檔（16X16的ico和gif），而如果你想在Blogger使用它，就必須先將圖檔上傳到一個可以外連的空間（可外連，才能讓你把圖檔連到自己的部落格使用），當然，這個空間必須支援外連時顯示ico和gif，而且提供的外連網址結尾也是ico、gif檔案名稱。

符合這些要求的「免費」空間服務裡，微軟的「SkyDrive」是很值得推薦的一個選擇。來到SkyDrive，按下﹝開始使用﹞。
favicon-07

申請註冊一個新的空間帳戶，或者使用你的MSN帳號直接登入，你就可以擁有5GB的免費網路空間。
favicon-08

進入你的個人SkyDrive頁面後，你會在下方看到一個「公開資料夾」，表示放在這裡面的圖檔都是可以公開被其他人連結看到的。你可以在這個公開資料夾底下建立一個新的資料夾來專門存放部落格需要的圖檔。
favicon-09

進入其中一個公開的資料夾中，選擇上方工具列的「新增檔案」來上傳你的Favicon圖檔，我這邊分別上傳了剛剛製作的靜態ico檔案，和動態gif檔案。
favicon-10

上傳好需要的圖檔後，如何在SkyDrive裡面獲得可以外連的圖片網址呢？首先點擊某個圖檔，接著點擊上方工具列的「開啟」。
favicon-11

這時候就可以獲得該圖檔的獨立顯示網址，例如：「http://....livefilestore.com/........./favicon.ico」。把這段網址先複製下來，等等要設定到Blogger的後台中。
favicon-12

在Blogger後台設定Favicon：

前面我們已經完成了圖檔設計、圖檔上傳，並且獲得了圖檔的連結位置，那麼接下來我們就是要把Favicon的圖檔連結加入到部落格後台中，讓你的部落格開啟時能夠被瀏覽器偵測到Favicon。

以Blogger為例，進入〔版面配置〕－〔修改HTML〕，我們可以在這裡自訂版面內容，包括加入Favicon的連結。不過在進行任何HTML的修改前，記得先「下載完整範本」，把你目前的範本備份下來，以後修改時不小心發生錯誤，才可以透過重新上傳來還原。
favicon-13

接著就是最後的步驟了，我們必須把Favicon的圖檔連結加入HTML當中，加入的語法如下：
<link href='剛剛獲得的ico圖檔連結' rel='shortcut icon' type='image/x-icon'/ >
<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>
以電腦玩物使用的Favicon為例，就會寫成這樣：
<link href='http://ki6xfa.blu.livefilestore.com/y1pCUPmfVpzKvuusmZL6f-oxV17ai-K-HGGBZ2oT0MdQPpgbW_RAgpgcUb9k8WmOvec139CAyYAwn8/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://ki6xfa.blu.livefilestore.com/y1pwcZjamU1G8HTc1oGGnssEoPE0mA0WOMl1OOhsVR2xZDRqWg6mvzLsHoK6dvWuBAIAOmo0xA_Ch8/favicon.gif' rel='icon' type='image/gif'/>
把上面兩段語法加入到HTML範本內容裡的<b:include data='blog' name='all-head-content'/>之後，</head>之前（最好直接放在</head>之前)。

附註：原本是加在範本內容的<head>和</head>之間就可以，但是從昨天開始（2008/10/23）在Blogger中如果favicon程式碼跑到<b:include data='blog' name='all-head-content'/>之前，在瀏覽器中就顯示不出你的Favicon。
favicon-15

讓我們進一步解釋兩段語法的功能：
<link href='剛剛獲得的ico圖檔連結' rel='shortcut icon' type='image/x-icon'/>
<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>
假設你只想要使用靜態的ico圖檔，那麼只要加入第一行<link href='剛剛獲得的ico圖檔連結' rel='shortcut icon'/>這段程式碼就可以了，這樣你的部落格在所有的瀏覽器中都可以顯示出Faviocn。記得圖示檔案的格式必須是「ico」，這樣使用IE的用戶才能看到你網站的圖示。

而如果你想使用動態的gif圖標，那麼就還要再多增加第二行<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>這段程式碼，這樣Firefox瀏覽器就能讀取到Gif動態檔案，能夠在網址列、書籤當中看到動態的圖示，不過並非所有瀏覽器都支援顯示Gif檔的Favicon，所以記得先添加第一行的程式碼。

完成上述動作後，儲存你修改過的範本，重新開啟瀏覽器來讀取你的部落格，就可以看到網址列、書籤上出現網站的專屬圖示囉！
文章分類：
電腦玩物站長 Esor （異塵行者），在電腦玩物上的文章有別於單純的軟體和服務介紹，而是更強調軟體和服務背後的數位工作思維及方法，並說明實際應用後帶來的生活改變。著有《電腦玩物站長的筆記思考術》、《大腦減壓的子彈筆記術：用Evernote打造快狠準系統》、《比別人快一步的Google工作術：從職場到人生的100個聰明改造提案》等暢銷書籍。

留言

  1. OldNick2008年10月25日 凌晨3:24

    終於復原了
    真是感謝大大
    b:include data='blog' name='all-head-content'/>
    話說這是什麼
    原本沒有嗎?

    回覆刪除
  2. Esor Huang2008年10月25日 清晨6:32

    哈哈，啊不是說不要問我嗎XD

    不過歡迎知道真正原因的朋友回答喔^^

    回覆刪除
  3. 匿名2008年10月25日 上午9:28

    https://addons.mozilla.org/en-US/firefox/addon/6988

    回覆刪除
  4. 萬先生2008年10月25日 上午11:56

    謝啦！大大 泣…

    回覆刪除
  5. 匿名2008年10月25日 中午12:59

    http://Angus-syu.spaces.live.com/

    歡迎撥冗關覽、留言與闡揚！

    回覆刪除
  6. 匿名2008年10月25日 晚上11:31

    http://blog.soft.idv.tw/?p=394

    回覆刪除
  7. 羽空2008年10月26日 下午1:22

    成功了~
    謝謝行者讓我學到一項知識
    http://windicevista.blog124.fc2.com/

    回覆刪除
  8. 就是愛ㄌㄚˇ噗2008年10月27日 下午2:03

    請問一下要怎麼讓我做的動畫態圖示一直動呢？

    我的圖示只動一輪就停在最後一個字了…有什麼辦法可以讓他一下重複？

    http://twins221.blogspot.com/

    回覆刪除
  9. Esor Huang2008年10月27日 下午2:37

    用Faviocn.cc製作圖標時，
    選擇持續播放的動畫效果

    回覆刪除
  10. Kent2008年11月4日 凌晨2:46

    感謝大大分享，受教了！

    http://navalley.blogspot.com/

    回覆刪除
  11. Xavier2009年1月20日 凌晨2:42

    請問一下我使用後，只有首頁看的到圖示，進入文章或別的頁面後又變回橘色大B，不知道問題在哪...

    回覆刪除
  12. Esor Huang2009年1月20日 上午8:59

    建議把icon語法直接放在 /head 之前

    另外會不會是你的Blogger hack或版型有影響？

    回覆刪除
  13. Xavier2009年1月21日 凌晨12:26

    我也不太清楚，我在測試看看囉，感謝解答

    回覆刪除
  14. willers2009年1月22日 下午6:25

    你好 我按照你的方法
    在FF上顯示OK
    但IE上就不行了耶
    （但是電腦玩物在IE上也是正常顯示）

    還要什麼設定嗎

    回覆刪除
  15. Kevin Fu2009年4月7日 上午11:41

    因為在 <b:include data='blog' name='all-head-content'/> 裡包含 Blogger 預設的圖示，如果你的圖示設定放在此標籤前面，就會被預設值蓋掉囉…
    所以放在 </head> 前面是最保險的做法。

    回覆刪除
  16. Esor Huang2009年4月7日 中午12:38

    嗯嗯 感謝你的回饋

    回覆刪除
  17. J.A.C.Q2009年7月26日 凌晨4:08

    請問一下 要如何把 blogger share 上 facebook 啊 ?

    回覆刪除
  18. Philips Shiu2009年8月18日 晚上10:03

    太感謝了~很有用

    回覆刪除
  19. Esor Huang2009年8月19日 中午12:34

    很高興對你有幫助

    回覆刪除
  20. 一次元の非Z2009年9月19日 晚上7:45

    在下按照足下的方式設定，在IE和FF上顯示得出來，但在Chrome上就回復預設圖標了。而敝人看見閣下的圖標於Chrome上仍健在，可否傳授箇中密技呢？讓陛下百忙抽空、猥自枉屈，特先道歉。

    回覆刪除
  21. Esor Huang2009年9月21日 下午5:12

    我的設定方法就和我文章裡面寫的一樣阿^^

    回覆刪除
  22. dai2009年9月24日 清晨7:38

    您好，我跟22樓有一樣的問題，真的不知道除了favicon語法之外是否還有其它地方造成它無法顯示，真苦惱><

    回覆刪除
  23. ChaoRC2010年2月12日 中午12:47

    異塵行者你好:
    之前我依照你的方式貼入語法
    但是只有在 IE 會成功顯示
    在 Google 瀏覽器會不成功
    後來我參考其他文章後
    發現要將這個語法貼在不同的地方
    就會成功

    我有自己寫了一篇說明
    希望可以提供給你還有其他跟我有同樣問題的人參考
    謝謝!
    http://chiuchaorong-note.blogspot.com/2010/02/blogger.html

    回覆刪除
  24. 融阿融2010年2月27日 凌晨12:17

    更正連結
    http://chiuchaorong-tech.blogspot.com/2010/02/blogger.html

    回覆刪除
  25. Esor Huang2010年3月2日 中午12:23

    感謝您的回饋

    我之前也已經有在文章裡註明，
    最好直接就放在最後的 /head 之前即可

    回覆刪除
  26. Kaylin Life2010年5月3日 下午3:39

    寫滴相當詳細~真棒ㄚ你

    回覆刪除
  27. Rloby2010年7月7日 凌晨1:30

    感謝，修改好囉！果然這是一個長知識的地方~

    回覆刪除
  28. 無聊的人2010年12月10日 晚上8:36

    感謝 有用

    回覆刪除
  29. Unknown2011年5月25日 晚上8:54

    感謝異塵大！我照著步驟完成了^^
    而且我發現一個線上的Base64轉換器，可以將小圖片編碼成純文字嵌入Blog 的HTML ，進而加速網頁載入時間！
    語法大致相同，只需將免空連結替換成圖檔編碼即可，如下：

    <(留言不准有標籤)link href="data:image/x-icon;base64,{favicon的Base64編碼}" rel="icon" type="image/x-icon" />

    Base64 online encoder/decoder :
    http://www.motobit.com/util/base64-decoder-encoder.asp

    回覆刪除
  30. Esor Huang2011年5月26日 清晨7:11

    感謝分享

    來研究看看

    回覆刪除
  31. QQBoxy2011年6月10日 凌晨1:50

    今天Blogspot祭出後台直接設定啦XD

    回覆刪除
  32. Esor Huang2011年6月10日 清晨5:08

    是的，我昨天有寫一篇新文章介紹

    http://playpcesor.blogspot.com/2011/06/google-blogger-27favicon.html

    回覆刪除
  33. Shane Lee2011年6月28日 晚上7:39

    skydrive是不是更新了變得好奇怪@@?
    不知道要怎麼取得檔案網址了....

    回覆刪除
  34. 小山2013年7月3日 中午12:47

    我要貼入的程式碼：
    link href='https://skydrive.live.com/#!/?qt=mru!cid=5E23A99072D356B6&id=5E23A99072D356B6%21232/favicon.ico' rel='shortcut icon' type='image/x-icon'/ >
    但blogger一直出現下面的訊息，所以一直無法存檔耶...
    剖析 XML 時發生錯誤 (第 667 行，第 73 欄)：The reference to entity "id" must end with the ';' delimiter.

    回覆刪除
  35. Rosymaryjane2013年9月16日 下午3:52

    顯示不出小圖的狀況，找原因找了好久，終於設定成功了，謝謝你的詳細教學~~

    回覆刪除
  36. Charlie2020年3月29日 上午9:56

    skydrive現在是onedrive

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多，開始測試「留言管理」機制，讓我可以更容易回應讀者留言，並更簡單過濾掉廣告，但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用？立可得與 ibon教學+比較表

作者：
圖片
現在大家照片都儲存在數位手機、相機、硬碟或雲端，數位欣賞與分享很方便。但有時候就是需要拿到「實際照片」，例如： 小朋友學校的勞作作業 想要製作家庭相框 用照片來當小禮物 把照片貼在紙本手帳上 這時候，有什麼方法可以快速把數位照片「洗」成實體照片？而且最好能不花時間、立即拿到、價格也不貴呢？ 如果家裡沒有印表機（或是沒有好的印表機），又不想跑照相館，那麼這時候 「便利商店」同樣也提供了印照片的服務 ，而且價格不貴，可以立即拿到，操作流程也十分簡單。 之前我在電腦玩物分享過：「 不需買印表機也免隨身碟， 7-11 全家雲端列印超方便教學 」。這篇文章則從印照片出發： 同樣的不需買印表機、不需隨身碟，就能快速印出高品質的照片成品。
........................繼續閱讀全文內容

Google Maps 我的地圖完全教學！規劃自助旅行攻略

作者：
圖片
在之前寫完「 善用 Google 航班搜尋找出理想便宜機票的 10 個技巧 」一文後，我想繼續挖掘 Google 幫我們規劃自助旅行的潛力。 今天這篇文章，就深入的來聊聊 Google 的「我的地圖」服務，這是一個可以讓我們「自訂地圖」的工具 ，在地圖上任意繪製地標、路線，對商務需求來說可以打造出一張一張資料地圖（例如我之前在製作一本新書時建立的「 台灣推薦空拍地點地圖 」），對生活需求來說，則可以讓我們規劃自助旅行路線！ Google 「我的地圖」在規劃自助旅行路線時可以解決許多問題： 國外地點名稱地址常常難懂，用自訂地圖就能自己取一個好辨識的名稱。 在規劃路線之外，自訂地圖還能補充許多旅遊圖文資料，讓這張地圖就是旅遊手冊。 好看的自訂地圖一方面旅行時帶來好心情，二方面事後就是最好的旅遊回憶之一。 自訂地圖還能跟朋友共享合作，讓彼此都能在手機上查看這次旅行地圖。
........................繼續閱讀全文內容

Slack 完整教學與上手心得：找到正確的團隊溝通之道

作者：
圖片
你聽過或用過 Slack 嗎？過去一年， Slack 這一個團隊通訊平台服務不僅在國外爆紅，在台灣我也看過好幾個創業團隊使用 Slack 來做公司內部的訊息管理，到底 Slack 有什麼魅力？它是不是比起 LINE 或 Facebook 或 Email 更能有效率的管理團隊溝通呢？我自己今年也有機會在一個專案合作中使用了 Slack 一段時間，我覺得它吸引人之處有三點： 1. 「 很有趣 」： Slack 裡擁有跟 LINE 或 Facebook 一樣易於讓公司同事聊天打屁、傳送有趣影音圖文的功能。 2. 「 有效率 」：但是 Slack 的頻道、群組機制讓茶水間的聊天，不會干擾工作的討論，並且星號與釘選功能讓每個同事可以從聊天中記錄重點。 3. 「 有彈性 」： Slack 的架構可以讓每一個團隊設計出符合自己需求的通訊平台， Slack 的軟體則讓同事可以在任何地方和公司保持聯繫。 如果你需要中文版的同類平台，可以參考： JANDI 高效率團隊通訊平台完整教學，比 Slack 更適合中文用戶 。 2017/3 新增 ： Sortd for Slack： 改造 Slack 討論串介面變成專案任務排程看板
........................繼續閱讀全文內容

Google NotebookLM 免費中文 AI 筆記實例教學，老師、學生、創作者利器

作者：
圖片
Google NotebookLM 是一個以 AI 筆記本為概念的線上生成式 AI 問答工具。和 ChatGPT 、 Copilot 不同的是， Google NotebookLM 「相對」不會憑空生成內容，也不是上網找答案，而是結合文件資料庫 AI 分析功能（透過  Gemini Pro  分析我們的知識庫），幫助我們根據自己上傳的大量筆記、文件，生成有明確引用的論文摘要、報告企劃、文章大綱。 相較之下很適合自己已經有足夠資料，只是需要 AI 協助分析與輸出的人，例如老師規畫課程、學生製作報告、研究者撰寫論文、創作者撰寫草稿來使用。
........................繼續閱讀全文內容

畫張圖說得更清楚！ Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

作者：
圖片
今天要跟大家介紹一個很有意思，也可能對老師、創作者、常做簡報的職場工作者很有幫助的 AI 工具：「 Napkin （餐巾紙）」，這是一個 AI 會根據我們提供的文字，創作手繪圖表、圖解、圖說的線上工具。 為什麼叫做 Napkin（餐巾紙）？如果你看過可以說是簡報經典著作的《簡報 Show and tell》、《餐巾紙的背後》作者丹‧羅姆（Dan Roam）系列書籍，你應該就能心領神會。
........................繼續閱讀全文內容

Google 表單自動關閉回覆教學：時間人數到達就過期

作者：
圖片
Google 表單，是 Google 雲端硬碟裡用來製作線上問卷調查的免費工具。 愈來愈強大、愈來愈漂亮的 Google 表單，可是設計出各式各樣擁有專業問題、滿足特殊調查需求的精美問卷，如果你還不知道怎麼活用他的基本功能，那麼一定要參考下面三篇我在電腦玩物中所寫的一系列教學，從基本功能到隱藏功能，會帶你上手這個好用的工具： 設計問卷調查快速免費，新版線上 Google form 表單教學 不再只有醜醜範本！如何幫 Google 表單美化背景外觀？ Google 表單的 10 個專業問券調查設計秘密教學  也因為寫了一系列實用的 Google 表單教學，所以很多朋友來問我： Google 表單還能不能滿足某某個需求？ 而其中被詢問度最高的就是：「 可不可以讓 Google 表單 自動關閉回覆 ？時間過期了問卷就關閉，填寫人數到達限額了就自動停止。 」如果可以做到，那麼 Google 表單甚至可以用在報名表、抽獎表之類的應用了。好消息是，這個問題有解了，今天開始 Google 表單可以做到限期、限額自動關閉回覆的功能囉！ 2017/8/31 新增 ： 自動移除額滿選項！ Google 表單報名購物限制數量最簡單教學
........................繼續閱讀全文內容

為什麼大家愛用 Trello ？最佳整理教學讓事情井然有序

作者：
圖片
這幾年看到身邊許多的創業團隊、學校社團、辦公室裡的部門，或是個人在需要專案管理、生活管理時，選擇了一個叫做「 Trello 」的雲端服務，這到底是一個什麼樣的管理工具，讓這麼多人都愛用 Trello ？在電腦玩物上，我也從旁敲側擊的角度，寫過幾篇「 Trello 概念」的管理教學文章： 把 Evernote 當作 Trello！ Kanbanote 筆記看板管理法 Google Drive 變身 Trello ！幫雲端硬碟建立專案看板 但是，我自己也一直使用著 Trello ，卻還沒有在電腦玩物上寫過一篇完整的介紹！雖然錯過了幾年前第一時間推薦 Trello 的時機，但在這段時間的使用經驗下，剛好可以讓我整理沉澱自己的使用方法，歸納出「 為什麼值得試試看 Trello 的關鍵特色 」，然後轉化成這篇文章深入淺出的 Trello 上手教學。 2015/6/13 新增： 免費專案管理軟體推薦！困難計畫簡單管理 13 種工具 2016 年新增 ： 如何將 Trello 切換到繁體中文版？網頁 App 全中文化 2016/7/7 新增 ： 如何活用 Trello 記帳？我的理財計畫心得與看板範本 2016/7/13 新增： 如何將網頁資料快速剪貼到 Trello？收集專案資料技巧 2016/8 新增： Trello 開放「強化功能」讓免費用戶串聯 Evernote 等雲端服務 2016/8 新增 ： Trello 卡片自訂欄位密技！最想要的強大 Trello 客製化範例教學 2016/11 新增： [時間技客-7] 重要緊急時間管理四象限在 Trello 活用與範本下載 2017/2 新增 ： Trello 團隊如何使用 Trello？ 8個專案排程協作重點技巧 2017/6 新增： 如何用 Trello 規劃自助旅行？我的 Trello 行程計畫使用技巧教學 2017/7 新增： 如何讓 Trello 列表與卡片不再落落長？專案管理的5個關鍵技巧 2017/8/23 新增 ： 如何用 Trello 做子彈筆記？我的 Trello GTD 方法範例看板分享
........................繼續閱讀全文內容

Miro 遠距工作開視覺會議的免費強大白板，專案圖解實例教學

作者：
圖片
團隊一起開會討論專案規劃、產品設計， 為了把大家的想法表達得更清楚，需要將各種思考視覺化，把各種計畫圖解化。 例如用 心智圖 展開專案流程，用 系統思考法 釐清專案關鍵環節，或是畫一張 商業模式精實畫布 。 面對面開會時，我們可以在會議室的大白板上，畫出這些圖解。 但如果想要遠距工作、遠端會議，這時候，就可以利用「線上協同合作的白板工具」 。這類遠距視覺會議的工具其實也不少，我之前介紹過的簡單版工具就有： Witeboard 世界上最簡單快速的協同合作白板，開會上課利器 Awwapp 觸控靈敏線上共用白板，免註冊電腦平板手機立即可用 但說到功能強大，可以滿足各種視覺會議的圖解需求，就不能不提到： 「 Miro 」這個線上視覺圖解白板工具。
........................繼續閱讀全文內容

最簡單養成習慣方法是「解決問題」，不靠時間表、獎懲與意志力

作者：
圖片
要持之以恆並非一件容易的事，先不說長時間的堅持往往強人所難，光是要每天重複一樣的行動、相同的規律，難道不會覺得膩？這時候一旦新鮮感淡去，剛好遇到其他事物的干擾，或者自己偶爾處在懶洋洋不想動的低潮中，那麼這件事情就很容易開始拖延下去，而想要養成的習慣也往往中斷了。
........................繼續閱讀全文內容

Excalidraw 免費 AI 生成流程圖，一鍵畫出知識圖表、專案流程、寫作大綱

作者：
圖片
用一句話簡單提示主題，就能透過 AI 生成一幅流程圖。或是提供基本的想法大綱，一鍵請 AI 畫出可接續修改的流程圖草稿。於是「老師」可以快速生成教學用的 知識圖表 ，「軟體工程師」快速畫出 技術開發架構圖 、「管理者」獲得 專案流程圖 與 商業決策分析圖 、「行銷人員」製作 活動企劃流程表 、「創作者」也能立即獲得視覺化的 寫作大綱 或 故事線草稿 。上述的應用情境，在 「 Excalidraw 」 這款線上流程圖工具中已經可以實現，他加入了「Text to diagram 」AI 功能，幫助我們透過簡單文字，快速生成複雜的流程圖表，生成草圖後還可繼續手動修改。
........................繼續閱讀全文內容