Значок для сайта: Как сделать иконку сайта на вкладке

Содержание

Иконка сайта.

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

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

а также в результатах поиска поисковой системы Яндекс

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

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

Как подключить иконку к своему сайту?

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

Напомню, тег <link> имеет атрибуты:

  • href — Путь к файлу.
  • rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.
    • shortcut icon — Определяет, что подключаемый файл является иконкой.
    • stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
    • application/rss+xml — Файл в формате XML для описания ленты новостей.
  • type — MIME тип данных подключаемого файла.

И пишется в голове документа между тегами <head> </head> следовательно вся запись вместе приобретает следующий вид:

<head>
<link rel=»shortcut icon» href=»favicon. ico» type=»image/x-icon»>
</head>

Где favicon.ico название иконки лежащей в корневой папке сайта.

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

<link rel=»shortcut icon» href=»favicon.ico» type=»image/x-icon»>

Однако всё же лучше связывайте иконку со страницей сайта тегом <link>

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Иконка сайта</title>
<link rel=»shortcut icon» href=». ./graphics/favicon.ico» type=»image/x-icon»>
</head>
<body>
<h2>Моя любимая страничка!</h2>
<p>Эта страничка использует индивидуальную иконку в виде сердечка.</p>
</body>
</html>

смотреть пример  

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

Как самостоятельно изготовить файл favicon.ico?

Способ первый:

Найти в Интернете готовую подходящую иконку в коллекциях иконок..

Способ второй:

Изготовить иконку с помощью какого либо онлайн сервиса. Наиболее популярным сервисом, создающим иконки для сайта, в русскоязычном Интернете, является ресурс www.favicon.ru

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

Ну и третий способ:

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

Лично я пользуюсь не сильно хитрой программкой — редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве «конвертора», а не графического редактора. . программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.

Как изменить иконку (favicon) для сайта?

В инструкции рассмотрены следующие вопросы:

  • Зачем нужен favicon для сайта?
  • Где взять иконку для сайта?
  • Как установить иконку на сайт?
  • Как объявить Apple Touch icon и плитку для Windows 10?

Зачем нужен favicon для сайта?

Favicon (англ. favorite icon — избранный значок) — это небольшое изображение, которое ассоциируется с определенным вебсайтом. Вы, наверняка, замечали, что у каждого сайта есть такая иконка:

Вот где можно увидеть такую иконку:

  • Закладки и вкладки браузера
  • Результаты поиска Яндекс, Google
  • Каталоги и рейтинги, которые загружают favicon сайтов
  • Панель задач и рабочий стол операционной системы

Иконка сайта позволяет пользователям быстрее находить сайт во вкладках браузера или результатах поиска. Favicon повышает узнаваемость сайта.

Где взять иконку для сайта?

По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:

  • Найти в интернете готовый файл иконки с расширением .ico (например, здесь)
  • Перевести изображение в иконку с помощью онлайн сервисов конвертации или специальных программ
  • Самостоятельно нарисовать иконку в графическом редакторе (например, в GIMP)

При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.

Наряду с расширением .ico, в настоящее время используются иконки формата .png. Разрешение таких изображений может достигать 180×180 пикселей.

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

Когда у вас будут готовы файлы иконок с расширением ico и png, с помощью файлового менеджера загрузите их в корень сайта (корень — это то, что вы видите первым при входе в файловый менеджер не переходя в другие директории):

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

Важно! Чтобы иконка отобразилась сразу, достаточно открыть ее по прямой ссылке http://ваш-сайт.ру/favicon.ico и несколько раз выполнить комбинацию клавиш CTRL+F5. В результате вы в кеше обновите иконку на новую, далее при открытии главной страницы сайта просто обновите ее несколько раз и иконка в вкладке должна обновиться на новую.

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

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144. png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">

В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом:

<meta name="msapplication-square70x70logo" content="tile-70x70.png" />
<meta name="msapplication-square150x150logo" content="tile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="tile-310x150.png" />
<meta name="msapplication-square310x310logo" content="tile-310x310.png" />

6 966 523+ высококачественных иконок — Iconfinder

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

Перо

286 иконок

Лето

5 515 иконок

Мир в пастели

426 иконок

Шрифт Awesome Обычный

159 иконок

Шрифт Awesome Solid

1000 иконок

Иониконс Шарп

414 иконок

Иконуар

937 иконок

Начальная загрузка

1071 значок

Свободно Обычный 24px

1565 иконок

Свободно Обычный 20px

1399 иконок

Fluent Solid 24px

1568 иконок

Fluent Solid 20px

1401 значок

Получите 10 кредитов за премиум-контент

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

Подробнее о Pro
Начните 7-дневную бесплатную пробную версию

Затем 9 долларов в месяц. Отменить в любое время.

Люминофор Duotone

1047 иконок

Фосфор Обычный

1047 иконок

Фосфорный наполнитель

1047 иконок

Люминофор

1047 иконок

Плампиконы

4543 иконки

РемиксИконка

2103 иконки

Руди

1676 иконок

Эссенциальная линия

1600 иконок

Линия

12 иконок

Эссенция Твердая

1600 иконок

Эссенция заполнена

1600 иконок

Базисоны — Линия

4187 значков

Вебина

482 иконки

Системный интерфейс

420 иконок

4.0 Специальная коллекция Justicon

2304 иконки

Пикон Базовый

659 иконок

Пиконы тонкие

1881 значок

Исходный

2536 иконок

Набор иконок в одну линию

336 иконок

Гизмо

839 иконок

Эго

3688 иконок

Иконуиоо

1651 значок

Сценарий Графит

1000 иконок

Smashicons — ультрацвет

4030 иконок

Получите 10 кредитов за премиум-контент

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

Подробнее о Pro
Начните 7-дневную бесплатную пробную версию

Затем 9 долларов в месяц. Отменить в любое время.

Фигурки

20 911 иконок

Буке 1.0 Flat

780 иконок

Дудл

1117 иконок

Микроточки Контур

2560 иконок

Коллекция разнообразных аватаров

959 иконок

Строка

8 742 иконки

Пика

814 иконок

Дайго

1200 иконок

Эмоджи

1242 значка

Заполнить контур

4971 значок

Лайлак

1798 иконок

Проводной iOS

998 иконок

Обивный цвет

1850 иконок

Sliceberry — Линия UIcons

1490 иконок

Пикси Солид

590 иконок

Пикси Лайн

704 иконки

64×64 Pixel Perfect

3764 иконки

(Цвет) Коллекция иконок Connecto Line

920 иконок

Унигрид Фантом

3566 значков

Базисоны — Твердые

3795 иконок

Большой контур

850 иконок

Плоские ходы

744 иконки

Жирная линия

4507 иконок

Бабблконы — Линия

10 560 иконок

Буке 1.

0 Градиент

779 иконок

Строка

2193 иконки

Базовая система

291 значок

Вихревой

69 иконок

Микроточки Премиум

3070 иконок

Ава: Черная Пустота

787 иконок

Контур

1811 иконок

Квартира

1811 иконок

Полутвердый

1548 иконок

Мини-круглый

350 иконок

Материя

3161 значок

человек

594 иконки

Получите 10 кредитов за премиум-контент

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

Подробнее о Pro
Начните 7-дневную бесплатную пробную версию

Затем 9 долларов в месяц. Отменить в любое время.

Цвет каракулей

647 иконок

Пунктирная линия

4723 иконки

Приложение

/

4657 значков

Мини-квадрат

640 иконок

Буно

3100 иконок

Красочные пищевые ингредиенты

314 иконок

Микротонкая линия

1140 иконок

Заполненные контурные иконки

39 589 иконок

Значок линии

48 739 иконок

Космо

1566 иконок

Смэшиконы

15 610 иконок

Система углеродного дизайна

2004 иконки

Jumpicon — глиф

3056 значков

Jumpicon — Линия

3106 значков

УСБ

704 иконки

IconPark

2433 иконки

Солик

572 иконки

Линек

572 иконки

Твердые значки подростков

600 иконок

Контур подростковых иконок

599 иконок

Стол

1518 иконок

Глиф

976 иконок

Унилайт

3551 значок

Микро-Глиф

1187 иконок

Микро-Линия Жира

1160 иконок

Эвериконы

520 иконок

Варенье

940 иконок

Линия Потрясающая

1380 иконок

Пищевые ингредиенты, нарисованные вручную

314 иконок

Пикси

2 270 иконок

Безупречный

500 иконок

32 419+ высококачественных иллюстраций — Iconfinder

Основной

1 208 иллюстраций

ПОП

300 иллюстраций

Черно-белая деятельность

664 иллюстрации

Очередь человек

396 иллюстраций

Вторник

97 иллюстраций

Зоолостеры

150 иллюстраций

Блок

100 иллюстраций

Истории

91 иллюстрация

Кальма

200 иллюстраций

Гуманный

573 иллюстрации

Центр города

200 иллюстраций

Бейкер

116 иллюстраций

Получите 10 кредитов за премиум-контент

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

Подробнее о Pro
Начните 7-дневную бесплатную пробную версию

Затем 9 долларов в месяц. Отменить в любое время.

Жевательная резинка

85 иллюстраций

Корень

24 иллюстрации

Лотте

112 иллюстраций

Призрак

165 иллюстраций

Градиент

125 иллюстраций

Зима

127 иллюстраций

Мелок

50 иллюстраций

ФриЛайн

34 иллюстрации

Блюз

60 иллюстраций

Робин

21 иллюстрация

Ингредиенты хорошей жизни

15 иллюстраций

Игровой набор

96 иллюстраций

Фиолетовый

54 иллюстрации

заводной

50 иллюстраций

Клементина

78 иллюстраций

Обнаженная

68 иллюстраций

Шашки

120 иллюстраций

Конфеты

69 иллюстраций

Лимон

66 иллюстраций

Жирный

50 иллюстраций

Чирио

60 иллюстраций

Цветность

70 иллюстраций

Художественный

40 иллюстраций

Современный

35 иллюстраций

Получите 10 кредитов за премиум-контент

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

Подробнее о Pro
Начните 7-дневную бесплатную пробную версию

Затем 9 долларов в месяц. Отменить в любое время.

Человек

116 иллюстраций

Цветные капли

155 иллюстраций

Немо

107 иллюстраций

Пурпурный

139 иллюстраций

Симлайн

40 иллюстраций

Свечение

52 иллюстрации

Горчица

50 иллюстраций

Транзакция

41 иллюстрация

Стэнли

20 иллюстраций

Ежедневная деятельность

1 149 иллюстраций

Пастель

39 иллюстраций

Лютер

14 иллюстраций

Пусто

21 иллюстрация

Миксология

30 иллюстраций

Скрэнтон

36 иллюстраций

Винтаж

31 иллюстрация

Сцены из жизни

126 иллюстраций

Лила

124 иллюстрации

Участок

21 иллюстрация

Такси

31 иллюстрация

Бахрома

19 иллюстраций

Юмор

50 иллюстраций

Берегите себя

9 иллюстраций

Небо

48 иллюстраций

Вечный

30 иллюстраций

Кубизм

36 иллюстраций

Сцепка

18 иллюстраций

Домашний

10 иллюстраций

Симлайн

20 иллюстраций

Ч/Б

30 иллюстраций

ссылки

22 иллюстрации

Симпатичный

72 иллюстрации

Колти

30 иллюстраций

Букейкон 2.