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

Инструкция

Если вы бегло взгляните на свой рабочий стол (), можете увидеть много папок и ярлыков – это элементы рабочего стола. Каждый такой элемент можно изменить, т.е. заменить иконку. Для размещения иконок на достаточно владеть элементарными знаниями об операционных системах линейки Windows. Найдите любой файл в папке, который вы хотите запустить с рабочего стола, нажмите правой кнопкой мыши на нем, выберите пункт «Отправить», затем выберите «Рабочий стол (создать ярлык)». Таким образом, на рабочем столе появится ярлык, графической основой которого будет .

Чтобы изменить любые настройки отображения созданного ярлыка необходимо нажать правой кнопкой мыши на объекте и выбрать пункт «Свойства». В открывшемся окне перейдите к вкладке «Ярлык» и нажмите кнопку «Сменить значок».

В открывшемся окне «Смена значка» выберите любой значок, предлагаемый системой, или попробуйте установить свою в качестве иконки. Для этого нажмите кнопку «Обзор», укажите путь до картинки и нажмите кнопку «Открыть». Операционная система Windows распознает в качестве значков файлы с расширением ico. Такие файлы можно сделать при помощи специальных программ, а можно попробовать сделать лично. Для создания собственной иконки необходимо найти подходящую картинку, учитывая, что она будет небольшого размера. Файлы значков могут быть шириной (высотой) в 16, 32 и 48 пикселей.

Откройте программу Paint, которая входит в стандартный комплект программ операционных систем линейки Windows. Нажмите меню «Пуск», выберите пункт «Выполнить», в открывшемся окне введите mspaint и нажмите кнопку «ОК». В главном окне программы нажмите сочетание клавиш Ctrl + O и выберите подходящий для будущей иконки файл.

Теперь нажмите сочетание клавиш Ctrl + W, перед вами появится окно «Растяжение и наклон». Здесь необходимо указать значение в процентах, на которое вы собираетесь уменьшить картинку. В зависимости от размера вашего изображения проценты могут, как увеличиваться, так и уменьшаться. Для первого раза можно поставить оба значения на 50%. Нажмите сочетание клавиш Ctrl + E и проверьте размер вашего изображения. Изначально вы можете попробовать получить самый большой размер для иконки – 48 пикселей. Если ваше значение намного больше, попробуйте еще раз уменьшить картинку, нажав Ctrl + W.

После достижения желаемого результата остается только сохранить файл. Нажмите сочетание клавиш Ctrl + S и нажмите кнопку «Сохранить». Для превращения файла со стандартным расширением bmp в файл ico (значок или иконка) необходимо переименовать его, воспользовавшись файловым менеджером Total Commander или включив отображение расширений в вашей системе. Нужный вам файл был получен, воспользуйтесь способом, описанным в втором шаге, чтобы сменить иконку.

>> Как добавить иконку на сайт

Как легко и просто добавить иконку на сайт.

Пришло время показать Вам процесс, как добавить иконку на сайт . После того, как вы создали сайт, Вам хочеться чем-то заманить внимание Ваших посетителей себе на сайт. Данным метотодом и является создание иконки для сайта. Этот метот с иконкой, очень хорош и эффектен. Но, к сожалению не все поисковые системы поддерживают данную возможность. Из русскоязычных поисковых систем, только Яндекс позволяет пользователям видеть иконки сайтов непосредственно в самой поисковой системе.

На вопрос стоит ли ставить иконки на сайт, я думаю стоит. Этот метод приманивает больше посетителей с поисковой системы Яндекс. По иконкам посетитель может определить тематику вашего сайта, или она просто может загипнотизировать интернет-пользователя.

Поскольку иконки (favicon -английская аббревиатура) имеют малые размеры, то соответственно качество картинки должно быть, очень хорошим. Плохое качество иконки, может сделать вашу иконку для сайта малозаметной, разплывчатой и не интересной пользователю.

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

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

Пример: как добавить иконку "favicon" на сайт.

Создание иконки для сайта я покажу на примере одного простого сервиса. Данный сервис находится по url-адресу http://favicon.ru . После того, как Вы зайдете на данный сервис, то у вас появиться вот такое окно:

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

После того как вы нарисуете или загрузите картинку и вас будет все устраивать, то следующим этапом вам нужно будет ее скачать себе на компьютер.Для этого нажмите на кнопку "СКАЧАТЬ FAVICON " и сохраните его на своем компьютере. После этого вам нужно данную иконку загрузить на свой сайт в корень сайта (там, где находится ваша главная страница) и после чего у вас в браузере в окне, как показано на скриншоте выше, должна, загрузится ваша иконка сайта.

Если ваша иконка не появиться на сайте в верху url-адреса сайта, то скопируйте и вставте себе на сайт на каждую страницу сайта внутри парного html тега такой код:

Если у Вас не появиться ваша иконка на сайте, то сделайте еще пару действий;

1. Перезагрузите вашу страницу сайта.

2. Потяните мышкой зажав левую кнопку за угол где должна появиться иконка и потяние ее вниз.

Все после этого, радуемся появлением иконки на своем сайте.

В Яндексе ваша созданная иконка появится не сразу, а после того как Яндекс переиндексирует ваш сайт.

На этом у меня все.

Надеюсь моя статья оказалась вам полезной и интересной и вы теперь знаете как добавить иконку на сайт.

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

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico .

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

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

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

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png , в зависимости от типа изображения.

Фавикон (favicon - это сокращение от Favorite icon, в переводе с анг. означает любимый значок) - иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом. Браузеры, которые поддерживают добавление фавикона, обычно отображают его в адресной строке и во вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, сохраненного на рабочем столе. Поисковая система Яндекс, придала фавикону большое значение и отображает его вместе с результатами поиска.

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16x16, 32x32 или 64x64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

• Фавикон должен быть выполнен в том же стиле, что и сайт, так как он является своего рода визитной карточкой вашего проекта.
• Изображение, которое вы хотите использовать в качестве фавикона, должно быть предельно простым для понимания, лучше используйте всего несколько элементов.
• Следите за тем, что бы фавикон, максимально передавал суть вашего сайта, бизнеса, проекта.
• Создавать картинку лучше так, что бы она вызывала у посетителей вашего сайта ассоциации. Например, иконка телефона, для салона мобильных телефонов.

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом , в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:

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

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

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

Favicon - это небольшая картинка размером 16x16 (или 32x32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты . На мой взгляд, они многое теряют. Например, в Yandex отображаются иконки сайтов, и люди переходят по таким сайтам гораздо чаще, чем по тем, на которых нет favicon . Также, на мой взгляд, это немного повышает авторитетность сайта. В общем, в этой статье мы установим favicon на сайт .

Для начала как найти favicon . Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc . На нём Вы прямо в онлайне создадите себе favicon . Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ - это воспользоваться поиском и запросом: "коллекция favicon ". Думаю, что уже первый сайт покажет Вам тысячи различных favicon , и Вам останется его только выбрать.

Теперь второй шаг - установка favicon на сайт . Для этого добавьте внутри тега следующую строку:

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

После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

Иногда favicon появляется не сразу. Как правило, виновато кэширование браузера. Поэтому если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится .