網頁圖示的製作方式

之前在馬老師舊的部落格就有教導過網站圖示的製作方式,不過因為部落格搬新家,也再把這個教學重新講解與製作一遍,如下圖所示,許許多多的網頁都有製作網頁圖示。

網站圖示的製作方式 示意圖1

這樣的圖示我們可以利用任何的美工軟體來設計,而我是在Fireworks中製作(個人覺得比較方便),首先開一個正方形的透明圖檔(寬、高相同),大小可以自訂,底色設為透明。

網站圖示的製作方式 示意圖2

底色透明的部分是希望可以製作一個去背的網站圖示,像上面範例奇摩的圖示就有去背,維基百科則沒有,接下來就看你怎麼樣設計這個圖示囉~

網站圖示的製作方式 示意圖3

製作完成後儲存成png的格式,進入這個網站將我們的PNG圖檔轉換成ICO圖檔,進入後按下選擇檔案,找到我們剛剛所儲存的PNG圖檔,接下來就按下轉換的按鈕。

網站圖示的製作方式 示意圖4

待轉換完成後在Click here to Download的文字上面按右鍵選擇另存目標。

網站圖示的製作方式 示意圖5

接下來在想出現此圖示的網頁上,輸入以下的HTML程式碼。

<link href="favicon.ico" rel="shortcut icon" />

網頁圖示的製作方式 示意圖6

其中href代表這個圖檔的名稱和路徑,如果是整個網站的所有頁面都要有本圖示的話,那每一頁都必須要有這段語法喔!接下來預覽網頁就可以看到你所設計的網頁圖示了。

註:在網頁還沒上傳的情形之下I.E.會看不到這個圖示,大家可以用Chrome或Firefox來預覽

You may also like...

29,863 Responses

  1. LanceFen表示:

    AmOnlinePharm: amoxicillin 500mg prescription – AmOnlinePharm

  2. Link exchange is nothing else but it is simply placing the other person’s web site link
    on your page at suitable place and other person will also do same
    for you.

    My web blog; additional resources

  3. Very great post. I simply stumbled upon your blog and wanted to say that I’ve truly loved browsing your blog posts.
    After all I will be subscribing for your feed and I am hoping you write again very soon!

  4. Michaelscoob表示:

    AmOnlinePharm: amoxicillin 500 mg for sale – AmOnlinePharm

  5. LanceFen表示:

    Clom Fast Pharm: can i purchase generic clomid tablets – can you buy clomid without insurance

  6. BrianTom表示:

    can i get clomid online Clom Fast Pharm Clom Fast Pharm

  7. LanceFen表示:

    ZithPharmOnline: ZithPharmOnline – zithromax 500 price

  8. Jariorpkk表示:

    Где купить диплом специалиста?
    Мы предлагаемвыгодно и быстро приобрести диплом, который выполнен на оригинальном бланке и заверен мокрыми печатями, штампами, подписями официальных лиц. Документ способен пройти любые проверки, даже с использованием специально предназначенного оборудования. Решайте свои задачи максимально быстро с нашими дипломами. Купить диплом о высшем образовании! hitechservicesites.copiny.com/question/details/id/1068477

  9. BrianTom表示:

    AmOnlinePharm AmOnlinePharm amoxicillin 200 mg tablet

  10. Danieldrymn表示:

    ZithPharmOnline: ZithPharmOnline – how to buy zithromax online

  11. Michaelscoob表示:

    Pred Pharm Net: can i buy prednisone over the counter in usa – Pred Pharm Net

  12. Richardaudit表示:

    https://amonlinepharm.com/# AmOnlinePharm

  13. Danieldrymn表示:

    order clomid pills: how to buy generic clomid no prescription – Clom Fast Pharm

  14. Danieldrymn表示:

    ZithPharmOnline: ZithPharmOnline – ZithPharmOnline

  15. Jet ton表示:

    Готовы покорить мир онлайн-казино?
    Добро пожаловать в Jetton Casino – современное казино, где
    каждый игрок может найти широкий каталог слотов.
    казино с бесплатными играми и почувствуйте настоящий драйв!

    В чем наши преимущества?

    Лучшие игровые автоматы – игры от ведущих провайдеров.

    Выгодные акции – регулярные турниры с крупными призами.

    Мгновенные выплаты – вывод средств без скрытых комиссий.

    Доступность на всех устройствах –
    быстрая загрузка игр.
    Круглосуточная поддержка – онлайн-чат и e-mail 24/7.

    Присоединяйтесь к Jetton Casino и получите максимум
    удовольствия!

  16. vc77.photos表示:

    At this moment I am ready to do my breakfast, once having my
    breakfast coming again to read additional news.

  17. Sazrbzm表示:

    Приобретение документа о высшем образовании через проверенную и надежную компанию дарит множество преимуществ. Это решение помогает сберечь время и серьезные денежные средства. Впрочем, только на этом выгода не ограничивается, достоинств гораздо больше.Мы готовы предложить дипломы психологов, юристов, экономистов и любых других профессий. Дипломы производятся на подлинных бланках государственного образца. Доступная цена сравнительно с большими расходами на обучение и проживание. Заказ диплома об образовании из российского института будет разумным шагом.
    Приобрести диплом о высшем образовании: kupitediplom.ru/kupi-diplom-texnikuma-s-zaneseniem-v-reestr-realno/

  18. Sazrdtn表示:

    Мы изготавливаем дипломы любой профессии по разумным ценам. Плюсы приобретения документов у нас
    Вы покупаете диплом в надежной и проверенной компании. Это решение позволит вам сохранить не только деньги, но и ваше драгоценное время.
    На этом преимущества не заканчиваются, их куда больше:
    • Дипломы изготавливаем на оригинальных бланках со всеми печатями;
    • Предлагаем дипломы любого ВУЗа РФ;
    • Цена в разы ниже той, которую пришлось бы заплатить на очном обучении в ВУЗе;
    • Быстрая доставка в любые регионы России.
    Приобрести диплом о высшем образовании– http://crtdu-kras.ru/communication/forum/user/277691/ – crtdu-kras.ru/communication/forum/user/277691

  19. esta usa visa表示:

    Its like you read my mind! You seem to know a lot about this, like you
    wrote the book in it or something. I think that you can do with a
    few pics to drive the message home a little bit, but instead
    of that, this is excellent blog. A great read. I’ll definitely
    be back.

  20. Richardaudit表示:

    https://amonlinepharm.com/# AmOnlinePharm

  21. Heya! I just wanted to ask if you ever have any problems
    with hackers? My last blog (wordpress) was hacked
    and I ended up losing many months of hard work due to no backup.
    Do you have any solutions to prevent hackers?

  22. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервисные центры по ремонту техники в мск
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  23. LanceFen表示:

    lisinopril 5mg pill: Lisin Express – Lisin Express

  24. Michaelscoob表示:

    Pred Pharm Net: cheap prednisone 20 mg – prednisone for sale in canada

  25. That is a very good tip especially to those fresh
    to the blogosphere. Short but very precise information… Thanks for sharing this one.

    A must read article!

  26. Michaelscoob表示:

    Clom Fast Pharm: Clom Fast Pharm – where to get clomid

  27. Sazrbdx表示:

    Студенческая жизнь прекрасна, пока не приходит время писать диплом, как это случилось со мной. Не стоит отчаиваться, ведь существуют компании, которые помогают с написанием и защитой диплома на высокие оценки!
    Сначала я искал информацию по теме: купить диплом врача с реестром, купить диплом высшее в кирове, купить диплом высшее образование нижний новгород, купить диплом о среднем образовании в уфе, купить диплом сейчас, а потом наткнулся на diplomybox.com/kupit-diplom-bakalavra-v-tveri

  28. Diplomi_blSa表示:

    купить диплом образования в новокузнецке diplomys-vsem.ru .

  29. LanceFen表示:

    where can i buy zithromax medicine: where to buy zithromax in canada – ZithPharmOnline

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。