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


Как сделать Favicon для сайта

Что такое Favicon?

Favicon для сайта – это одна из его отличительных особенностей. Это еще один шаг к созданию и использованию фирменного стиля. Favicon, говоря простыми словами, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также favicon используется при добавлении страницы в закладки. Согласитесь, пользователю удобнее будет найти ваш сайт в закладках, если там будет изображена ваша «фирменная» иконка.

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

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

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

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:

Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:

Создаем Favicon из готового изображения

Для того, чтобы конвертировать готовую иконку в формате .png (который, кстати, тоже может использоваться для задания favicon), можно воспользоваться другим веб-сервисом: favicon.ru.

Устанавливаем Favicon на сайт

Когда иконка будет готова, вы сможете ее скачать в формате .ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:

<link rel="icon" href="favicon.ico"; type="image/x-icon" />

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

Также рекомендуется добавлять строку:

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

(для Internet Explorer).

Размер фавикона может быть 16x16, 32x32.

Полезное замечание

Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57x57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

<link rel="apple-touch-icon" href="apple-favicon.png" />

Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.

html - как сделать иконку для вашего сайта в верхней панели

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Как сделать иконку сайта


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

Что такое Favicon? Если вы когда-либо сохраняли ссылку на веб-сайт в избранном браузере, вы наверняка видели небольшой значок рядом с адресом веб-сайта.


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

Сделать фавикон очень просто. Вы можете сделать это в специальной программе для редактирования иконок, такой как Perfect Icon или IconXP. Кроме того, вы можете использовать редактор изображений Photoshop.Если вы не умеете рисовать, это не проблема. Вы можете просто нарисовать первую букву названия своего сайта и окружить ее художественной рамкой.

Итак, предположим, вы хотите создать значок для своего веб-сайта. Во-первых, вы должны загрузить бесплатный плагин Photoshop, который позволит вам открывать и сохранять изображения ICO. Этот плагин называется Icon Plugin for Photoshop, его можно скачать здесь. Распакуйте архив и скопируйте файл ICO.8bi из архива в папку File Formats, которая находится внутри папки Plug-Ins.Как правило, эту папку можно найти по адресу C: \ Program Files \ Adobe \ Photoshop 7.0 \ Plug-Ins \, но в вашей системе она может находиться в другом месте. Затем запустите Photoshop.

Размер иконки веб-сайта - 16x16 пикселей. Многим будет очень сложно рисовать такой крошечный квадрат. Конечно, вы можете нарисовать большое изображение, а затем уменьшить его до 16x16, но все мелкие детали исчезнут.

Создайте пустое изображение 16x16 с белым фоном. Увеличьте изображение в навигаторе или с помощью инструмента Zoom до максимума.В качестве примера я взял инструмент «Форма», выбрал «Сердце» в списке доступных фигур и растянул его пропорционально (удерживая клавишу Shift) почти на всю область:


Затем я объединил все слои и уменьшил их до реального размера с помощью навигатора. Выглядит не очень оригинально, но все же неплохо для примера.
Теперь сохраните изображение как файл favicon.ico. В меню Файл выберите Сохранить как (обратите внимание, что новый формат ICO появился в списке доступных форматов):
Завершите работу, сохранив фавикон.ico на сервере в корне веб-сайта и включая следующий код в заголовок HTML-страницы (обычно между тегами и ):

.

изображений - Как создать иконку для HTML?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

  1. Авторизоваться зарегистрироваться
  2. текущее сообщество

.

Как создать панель значков


Узнайте, как создавать панели значков с помощью CSS.



Как создать панель значков

Шаг 1) Добавьте HTML:

Пример



Шаг 2) Добавьте CSS:

Вертикальный пример

.панель значков {
ширина: 90 пикселей; / * Устанавливаем конкретную ширину * /
цвет фона: # 555; / * Темно-серый фон * /
}

. Icon-bar a {
дисплей: блок; / * Сделаем так, чтобы ссылки отображались друг под другом вместо бок о бок * /
выравнивание текста: по центру; / * Выровнять текст по центру * /
отступ: 16 пикселей; / * Добавляем отступы * /
transition: all 0.3s easy; / * Добавляем переход для эффектов наведения * /
цвет белый; / * Белый цвет текста * /
font-size: 36px; / * Увеличенный размер шрифта * /
}

.панель значков a: hover {
background-color: # 000; / * Добавляем наведение цвет * /
}

.active {
background-color: # 4CAF50; / * Добавляем активный / текущий цвет * /
}

Попробуй сам "

Горизонтальный пример

.icon-bar {
ширина: 100%; / * На всю ширину * /
background-color: # 555; / * Темно-серый фон * /
перелив: авто; / * Переполнение из-за поплавка * /
}

.icon-bar a {
плыть налево; / * Размещение ссылок рядом * /
text-align: центр; / * Выровнять текст по центру * /
ширина: 20%; / * Равная ширина (5 иконок по 20% ширины каждая = 100%) * /
padding: 12px 0; / * Некоторые отступы сверху и снизу * / переход
: все 0.3с легкость; / * Добавляем переход для эффектов наведения * /
color: white; / * Белый цвет текста * /
размер шрифта: 36 пикселей; / * Увеличенный размер шрифта * /
}

.icon-bar a: hover {
цвет фона: # 000; / * Добавляем цвет при наведении * /
}

.active {
цвет фона: # 4CAF50; / * Добавляем активный / текущий цвет * /
}

Попробуй сам "

Связанные страницы

Совет: Перейдите к нашему руководству CSS Navbar Tutorial, чтобы узнать больше о панелях навигации.

Совет: Перейдите к нашему руководству по значкам, чтобы узнать больше о значках.


.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий