Как сделать значок favicon и установить его. Часть 2

Как сделать значок favicon и установить его. Часть 2.

favicon

 

В предыдущей статье я познакомил вас с преимуществами наличия значка favicon на сайте. Если вы не читали статью, и вы не знаете,что такое значок favicon и почему он должен быть на странице,обязательно прочитайте. Если вы решили сделать значок для веб-сайта или блога, в этой статье я покажу вам, как сделать значок с двумя способами и как добавить значок на веб-сайт.

Как создать значок Favicon?

Придумайте свой значок.

В начале подумайте, что включить в свой значок? Это, наверное самое трудное, что придумать. Почему это так сложно? Потому что я напоминаю вам, что размерfavicon 16 × 16 px. В этот размер чрезвычайно трудно, что то вложить.

Что может отображать ваш значок?favicon

Ваш значок может отображать логотип вашего сайта. Однако, если ваш логотип слишком сложный, он может выглядеть непривлекательным, так как размером значка 16×16 пикселей. Я видел значки, изображающие фотографию автора блога, однако он также выглядит не интересным, потому что лицо практически не видно.
Лучший способ создать значок, например с инициалами, если вы запустили блог под своим именем, первую букву названия компании или какой-либо другой дизайн.

Расширение favicon .ico, .jpg, .png

Ваш значок может быть в виде файла изображения с расширением

  • .jpg,
  • .png,
  • .gif
  • ICO

Наиболее популярным расширением является, конечно .ico, так как этот формат поддерживается всеми браузерами, то есть наш значок будет отображаться читателю, который использует mozilla, opera, safari, IE и т. д.

favicon

 

Два способа сделать значок.

1 способ создания значка.

Самый простой способ — использовать онлайн-генераторы, чтобы помочь вамсоздать значок. Есть десятки генераторов, доступных в Интернете, которые мы можем использовать бесплатно. Что нам нужно сделать длясоздания значка? Нарисуйте картинку.
Я рекомендую два веб-сайта, которые помогают намделать значки:

http://www.favicon.cc/
http://www.degraeve.com/favicon/

Оба генератора сразусоздадут ваш значок с расширением .ico, поэтому вам не придется беспокоиться о преобразовании изображения в этот формат.

2 способ для создания значка.

Чтобысделать значок,вам нужно подготовить изображение, вы можете использовать графические программы, такие как gimp, photoshop и д.р. Если вы не хотите использовать эти программах, я рекомендую веб-сайт http://pixlr.com/editor/

Этим способом, вы не сможете сделать значок с расширением .ico. Если вы используете Photoshop для создания значков, вы можете загрузить бесплатный плагин для этой программы, благодаря чему вы можете сделать значок .ico.Плагин Photoshop .ico

Разархивируйте пакет .zip и файл «ICOFormat.8BI» в каталоге insFile в папке Adobe Photoshop, где установлен ваш фотошоп.

Как конвертировать в .ico

Если высоздали свой значокс расширением .jpg, .png, .gif, вы можете использовать онлайн-генераторы бесплатно, чтобы конвертироватьв .ico

 

Как добавить значок на веб-сайт.

У вас уже есть свой значок, и теперь настало время добавить его на ваш сайт.

Загрузите значок в корневой каталог вашего сайта.
А затем в коде страницы вам нужно найти раздел<head> и поместить в него код перед закрытием этого тега, т. е.</ head>

<link href=””favicon.ico”” rel=””shortcut” type=””image/vnd.microsoft.icon”” data-mce-href=””favicon.ico”” />

Раньше использовался тип «image / x-icon», а «image / vnd.microsoft.icon» — более свежая версия.

Как добавить значок в блог WordPress.

Мы можем сделать так же, что и в случае с веб-сайтом, то есть вручную добавить код в код страницы , только код будет выглядеть несколько иначе, а именно:

<Link rel="shortcut icon" typ="image/x-icon" href="<bloginfo php (‚wpurl’);?>/favicon.ico">

Естественно, этот код размещаете в разделе <head> в файле header.php директории /wp-content/themes/ваша_тема/).
Не забудьте загрузить иконку на сервер.

Два плагина WordPress для добавления значка Favicon в ваш блог.

В случае с блогом WordPress вы можете использовать плагины, которые автоматически добавят ваш значок в блог и вам не надо ковыряться в коде страницы.
Рекомендуется использовать плагинAll In one Favicon, все, что вам нужно сделать, это установить плагин в свой блог, включить его, а затем загрузить ваш файл значка.

Второй плагин wordPress, который я могу вам порекомендовать, это MaxBlogPress. Этот плагин интересен тем, что у нас есть возможность использовать готовый значок.

 

 

 

Понравилась статья? Поделиться с друзьями:
Комментариев: 1
  1. Евгений

    Полезная информация для начинающих веб-мастеров, в свое время намучился создавая и устанавливая фавикон на свой блог, но в окончательном итоге все получилось. А без фавикона адрес сайта смотрится невзрачно как в поисковой выдаче, так и в браузерной строке. Автор этой замечательной статьи молодец, что поделился полезной информацией со своими читателями и посетителями этого блога, хорошо, что здесь описано несколько способов установки фавикона, решать вам, каким способом лучше всего воспользоваться. Лично я предпочел обойтись без применения сторонних плагинов, дабы разгрузить сайт от дополнительной нагрузки.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: