Как сделать значок для сайта

Как сделать значок для сайта

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

Отображение иконки в строке браузера

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

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

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

Размещение плагина для сохранения файлов в формате ICO

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

Тип файла для сохранения иконки

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

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

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

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

Здесь вы можете сделать фавикон онлайн для своего сайта через генератор фавикон онлайн.

Фавиконки сделанные через этот сервис

Фавикон (favicon) с английского переводится как «иконка для избранного».
Она отображается в закладках браузера, а также рядом с заголовком страницы во вкладках браузера и рядом с названием страницы в некоторых поисковых системах, например Яндекс. Поэтому тем чем ярче и интереснее ваша фавиконка, тем больше вероятность, что она привлечёт внимание именно к вашему сайту.

Читайте также:  Джейлбрейк как узнать что он установлен

Что такое фавикон

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

Создание

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

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

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

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

Читайте также:  Wl 500gp v2 прошивка dd wrt

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

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

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

Google Chrome Internet Explorer Firefox Opera Safari
href="httр://mysite.ru/myicon.ico"> Да Да Да Да Да
Да Да (с IE 11) Да Да Да
Да Да (с IE 9) Да Да Да
Да Да (с IE 11) Да Да Да
Да Да (с IE 11) Да Да Да
Да Да (с IE 9) Да Да Да

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

Ссылка на основную публикацию
Как связаться с инстаграм по телефону
В этой статье расскажем о том, как работает горячая линия линия Инстаграмм, можно ли обратиться по телефону или доступен только...
Как разблокировать телефон samsung galaxy j1 mini
Характеристики Samsung Galaxy J1 mini Отзывы о Samsung Galaxy J1 mini Инструкция Samsung Galaxy J1 mini Прошивка Samsung Galaxy J1...
Как разблокировать флешку от защиты записи
Извиняюсь за заголовок, но именно так задают вопрос, когда при действиях с USB флешкой или SD картой памяти Windows сообщает...
Как связаться с инстаграмом
В этой статье расскажем о том, как работает горячая линия линия Инстаграмм, можно ли обратиться по телефону или доступен только...
Adblock detector