Иконка для сайта: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

Содержание

Иконка для сайта — Создать свой сайт бесплатно

В поиске Яндекс возле названия сайта вы можете видеть маленький значок – иконка сайта. Он относится к фирменному стилю сайта, отличительная особенность не только в поиске от Яндекса, но и в закладках браузера.

Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок. До версии 7.0 MSIE использовал значки только для закладок, и поэтому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт.

Многие современные браузеры не требуют явного указания на favicon. ico в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico из корня сайта.

Поддерживаемые форматы иконки сайта: ICO, PNG, GIF, Анимированный GIF, JPEG, но если вы хотите, чтобы ваш фавикон отображался во всех браузерах выбирайте ICO.

Вы можете скачать готовые иконки для сайта http://faviconka.ru/ нажав на нужной картинке правой мышкой и выбрав Сохранить изображение как левой кнопкой мышки, сами нарисовать в графическом редакторе или сделать из фото.

Делаем favicon онлайн

Перейти https://www.favicon.by

Нарисовать в сетке нужную фигуру цветом подходящим к дизайну сайта

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

Осталось скачать иконку нажав кнопку СКАЧАТЬ ФАВИКОНКУ

Logaster — конструктор фирменного стиля: лого, фавикон, визитка, конверт, бланк, русские шрифты.

Как установить фавикон на сайт на хостинге

Копируем наш файл favicon.ico в корневую папку сайта (там, где лежит главная страница сайта) и всё.

Как установить фавикон на сайт Wix

Только на премиум тарифе. В Редакторе сайта слева нажмите Настройки > Фавикон > кликните Изменить. Выберите изображение из Мои фавиконы или нажмите Загрузить фото > кликните Выбрать фавикон > нажмите Готово. Фавикон может быть загружен в следующих форматах: .JPG и .PNG. размером 16 на16 пикселей.

Чтобы изменить фавикон в новом редакторе wix:

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

Как установить фавикон на blogger / blogspot

Для этого заходим в административную панель, вкладка Дизайн. Видим в левом верхнем углу гаджет Значок. Нажимаем «Изменить», — откроется окно Настройка значка Загружаем свой фавикон. И нажимаем сохранить.

В поиске Яндекс фавикон появиться после индексации роботом картинки, в браузере после перезагрузки вкладки, почистив кэш.

Следующее Предыдущее Главная страница

Установка иконки для сайта

Что такое иконка сайта?
Как создать иконку для сайта?
Установка иконки на сайт
Смена иконки сайта

Что такое иконка сайта?

Как вы могли уже заметить, когда страница сайта открыта в браузере, во вкладке отображается не только заголовок страницы, но также и маленькая иконка, которая располагается перед заголовком и помогает нам отличать страницы одного сайта от страниц других сайтов (см. рисунок №1). Это особенно удобно, когда в браузере одновременно открыто много различных страниц, принадлежащих разным сайтам. Кроме того, иконка веб-сайта отображается рядом с ссылкой при добавлении страницы сайта в закладки браузера, в истории браузера, а также в некоторых поисковиках, например, Яндексе, где иконки сайтов располагаются опять же перед заголовками страниц сайтов, выданных по текущему поисковому запросу. Так что же все-таки представляет из себя иконка сайта?

Иконка сайта (от англ. favorites icon) – это специальный значок сайта, который отображается в браузерах пользователей и позволяет более точно идентифицировать страницы данного сайта. Обычно иконка сайта представляет собой небольшой служебный файл favicon.ico в виде изображения размером 16х16 пикселей, которое располагается в корневой папке сайта.

Рис. №1. Пример содержимого корневой папки сайта

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

Как создать иконку для сайта?

Для создания иконки сайта нужно воспользоваться либо специальной программой, либо одним из онлайн сервисов в Интернете, либо создать квадратное изображение размера 16х16 и более пикселей самостоятельно, сохранив его в виде файлика favicon.ico (как можно легко догадаться, имя файла представляет собой сокращение от словосочетания favorites icon). При этом хотелось бы сделать пару уточнений:

разрешается использовать иконки и больших размеров, а точнее 32х32, 48х48 и более пикселей, однако браузеры в основном все равно сжимают их до стандартного значения в 16х16 пикселей;

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

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

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

После того, как иконка будет готова ее необходимо поместить в корневую папку сайта. Именно там браузеры по умолчанию будут искать ее для дальнейшего отображения на экране. При этом иконка будет отображаться рядом с заголовками всех страниц сайта. Если же необходимо разместить иконку в другой папке или для какой-то страницы требуется установить свою иконку, следует воспользоваться тегом <link> (см. пример №2).

HTML htmlCodes

<!DOCTYPE html>
<html>
<head>
	<!-- Указываем кодировку страницы -->
	<meta charset="utf-8">	
	<!--  Зададим базовый адрес  -->
	<base href="https://site.  name/">
	
	<!-- Иконка отобразится во вкладке возле данного заголовка страницы -->
	<title>Использование «link» для установки иконки сайта</title>
	<!-- Подключаем к странице иконку в формате ICO -->
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	
</head>
<body>
	Если необходимо подключить иконки других форматов, 
	следует использовать следующие конструкции:
    	
	<link rel="icon" href="favicon.jpeg" type="image/jpeg">
		
	<link rel="icon" href="favicon.png" type="image/png">
		
	<link rel="icon" href="favicon.gif" type="image/gif">
   
</body>
</html>

Пример №2 Использование элемента «link» для подключения иконки сайта

Как видно из примера, в теге <link> необходимо прописать абсолютный или относительный путь к файлу иконки, в качестве значения атрибута rel указать «icon», а в атрибуте type сообщить mime-тип подключаемого изображения.

Смена иконки сайта

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

Если же иконка расположена в папке, отличной от корневой, то следует поместить в данную папку новую иконку, а старую удалить (хотя, если форматы иконок будут отличаться, то старую иконку можно и не удалять). Далее, если формат новой иконки будет отличаться от формата старой, нужно будет обязательно прописать в теге <link> новые значения атрибутов href и type, т.к. при смене формата изображения изменится как расширение файла (а значит и путь к нему), так и его mime-тип.

Быстрый переход к другим страницам

Понятие файловой структуры сайта
Установка иконки сайта
Карта сайта
Вернуться к оглавлению учебника

280 648 иконок веб-сайтов — бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 5,8 миллионам активов

Веб-сайт Значок

Развитие веб-сайта Значок

Веб-сайт Значок

Макет сайта Значок

Обслуживание веб-сайта Значок

Веб-сайт Значок

Мониторинг сайта Значок

Оптимизация сайта Значок

Веб-сайт Значок

Пароль приложения веб-сайта Значок

Веб-сайт Значок

Панель управления веб-сайтом Значок

Веб-сайт Значок

Веб-сайт Реклама Значок

Обслуживание веб-сайта Значок

Веб-сайт Значок

Макет сайта Значок

Веб-сайт Значок

Развитие веб-сайта Значок

Крайний срок веб-сайта Значок

Веб-сайт Значок

Скорость сайта Значок

Анализ веб-сайта Значок

Веб-сайт Значок

Оптимизация сайта Значок

Алгоритм работы сайта Значок

Веб-сайт Значок

Кодирование сайта Значок

Веб-сайт Значок

Панель управления веб-сайтом Значок

Веб-сайт Значок

Макет сайта Значок

Поток дизайна веб-сайта Значок

Веб-сайт Значок

Страница веб-сайта Значок

Веб-сайт Значок

Веб-сайт Icon

Веб-сайты Icon — 103+ лучших идей веб-дизайна Icon 2023

Пожалуйста, нажмите «Сохранить избранное», прежде чем добавлять другие понравившиеся дизайны

Вы посмотрели 99дизайнов и хотите еще один кусочек?

Поиск идей для веб-сайтов

Веб-сайты с иконками не подходят? Попробуйте что-нибудь еще:

Макет сайтов

Баннерные сайты

Сайты-слайдеры

Обновленные веб-сайты

Пользовательские веб-сайты

Космические сайты

Концептуальные сайты

Сайты знакомств

Сайты разработки

Создание веб-сайтов

Сайты игр

Веб-сайты электронной коммерции

Темные сайты

Веб-сайты курсов

Сайты недвижимости

Как создать дизайн своего сайта с иконками

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

Начать конкурс

Дизайнеры со всего мира предлагают вам свои идеи. Вы предоставляете отзывы, оттачиваете свои фавориты и выбираете победителя.

Начать конкурс

Начать проект

Найдите идеального дизайнера, соответствующего вашему стилю и бюджету. Затем сотрудничайте один на один, чтобы создать собственный веб-сайт.

Начать проект

Узнайте больше о дизайне веб-страниц

4,6 в среднем от 2355 дизайн веб-страниц отзывы клиентов

Что делает сайт с иконками хорошим?

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