Создание favicon для Вашего сайта

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

Многие пользователи нашего сайта задают нам вопросы по поводу favicon. В этом уроке я попробую расставить все точки над "i" :).

favicon - это маленькая иконка, которая находится слева от УРЛ страницы. Данная иконка используется в качестве визуального представления сайта. Сайты с favicon (особенно, если favicon красивый и запоминающийся) легче запомнить, чем сайты без него. Кроме этого, при добавлении сайта в закладки favicon отображается рядом с УРЛом.

favicon можно создать без помощи каких либо онлайн сервисов, используя любой графический редактор.

Но, намного легче все же пользоваться онлайн сервисами.

Первый сервис довольно прост и не требует каких-либо длинных инструкций:

1. www.favicon.ru

Все что от Вас требуется: 1) загрузить свою собственную картинку или 2) предоставить путь к картинке в сети - и сервис все остальное сделает за Вас. После нажатия кнопки "Создать favicon.ico" Вы будете перенаправленны на страницу, где можно будет просмотреть и скачать полученный результат.

Кроме этого там будет находится подробная инструкция о том, как добавить favicon к Вашему сайту.

2. www.favicon.cc

Также очень интересный и простой сервис. Единственный минус - это отсутствие русскоязычной версии. Знание английского языка не является обязательным, так как все что от Вас требуется это:

- Выбрать цвет
- нажимая на квадратики нарисовать лого
- загрузить полученный результат (делается это с помощью кнопки - Download Favicon)
- добавить его к себе на сайт
- по желанию, можно разместить его в каталоге для общего пользования

Кстати, в этом каталоге можно выбрать из огромного количества уже готовых вариантов

Для добавления favicon на Ваш сайт необходимо загрузить его в корневую папку и на каждой странице добавить следующий код:

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

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

Всего хорошего!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Максим Шкурупий
Урок создан: 13 Июля 2009
Просмотров: 37700
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

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

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 13 Июля 2009 22:03
    Lardok
    ...для фотошопа существует плагинчик, позволяющий сохранять в формате *.ico!
  • 14 Июля 2009 11:18
    Петрович
    И как этот плагин называется?
  • 14 Июля 2009 15:11
    Dimka
    для favicon необизательно разришение ico у меня сейчас стоит в gif
  • 14 Июля 2009 15:27
    WorkStudio
    Сделайте урок о том как организовать Личный Кабинет на своем сайте, как сделать вход на сайт через форму, работа с сессиями и т.п. Пожалуйста ! В инете искал ничего толкового нет.
  • 14 Июля 2009 15:36
    Dipixel
    IcoFX - это бесплатный редактор иконок. Он включается в себя все возможности для создания, редактирования и извлечения иконок. IcoFX поддерживает работу с прозрачными иконками для Windows XP и Windows Vista. С помощью более чем 40 инструментов, вы поистине обладаете безграничными возможностями по созданию иконок. Бесплатная. Скачать можно здесь: http://icofx.ro/ Про плагин для фотошопа то же интересно узнать.
  • 15 Июля 2009 13:13
    Joe_Tribbiani
    WorkStudio, поддерживаю!!!)) мне это тж интересно
  • 15 Июля 2009 15:26
    tehnolog
    В дополнение могу посоветовать еще статью Свой значок для веб-сайта по адресу http://webmaster.alexanderklimov.ru/view_articles.php?id=1
  • 15 Июля 2009 21:00
    alcapone
    Народ! Где Евгений? Уже два месяца ни записей на блог, ни коментов здесь, ни выпусков журнала, ни уроков. Пропал и всё!
  • 15 Июля 2009 22:49
    denkut
    "alcapone" Аналогичный вопрос? где он?
  • 15 Июля 2009 23:20
    МаксимШкурупий
    Евгений работает :) Все с ним хорошо! Не волнуйтесь :)
  • 16 Июля 2009 08:40
    Lardok
    to Петрович: Этот плагин называется ICOFormat. http://www.telegraphics.com.au/sw/ --- вот тут можно скачать е го. Скопировать его нужно в папку File Formats, которая находится внутри папки с плагинами Plug-Ins. У меня, эта папка располагается по адресу: C:\Program Files\Adobe\Photoshop 7.0\Plug-Ins\.
  • 16 Июля 2009 16:25
    Евгений
    Я на месте, просто ушел в создание нового курса и 35-го выпуска журнала. Скоро всё будет.
  • 19 Июля 2009 16:15
    Странник
    в мозиле обображается, в опере тоже... в эксплорере нет( что делать?
  • 19 Июля 2009 18:12
    Дед
    Советую делать не одну иконку,а три.Размеры 16х16,32х32,48х48 и разместить их в одной папке.Браузеры сами выберут,какой в строку засунуть,какой на рабочий стол.Дело в том,что в размере 16х16 поле деятельности по дизингу весьма ограничено,а вот в других размерах уже покачественней можно нарисовать.
  • 1 Августа 2009 04:27
    Sanches
    Могу порекомендовать хорошую программку для создания иконок в формате *ico. Скачать ее можно бесплатно и весит она всего 1.46 MB! Вот ссылка http://icofx.ro/files/icofxsetup.exe
  • 12 Сентября 2009 02:52
    SteelLion
    Sanches Да прога классная! и к тому же бесплатная умеет дёргать иконки из программ, конвертировать изображения в ico формат ну исамому нарисовать можно =)) Я давно уже её юзаю.
  • 14 Марта 2010 12:19
    Николай
    кегнкен
  • 19 Марта 2010 15:09
    Sergey
    <link rel="icon" href="images/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> Вставил иконку в images и прописал путь =) СПАСИБО =)
  • 23 Июля 2010 00:53
    Ольга
    Подскажите пожалуйста! на localhost фавикон виден, а загрузила на хостинг его не видно, хотя на этом же хостинге есть другой сайт там все работает! Различие только в том, что этот сайт(где не работает РНР, а другой HTML. Не думаю что это принципиально!
  • 26 Августа 2011 16:32
    Weliant
    Очень нужная вещь спасибо)
^ Наверх ^