VS Code Favicon Tools Guide
Master favicon development in VS Code: essential extensions, live preview, code snippets, workspace settings, and productivity tools.
Essential VS Code Extensions
| Extension | Purpose | Install Command |
|---|---|---|
| Live Server | Preview HTML with favicon | ext install ritwickdey.LiveServer |
| Image Preview | View favicon images inline | ext install kisstkondoros.vscode-gutter-preview |
| SVG Preview | Preview SVG favicons | ext install SimonSiefke.svg-preview |
| HTML CSS Support | Autocomplete favicon tags | ext install ecmel.vscode-html-css |
Custom Code Snippets
Create Favicon Snippets
Setup Custom Snippets
File ? Preferences ? User Snippets ? html.json
{
"Favicon Complete": {
"prefix": "favicon-full",
"body": [
"<!-- Favicons -->",
"<link rel=\"icon\" type=\"image/x-icon\" href=\"/favicon.ico\">",
"<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png\">",
"<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png\">",
"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">",
"<link rel=\"manifest\" href=\"/site.webmanifest\">",
"<meta name=\"theme-color\" content=\"$1\">"
],
"description": "Insert complete favicon code"
},
"Favicon Basic": {
"prefix": "favicon-basic",
"body": [
"<link rel=\"icon\" type=\"image/x-icon\" href=\"/favicon.ico\">"
],
"description": "Insert basic favicon"
},
"Apple Touch Icon": {
"prefix": "apple-touch-icon",
"body": [
"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">"
],
"description": "Insert Apple touch icon"
},
"Web Manifest": {
"prefix": "webmanifest",
"body": [
"<link rel=\"manifest\" href=\"/site.webmanifest\">"
],
"description": "Insert web manifest link"
}
}Usage
Type favicon-full and press Tab to insert complete favicon code.
Workspace Settings
.vscode/settings.json
{
// File associations
"files.associations": {
"*.webmanifest": "json",
"browserconfig.xml": "xml"
},
// File exclusions
"files.exclude": {
"**/.DS_Store": true
},
// Search exclusions
"search.exclude": {
"**/node_modules": true,
"**/dist": true,
"**/build": true
},
// Image preview in gutter
"gutterpreview.showimagepreviewongutter": true,
// Live Server settings
"liveServer.settings.root": "/public",
"liveServer.settings.port": 3000,
// Emmet for HTML
"emmet.includeLanguages": {
"html": "html"
}
}Automated Tasks
.vscode/tasks.json
Favicon Optimization Task
{
"version": "2.0.0",
"tasks": [
{
"label": "Optimize Favicons",
"type": "shell",
"command": "npm run optimize-favicons",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": false
},
"presentation": {
"reveal": "always",
"panel": "new"
}
},
{
"label": "Generate Favicons",
"type": "shell",
"command": "node scripts/generate-favicons.js",
"problemMatcher": []
}
]
}Run with: Ctrl+Shift+P ? "Tasks: Run Task"
VS Code Tips & Tricks
Quick Preview
- Hover over image path ? See preview
- Click image path ? Open in editor
- Ctrl+Click ? Open in new tab
- Install "Image Preview" extension
File Navigation
- Ctrl+P ? Quick file open
- Type
favicon.ico? Jump to file - Ctrl+Tab ? Switch files
- Drag & drop files in explorer
Best Practices
? Recommended
- Install Live Server for testing
- Create custom snippets for speed
- Use Image Preview extension
- Configure workspace settings
- Set up automated tasks
- Use integrated terminal
- Enable Emmet for HTML
? Avoid
- Not using extensions
- Manual HTML typing
- Not testing locally
- Ignoring workspace settings
- Not using version control
- Opening large image files
Generate Favicons for Your Project
Create optimized favicon packages ready to use in VS Code
Generate Favicons