A- A A+

Иконка фавикон

Что такое фавикон (favicon)?

Это значок, отображаемый на вкладке браузера перед названием страницы. Также его показывает Яндекс в поисковой выдаче перед страницей сайта.

Иконка фавикон

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

Создаем иконку в Фотошопе

Для создания уникального фавикона воспользуемся программой Photoshop.

Итак, ФАЙЛ => Создать (CTRL+N). Ширина и высота - 50 пикселей, фон - белый.

Иконка фавикон

Увеличиваем масштаб картинки (CTRL и +). Выбираем цвет фона нажатием на верхний квадратик.

Иконка фавикон

После чего инструментом Заливка (G) заливаем фон картинки.

Иконка фавикон

Для создания буквы выберем инструмент Горизонтальный текст (T).

Иконка фавикон

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

Иконка фавикон

После настройки всех параметров картинки, необходимо свести слои. Для этого кликаем СЛОИ => Выполнить сведение.

Иконка фавикон

Сохраняем изображение - ФАЙЛ => Сохранить для Web (ALT+SHIFT+CTRL+S). Название любое, расширение - jpg.

Иконка фавикон

Преобразуем изображение в фавикон

Переходим на самый популярный русскоязычный сайт по созданию фавиконов - Favicon.ru.

Под Сделать favicon из изображения выбираем созданный в Фотошопе файл.

Иконка фавикон

На следующей странице нажимаем кнопку "Далее". Картинка появится в редакторе и будет показана в предпросмотре. Если все устраивает, жмем кнопку СКАЧАТЬ FAVICON.

Иконка фавикон

Иконка скачивается с автоматически установленным правильным названием favicon.ico.

Меняем стандартный фавикон на новый

Копируем файл favicon.ico в папку шаблона. Если фавикон не появляется, очистите кэш сайта. Очистку страницу в браузере легко сделать комбинацией клавиш CTRL+F5.

Мы вплотную приблизились к переносу сайта на хостинг. Об этом подробно рассказано в курсе "Перенос на хостинг".

 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

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

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

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!