Как сделать иконку для сайта прозрачными
Сегодня мы будем делать иконку для сайта, FAVICON с прозрачностью.
Что же такое Favicon?
Favicon ( сокр. от англ. Favorites ICON) — значок сайта. Отображается браузером в адресной строке перед URL страницы, а также в качестве иконки к закладке, в табах и в других элементах интерфейса.
Обычно используется изображение размера 16×16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, т. к. исторически сложилось, что там его ищет Internet Explorer. Все современные браузеры понимают явное указание положения значка в HTML-коде примерно в таком формате:
Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW ( за исключением Internet Explorer, который допускает для значка только формат ICO).
Создаём прозрачность.
Понадобилось мне однажды сделать нескольким сайтам favicon. Нашел картинки, порезал, загнал в генератор иконок, залил на сайт и сразу расстроился.
Вот так чудо, что за белые края у рисунка. Естественно я сразу начал грешить на сайты генераторы иконок и прочее. Нашел несколько других сайтов генераторов, но счастливее не стал.
После недолгих « сексуальных игр» с Фотошопом все получилось :). Для начала нужно сделать картинку, из которой мы будем создавать иконку.
Сделаем это в Photoshop:
Изображение обязательно должно быть равносторонним. Ширина картинки равна Высоте. Если хоть на 1 пиксель ни будут отличаться, иконка получится кривая.
Размер иконки должен быть не менее 16×16 пикселов. Можно и больше, генератор сам уменьшит картинку.
Создали картинку, отредактировали, почистили как нам надо кисточкой. Учтите, чтобы получилась прозрачность нужно. Чтобы фон был прозрачным. Эту настройку указываем при создании изображение в фотошопе. Background Contents, обычно она по умолчанию Transparent. Так и оставим.
После редактирования нажимает Ctrl + Alt + Shift + S и сохраняем нашу картинку в формате PNG.
Полученный файл загоняем в онлайн генератор. Я использовал http://tools.dynamicdrive.com/favicon/
И сгенерируем. Как результат, на выходе получаем файл *.ICO. Который в тулбаре, закладках и везде имеет прозрачность, где нам необходимо.
Готово. Есть ведь разница? 🙂
Сделать стандартный значок favicon.ico для сайта онлайн
Главное нужно указать файл картинки на вашем компьютере или телефоне, нажать кнопку ОК. Остальные настройки выставлены по умолчанию.
Примеры со значком этого сайта с изменённым тоном цвета в настройках «цветовой коррекции»:
Если в Фотошопе была сделана картинка с прозрачным фоном и нужно, чтобы после её преобразования иконка для сайта тоже была с прозрачностью, то для этого следует сохранить её в формате PNG24 с поддержкой прозрачности (на англ. прозрачность — transparency) используя, например, функцию в Фотошопе «Сохранить для веб. » (Save for web), после этого нужно указать эту картинку в формате .png на этом сайте для её преобразования в значок favicon.ico.
Для отображения значка favicon на своём сайте его необходимо загрузить в корневой каталог сайта и указать в html коде между тегами
. так: где favicon.ico — это название созданного значка.Иногда при замене или изменении иконки favicon на своём сайте нужно очистить кэш браузера, чтобы она обновилась.
Исходное изображение никак не изменяется. Вам будет предоставлен стандартный значок в формате .ICO для сайта.
Как сделать иконку приложения на прозрачном фоне?
Хочу сделать иконку приложения на прозрачном фоне. Для этого в фотошопе нарисовал картинку с альфа-каналом. Сохранил в png-файл. Загрузил в Android Studio. Иконка появилась на экране смартфона. Но вместо прозрачности светло-серый фон. Можно ли сделать фон иконки прозрачным и как?
Отслеживать
задан 10 фев 2021 в 14:03
197 1 1 серебряный знак 12 12 бронзовых знаков
Да, можно. Именно так и делать — пнг с прозрачным альфа-каналом. Хотя сейчас уже рекомендуют делать свг
Как сделать кнопку с прозрачной иконкой и фоном под ней?
Наверное вопрос супер глупый, но я не понимаю как сделать чтобы иконка была прозрачной и фон именно под ней тоже был прозрачным. Вот прикрепил фото как должно быть.
- Вопрос задан более трёх лет назад
- 796 просмотров
Комментировать
Решения вопроса 1
profesor08 @profesor08 Куратор тега CSS
Тебе сюда или на аналогичные ресурсы, где найдешь подходящую иконку: fontawesome.io/icon/check-circle
P.S. Если не найдешь, ты всегда можешь сделать .png картинкой.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать