Создание сайта на WordPress — что может быть проще!
Как сделать фавикон
Рубрика: Все для вебмастера

Как сделать фавикон (favicon) иконку для сайта

21 комментарий   

Всем привет друзья! Тем кто еще меня не знает, меня зовут Владимир Савельев и сегодня я хотел бы поговорить о том, как сделать фавикон для сайта.

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

Кстати, у Вас есть мобильная версия сайта? Как нет?! Быстрее читайте мою подробнейшую статью — Адаптивная верстка!

Что такое favicon?

Фавикон — это миниатюрная иконка, которая отображается в левом верхнем углу вашего сайта. Вот как выглядит он на моем блоге.
Кроме того, она будет отображаться и возле вашего сайта в результатах поисковой выдачи.

Фавикон придаст вашему сайту оригинальность и поможет пользователям сразу его находить в результатах поиска. Большинство людей редко обращают внимание на название сайта, но вот иконку они очень хорошо запоминают. В следствии этого — это дополнительный приток трафика...

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

Какие преимущества дает наличие фавикона?

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

И вот настало долгожданное время, человек надумал опять посетить ваш интернет-ресурс. Однако, если у него много закладок, он может не сразу его отыскать, а то и вовсе не найти среди других. В этом случае favicon.iso будет как нельзя кстати.

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

Давайте разберемся, как сделать фавикон иконку для сайта?

Скачать фавикон можно также на сайте www.favicon.cc. Перейдите по ссылке на сайт. Пролистайте предложенный ТОП фавиконов. Картинка может быть как анимированной, так и обычной. Если нашли что то по душе, скачайте к себе на компьютер. После чего перенесите картинку в корень своего сайта.

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

В принципе, вы можете задействовать любую картинку, уменьшенную до размера 16×16 или 32×32 пикселей. Главное, чтобы качество изображения не пострадало. После чего ее нужно сохранить в формате PNG или ISO.

Практически все браузеры отображают изображения в этом формате. Единственным, кто не поддерживает формат PNG, являются Internet Explorer, а точнее — старые его версии. Сейчас конечно редко кто из пользователей использует этот браузер, так как по функционалу и быстродействию он намного хуже своих собратьев.

Но если на ваш блог заходят с Internet Explorer, то сохраните изображение в формате ICO. Сделать это можно на этом сайте.
Так же есть еще один замечательный сервис позволяющий нарисовать свою уникальную иконку, переходим сюда — www.michurin.net
Если же, у Вас есть готовая интересная картинка, из которой Вы хотите сделать фавиконку, то этот сервис вам в помощь http://favicon.ru/ru.

Дополнительные On-line сервисы и генераторы:

Специально для Вас я отобрал лучшие коллекции и генераторы фавиконов — рисуйте или скачайте готовые, выбор за вами:
[sociallocker]

  • www.favicon.by
  • http://shaheeilyas.com/favicon/
  • http://www.degraeve.com/favicon/
  • http://genfavicon.com/
  • http://pr-cy.ru/favicon/
  • www.thefavicongallery.com
  • www.iconj.com/favicon-gallery-page1.html
  • www.favicon.co.uk/gallery.php
  • www.favicon-generator.org/gallery/

[/sociallocker]

Установка на сайт:

Чтобы установить иконку фавикон необходимо залить ее на хостинг в директорию сайта и прописать следующий мета-тег в head:

<link rel="shortcut icon" href="путь до файла иконки" type="image/x-icon">

Например посмотрите как прописан этот тег у меня:
Весь процесс установки довольно простой, я думаю у Вас все получится ;)

ТОП-3 Плагина фавикон для WordPress:

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

  1. Heroic Favicon Generator
  2. All In One Favicon
  3. Custom Favicon

Как видите, ничего сложного в вопросе «Как сделать фавикон» и его установке на сайт — нет! Если у вас возникнут сложности или вопросы по теме поста, то пишите их в комментариях к статье.
Я с радостью на них отвечу.


Савельев Владимир Александрович
С уважением, Владимир Савельев
Премиум курсы от webformyself

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!
Подробнее

Прочтите еще:
Обсуждение статьи: 21 комментарий
  1. Александр Приколист 2015-03-22 в 19:44 

    Кстати на favicon.cc есть тысячи готовых фавиконов, в том числе и анимированных.

    Но следует учесть что анимированные работают не во всех браузерах ( отображается только один из кадров) и это иногда смотрится не правильно.

    К примеру я находил очень красивый анимированый фавикон доллара который крутился, но в брайзерах которых анимация не работала фавикон смотрелся как зеркальное отображение бакса :grin:

    Ответить
    • Владимир Савельев 2015-03-23 в 09:26 

      Да Саш анимированные фавикон я тож не рекомендую использовать, лучше статичный и уникальный :razz:

      Ответить
      • Александр Приколист 2015-03-23 в 16:04 

        Использовать можно и смотрится необычно просто нужно посмотреть как он будет выглядеть в тех браузерах где анимация не будет работать ( т.е. будет отображаться просто картинка одного из кадров)

      • Владимир Савельев 2015-03-23 в 17:29 

        Может быть в интернете он и будет анимированный, но в закладках точно статика будет...у меня сколько закладок ни одного анимированного еще не видел :razz:

      • Игорь 2015-09-12 в 20:06 

        Ничего хорошего из анимированного фавикона не выйдет.

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

    • Артём 2015-03-23 в 22:55 

      Довольно интересно) Владимир, смотрел видео о вашем блоге у Борисова ;-)

      Ответить
      • Владимир Савельев 2015-03-23 в 23:32 

        Привет Артем! Да ладно :?: Что за видео :razz:

      • Игорь 2015-09-12 в 20:02 

        Володь,да ничего существенного.

        Просто Борисов приводил примеры блогов,которые топчатся на месте.

        Что то в этом роде

    • Саня Сабегатулин 2015-06-30 в 03:54 

      Да, рисовать фавикон это нужно уметь я пробовал, а потом плюнул на это дело. Взял картинку и подредактировал маленько.

      Ответить
  2. Александр Приколист 2015-03-23 в 17:40 

    В закладках и в поиске будет без анимации. Да и насколько я заметил анимация работает только в мозиле

    Как пример можешь здесь посмотреть put-k-uspehy.ru

    Ответить
    • Владимир Савельев 2015-03-23 в 18:51 

      Да посмотрел доллар крутится :razz:

      Ответить
  3. Николай+Вилков 2015-03-23 в 21:21 

    Я вот на своем новом сайте фавикон создал, в корневую папку загрузил, но в Head ничего не прописывал и он не отображается, попробую сделать по-иному. :mrgreen:

    Ответить
    • Владимир Савельев 2015-03-23 в 22:37 

      Было бы чудо если бы заработал :razz:

      Ответить
  4. Андрей Andrdov 2015-03-25 в 13:55 

    Если ты на картинке хотел написать «favicon .ico» то у тебя опечатка. Ты написал «.iso» :|

    Ответить
    • Владимир 2015-03-25 в 14:40 

      Точно Андрей :grin: спасибо за подсказку!!!

      Ответить
  5. Дмитрий 2015-04-23 в 09:46 

    Круто — возьму на заметку !!!

    Ответить
  6. bytrina 2015-06-05 в 15:44 

    Современному блоггеру без фавиконки нельзя, а что касается их выбора так вариантов достаточно много.

    Ответить
    • Саня Сабегатулин 2015-06-30 в 03:56 

      Да фавикон не маловажная вещь. Без нее сайт уже смотрится как г... сайт. Удивляюсь, когда такие сайты встречаю.

      Ответить
  7. Игорь 2015-06-27 в 23:03 

    С первых дней создания блога,у меня присутствует фавикон.

    Я думаю он уже примелькался и стал узнаваем.

    Ответить
  8. Ольга 2015-08-24 в 18:48 

    очень даже интересно попробовать себя художником)

    Ответить
    • Игорь 2015-09-12 в 19:58 

      Ну да,если еще знаешь что рисовать.

      ;-)

      Ответить

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

Прочитать Соглашение и Правила блога

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

Приветствую Вас друзья!
Савельев Владимир АлександровичМеня зовут Владимир Савельев, я являюсь автором блога savme.ru! Моя миссия - научить Вас создавать сайты, блоги и зарабатывать на них также, как это делаю я! Уже через год ведения блога я вышел на пассивный доход в 30.000 руб в месяц и это не предел! Еще я частенько пишу о своей жизни и устраиваю конкурсы с крутыми призами! Подпишитесь на мои новости, чтобы не пропустить что-то важное!
Безлимитная графика и шаблоны
Envato WW